Issue 105 : Dark Mode + Theming alshedivat#118 (alshedivat#119)

* Dark Mode + Theming * Themes scss file created with default color scheme and dark color scheme. * Logic for managing dark mode toggle added. * Modified existing scss/html to work with theme toggling. * Fixed hover issues * Added enable_darkmode to configs. * Added the requested option of disabling/enabling dark mode via config files.
ztjona · Oct 5, 2020 · e30a46b · e30a46b
1 parent c085a63
commit e30a46b
Show file tree

Hide file tree

Showing 11 changed files with 170 additions and 38 deletions.
diff --git a/_config.yml b/_config.yml
@@ -151,6 +151,7 @@ enable_google_analytics:  false
 enable_mansory:           true
 enable_math:              true
 enable_tooltips:          false
+enable_darkmode:          false
 show_social_icons:        false
 
 # -----------------------------------------------------------------------------

diff --git a/_includes/head.html b/_includes/head.html
@@ -32,3 +32,8 @@
 <link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
 
 <link rel="canonical" href="{{ page.url | replace:'index.html','' | relative_url }}">
+
+<!-- Theming-->
+{% if site.enable_darkmode %}
+  <script src="{{ '/assets/js/theme.js' | relative_url }}"></script>
+{% endif %}
diff --git a/_includes/header.html b/_includes/header.html
@@ -1,7 +1,7 @@
 <header>
 
     <!-- Nav Bar -->
-    <nav id="navbar" class="navbar navbar-light bg-white navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}">
+    <nav id="navbar" class="navbar navbar-light navbar-expand-sm {% if site.navbar_fixed %}fixed-top{% else %}sticky-top{% endif %}">
     <div class="container">
       {% if page.title != "about" %}
       <a class="navbar-brand title font-weight-lighter" href="{{ site.baseurl | prepend: site.url }}/">
@@ -56,6 +56,14 @@
           </li>
           {% endif %}
           {% endfor %}
+          {% if site.enable_darkmode %}
+            <div class = "toggle-container">
+              <a id = "light-toggle">
+                  <i class="fas fa-moon"></i>
+                  <i class="fas fa-sun"></i>
+              </a>
+            </div>
+          {% endif %}
         </ul>
       </div>
     </div>

diff --git a/_includes/scripts/misc.html b/_includes/scripts/misc.html
@@ -19,3 +19,6 @@
 
 <!-- Load Common JS -->
 <script src="{{ '/assets/js/common.js' | relative_url }}"></script>
+
+<!-- Load DarkMode JS -->
+<script src="{{ '/assets/js/dark_mode.js' | relative_url }}"></script>
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -5,9 +5,9 @@
 // Typography
 
 a, table.table a {
-  color: $theme-color;
+  color: var(--global-theme-color);
   &:hover {
-    color: $theme-color;
+    color: var(--global-theme-color);
     text-decoration: underline;
   }
   &:hover:after {
@@ -65,7 +65,7 @@ a, table.table a {
     color: inherit;
     font-size: 0.875rem;
     &:hover {
-      color: $theme-color;
+      color: var(--global-theme-color);
       text-decoration: none;
     }
   }
@@ -78,6 +78,7 @@ a, table.table a {
   box-shadow: none;
   border-bottom: 1px solid $grey-color-light;
   opacity: 0.95;
+  background-color: var(--global-bg-color);
 }
 .navbar.navbar-light {
   // Remove link decoration
@@ -86,25 +87,27 @@ a, table.table a {
       text-decoration: none;
     }
   }
+  .navbar-brand {
+    color: var(--global-text-color);
+  }
   .navbar-nav .nav-item .nav-link {
     &:hover {
-      color: $theme-color;
+      color: var(--global-hover-color);
     }
   }
   .navbar-nav .nav-item.active>.nav-link {
       background-color: inherit;
-      color: $theme-color;
       font-weight: bolder;
+      color: var(--global-theme-color);
       &:hover {
-        color: $theme-color;
+        color: var(--global-hover-color);
       }
   }
   .contact-icon {
     font-size: 2rem;
     a {
-      color: $grey-color-dark;
       &:hover {
-        color: $theme-color;
+        color: var(--global-hover-color);
       }
     }
   }
@@ -150,8 +153,12 @@ a, table.table a {
 
 .news table td {
   font-size: 1rem;
+  color: var(--global-text-color);
 }
 
+.news table th {
+  color: var(--global-text-color);
+}
 
 // Social (bottom)
 
@@ -160,9 +167,9 @@ a, table.table a {
   .contact-icon {
     font-size: 4rem;
     a {
-      color: $grey-color-dark;
+      color: var(--global-icon-color);
       &:hover {
-        color: $theme-color;
+        color: var(--global-theme-color);
       }
     }
   }
@@ -173,19 +180,18 @@ a, table.table a {
 
 
 // Footer
-
 footer.fixed-bottom {
-  color: lighten($grey-color, 25%);
-  background-color: $grey-color-dark;
+  color: var(--global-footer-text-color);
+  background-color: var(--global-footer-bg-color);
   font-size: 0.75rem;
   .container {
     padding-top: 9px;
     padding-bottom: 8px;
   }
   a {
-    color: white;
+    color: var(--global-footer-link-color);
     &:hover {
-      color: lighten($theme-color, 25%);
+      color: pink;
       text-decoration: none;
     }
   }
@@ -207,7 +213,7 @@ footer.sticky-bottom {
   padding-top: 2rem;
   padding-bottom: 5rem;
   h1 {
-    color: $theme-color;
+    color: var(--global-theme-color);
     font-size: 5rem;
   }
 }
@@ -227,19 +233,19 @@ footer.sticky-bottom {
       margin-bottom: 0;
     }
     a {
-      color: black;
+      color: var(--global-text-color);
       text-decoration: none;
       &:hover {
-        color: $theme-color;
+        color: var(--global-theme-color);
       }
     }
   }
 }
 
 .pagination .page-item.active .page-link {
-  background-color: $theme-color;
+  background-color: var(--global-theme-color);
   &:hover {
-    background-color: $theme-color;
+    background-color: var(--global-theme-color);
   }
 }
 
@@ -248,7 +254,7 @@ footer.sticky-bottom {
 
 .distill {
   a:hover {
-    border-bottom-color: $theme-color;
+    border-bottom-color: var(--global-theme-color);
     text-decoration: none;
   }
 }
@@ -264,7 +270,7 @@ footer.sticky-bottom {
       color: black;
       text-decoration: none;
       &:hover {
-        color: $theme-color;
+        color: var(--global-theme-color);
       }
     }
   }
@@ -279,7 +285,7 @@ footer.sticky-bottom {
 .publications {
   margin-top: 2rem;
   h1 {
-    color: $theme-color;
+    color: var(--global-theme-color);
     font-size: 2rem;
     text-align: center;
     margin-top: 1em;
@@ -311,7 +317,7 @@ footer.sticky-bottom {
         margin-bottom: 0.5rem;
         abbr {
           display: inline-block;
-          background-color: $theme-color;
+          background-color: var(--global-theme-color);
           padding-left: 1rem;
           padding-right: 1rem;
           a {
@@ -322,16 +328,16 @@ footer.sticky-bottom {
           }
         }
         .award {
-          color: $theme-color !important;
-          border: 1px solid $theme-color;
+          color: var(--global-theme-color) !important;
+          border: 1px solid var(--global-theme-color);
         }
       }
       .title {
         font-weight: bolder;
       }
       .author {
         a {
-          border-bottom: 1px dashed $theme-color;
+          border-bottom: 1px dashed var(--global-theme-color);
           &:hover {
               border-bottom-style: solid;
               text-decoration: none;
@@ -344,15 +350,15 @@ footer.sticky-bottom {
       }
       .links {
         a.btn {
-          color: $text-color;
-          border: 1px solid $text-color;
+          color: var(--global-text-color);
+          border: 1px solid var(--global-text-color);
           padding-left: 1rem;
           padding-right: 1rem;
           padding-top: 0.25rem;
           padding-bottom: 0.25rem;
           &:hover {
-            color: $theme-color;
-            border-color: $theme-color;
+            color: var(--global-theme-color);
+            border-color: var(--global-theme-color);
           }
         }
       }
@@ -394,3 +400,16 @@ footer.sticky-bottom {
     }
   }
 }
+
+// Rouge Color Customization
+code {
+  color: var(--global-theme-color);
+}
+// Transitioning Themes
+html.transition,
+html.transition *,
+html.transition *:before,
+html.transition *:after {
+  transition: all 750ms !important;
+  transition-delay: 0 !important;
+}
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -4,7 +4,8 @@
 
  body {
    padding-bottom: 70px;
-   color: $text-color;
+   color: var(--global-text-color);
+   background-color: var(--global-bg-color);
  }
 
  body.fixed-top-nav {

diff --git a/_sass/_themes.scss b/_sass/_themes.scss
@@ -0,0 +1,43 @@
+/*******************************************************************************
+ * Themes
+ ******************************************************************************/
+
+:root {
+  --global-bg-color: #{$white-color};
+  --global-text-color: #{$black-color};
+  --global-theme-color: #{$purple-color};
+  --global-hover-color: #{$light-purple-color};
+  --global-footer-bg-color: #{$grey-color-dark};
+  --global-footer-text-color: #{$grey-color-light};
+  --global-footer-link-color: #{$white-color};
+  --global-icon-color: #{$grey-color-dark};
+
+  .fa-sun {
+    display : none;
+  }
+  .fa-moon {
+    padding-left: 10px;
+    padding-top: 12px;
+    display : block;
+  }
+}
+
+html[data-theme='dark'] {
+  --global-bg-color: #{$grey-color-dark};
+  --global-text-color: #{$grey-color-light};
+  --global-theme-color: #{$cyan-color};
+  --global-hover-color: #{$light-cyan-color};
+  --global-footer-bg-color: #{$grey-color-light};
+  --global-footer-text-color: #{$grey-color-dark};
+  --global-footer-link-color: #{$black-color};
+  --global-icon-color: navajowhite;
+
+  .fa-sun {
+    padding-left: 10px;
+    padding-top: 12px;
+    display : block;
+  }
+  .fa-moon {
+    display : none;
+  }
+}
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -14,12 +14,14 @@ $orange-color:        #F29105 !default;
 $blue-color:          #0076df !default;
 $blue-color-dark:     #00369f !default;
 $cyan-color:          #2698BA !default;
+$light-cyan-color:    lighten($cyan-color, 25%);
 $green-color:         #00ab37 !default;
 $green-color-lime:    #B7D12A !default;
 $green-color-dark:    #009f06 !default;
 $green-color-light:   #ddffdd !default;
 $green-color-bright:  #11D68B !default;
 $purple-color:        #B509AC !default;
+$light-purple-color:  lighten($purple-color, 25%);
 $pink-color:          #f92080 !default;
 $pink-color-light:    #ffdddd !default;
 $yellow-color:        #efcc00 !default;
@@ -28,8 +30,5 @@ $grey-color:          #828282 !default;
 $grey-color-light:    lighten($grey-color, 40%);
 $grey-color-dark:     darken($grey-color, 25%);
 
-/* Set theme colors *************************/
-$theme-color:         $purple-color;
-
-$link-color:          $theme-color;
-$text-color:          #111 !default;
+$white-color: #ffffff !default;
+$black-color: #000000 !default;
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -5,6 +5,7 @@
 
 @import
   "variables",
+  "themes",
   "layout",
   "base"
 ;