feat(theme): enable users to switch between day and night modes

Close #807

assets/js/academic.js

@@ -267,7 +267,49 @@
   }
 
   /* ---------------------------------------------------------------------------
-   * On window load.
+  * Toggle day/night mode.
+  * --------------------------------------------------------------------------- */
+
+  function toggleDarkMode() {
+    if ($('body').hasClass('dark')) {
+      $('body').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 500);
+      $('body').removeClass('dark');
+      $('.js-dark-toggle i').removeClass('fa-sun');
+      $('.js-dark-toggle i').addClass('fa-moon');
+      localStorage.setItem('dark_mode', '0');
+    } else {
+      $('body').css({opacity: 0, visibility: 'visible'}).animate({opacity: 1}, 500);
+      $('body').addClass('dark');
+      $('.js-dark-toggle i').removeClass('fa-moon');
+      $('.js-dark-toggle i').addClass('fa-sun');
+      localStorage.setItem('dark_mode', '1');
+    }
+  }
+
+  /* ---------------------------------------------------------------------------
+   * On document ready.
+   * --------------------------------------------------------------------------- */
+
+  $(document).ready(function() {
+    // Set dark mode if user chose it.
+    let default_mode = 0;
+    if ($('body').hasClass('dark')) {
+      default_mode = 1;
+    }
+    let dark_mode = parseInt(localStorage.getItem('dark_mode') || default_mode);
+    if (dark_mode) {
+      $('body').addClass('dark');
+      $('.js-dark-toggle i').removeClass('fa-moon');
+      $('.js-dark-toggle i').addClass('fa-sun');
+    } else {
+      $('body').removeClass('dark');
+      $('.js-dark-toggle i').removeClass('fa-sun');
+      $('.js-dark-toggle i').addClass('fa-moon');
+    }
+  });
+
+  /* ---------------------------------------------------------------------------
+   * On window loaded.
    * --------------------------------------------------------------------------- */
 
   $(window).on('load', function() {
@@ -398,6 +440,12 @@
       }
     });
 
+    // Toggle day/night mode.
+    $('.js-dark-toggle').click(function(e) {
+      e.preventDefault();
+      toggleDarkMode();
+    });
+
   });
 
 })(jQuery);

data/themes/dark.toml

@@ -17,4 +17,4 @@ menu_title = "#fff"
 
 # Home sections
 home_section_odd = "hsla(231, 15%, 18%, 1)"
-home_section_even = "hsla(231, 15%, 17%, 1)"
+home_section_even = "hsla(231, 15%, 16%, 1)"

exampleSite/config.toml

@@ -100,6 +100,8 @@ enableGitInfo = false
   # Color theme.
   #   Choose from `default`, `ocean`, `forest`, `dark`, `apogee`, `1950s`, `coffee`, `cupcake`.
   color_theme = "default"
+  # Enable users to switch between day and night mode?
+  day_night = true
 
   # Font style.
   #   Choose from `default`, `classic`, or `playfair`.

layouts/partials/css/academic.css

@@ -26,13 +26,13 @@ body {
   line-height: inherit;
   color: inherit;
   background-color: {{ .Get "background" }};
-  margin-top: 71px; /* Offset body content by navbar height. */
+  margin-top: 70px; /* Offset body content by navbar height. */
   padding-top: 0;
   counter-reset: captions;
 }
 @media screen and (max-width: 1200px) { /* Match max-width of .nav-bar query. */
   body {
-    margin-top: 51px; /* Offset body content by navbar height. */
+    margin-top: 50px; /* Offset body content by navbar height. */
   }
 }
 
@@ -486,6 +486,14 @@ a[data-fancybox] img {
   background-color: {{ .Get "home_section_even" }};
 }
 
+.dark .home-section {
+  background-color: {{ .Get "dark_home_section_odd" }};
+}
+
+.dark .home-section:nth-of-type(even) {
+  background-color: {{ .Get "dark_home_section_even" }};
+}
+
 @media screen and (max-width: 768px) {
   .home-section {
     padding: 60px 0 60px 0;
@@ -1861,9 +1869,9 @@ div.alert a {
     .docs-sidebar {
       position: -webkit-sticky;
       position: sticky;
-      top: 51px;
+      top: 50px;
       z-index: 10;
-      height: calc(100vh - 51px)
+      height: calc(100vh - 50px)
     }
   }
 }
@@ -1876,9 +1884,9 @@ div.alert a {
     .docs-sidebar {
       position: -webkit-sticky;
       position: sticky;
-      top: 71px;
+      top: 70px;
       z-index: 10;
-      height: calc(100vh - 71px)
+      height: calc(100vh - 70px)
     }
   }
 }
@@ -1931,7 +1939,7 @@ div.alert a {
 @media (min-width:768px) {
   @supports ((position:-webkit-sticky) or (position:sticky)) {
     .docs-links {
-      max-height: calc(100vh - 5rem - 71px);
+      max-height: calc(100vh - 5rem - 70px);
       overflow-y: auto;
     }
   }
@@ -1956,8 +1964,8 @@ div.alert a {
   .docs-toc {
     position: -webkit-sticky;
     position: sticky;
-    top: 71px;
-    height: calc(100vh - 71px);
+    top: 70px;
+    height: calc(100vh - 70px);
     overflow-y: auto
   }
 }
@@ -2063,7 +2071,7 @@ body.dark,
 .dark .form-control,
 .dark .form-control:focus {
   color: rgb(248, 248, 242);
-  background: rgb(40, 42, 54);
+  background: {{ .Get "dark_background" }};
 }
 
 .dark .form-control {

layouts/partials/css/parse_theme.css

@@ -21,12 +21,32 @@
 
   {{- $scr.Set "light" $theme.light -}}
 
-  {{ if $theme.background }}
+  {{ if and $theme.background $theme.light }}
     {{- $scr.Set "background" $theme.background -}}
-  {{ else if $theme.light }}
-    {{- $scr.Set "background" "#fff" -}}
   {{ else }}
-    {{- $scr.Set "background" "rgb(40, 42, 54)" -}}
+    {{- $scr.Set "background" "#fff" -}}
+  {{ end }}
+
+  {{ if and $theme.background (not $theme.light) }}
+    {{- $scr.Set "dark_background" $theme.background -}}
+  {{ else }}
+    {{- $scr.Set "dark_background" "rgb(40, 42, 54)" -}}
+  {{ end }}
+
+  {{ if $theme.light }}
+    {{- $scr.Set "home_section_odd" $theme.home_section_odd -}}
+    {{- $scr.Set "home_section_even" $theme.home_section_even -}}
+  {{ else }}
+    {{- $scr.Set "home_section_odd" "rgb(255, 255, 255)" -}}
+    {{- $scr.Set "home_section_even" "rgb(247, 247, 247)" -}}
+  {{ end }}
+
+  {{ if not $theme.light }}
+    {{- $scr.Set "dark_home_section_odd" $theme.home_section_odd -}}
+    {{- $scr.Set "dark_home_section_even" $theme.home_section_even -}}
+  {{ else }}
+    {{- $scr.Set "dark_home_section_odd" "hsla(231, 15%, 18%, 1)" -}}
+    {{- $scr.Set "dark_home_section_even" "hsla(231, 15%, 16%, 1)" -}}
   {{ end }}
 
   {{ if $theme.link }}
@@ -50,6 +70,4 @@
   {{- $scr.Set "menu_text_active" $theme.menu_text_active -}}
   {{- $scr.Set "menu_title" $theme.menu_title -}}
 
-  {{- $scr.Set "home_section_odd" $theme.home_section_odd -}}
-  {{- $scr.Set "home_section_even" $theme.home_section_even -}}
 {{ end }}

layouts/partials/navbar.html

@@ -114,6 +114,13 @@
           </ul>
         </li>
         {{ end }}
+
+        {{ if .Site.Params.day_night }}
+        <li class="nav-item">
+          <a class="nav-link js-dark-toggle" href="#"><i class="fas fa-moon" aria-hidden="true"></i></a>
+        </li>
+        {{ end }}
+
       </ul>
 
     </div><!-- /.navbar-collapse -->