Imported the dark-mode toggle.

cotes2020 · cotes2020 · commit b4b2f6d51308 · 2020-02-13T22:31:28.000+08:00
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -56,6 +56,11 @@
 </div><!-- #nav-wrapper -->
 
 <div class="contact d-flex justify-content-around mt-4">
+
+  <span id="mode-toggle-wrapper" class="d-flex justify-content-center align-items-center">
+    {% include dark-mode-toggle.html %}
+  </span>
+
   <a href="https://github.com/{{ site.github.username }}" target="_blank">
     <i class="fab fa-github-alt"></i>
   </a>
@@ -69,4 +74,5 @@
   <a href="{{ site.baseurl }}/feed.xml" target="_blank">
     <i class="fas fa-rss"></i>
   </a>
+
 </div>
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -231,10 +231,26 @@ body {
   /*box-shadow: inset 0 0 0.25em 0 rgba(0, 0, 0, 0.22);*/
 }
 
-#sidebar .contact a:hover {
+#sidebar .contact a:hover,
+#sidebar #mode-toggle-wrapper:hover {
   color: #fff;
 }
 
+#mode-toggle-wrapper {
+  color: rgb(103, 107, 109);
+  font-size: 1.05rem;
+  user-select: none;
+  transition: color 0.35s ease-in-out;
+}
+
+#sidebar #mode-toggle-wrapper>i::after {
+  content: "";
+  color: #525354;
+  border-right: 1px solid;
+  padding-left: .6rem;
+}
+
+
 /*--- top-bar ---*/
 
 #topbar-wrapper {
@@ -1107,6 +1123,10 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     padding: 0 0.6rem;
   }
 
+  #mode-toggle-wrapper {
+    padding-left: 1.2rem;
+  }
+
   #main-wrapper {
     margin-left: 210px;
   }
@@ -1362,6 +1382,10 @@ div.tooltip-inner { /* Overrided BS4 Tooltip */
     padding-top: .45rem;
   }
 
+  #mode-toggle-wrapper {
+    font-size: 1.6rem;
+  }
+
   footer>div.d-flex {
     max-width: 1130px;
   }
