Merge pull request #2900 from SijieFu/theme-switch

rjzupkoii · web-flow · commit 89773fc400ad · 2025-03-16T11:56:28.000-04:00
Allow dark/light theme switch on user browser
diff --git a/_includes/masthead.html b/_includes/masthead.html
@@ -6,15 +6,18 @@
       <nav id="site-nav" class="greedy-nav">
         <button><div class="navicon"></div></button>
         <ul class="visible-links">
-          <li class="masthead__menu-item masthead__menu-item--lg"><a href="{{ base_path }}/">{{ site.title }}</a></li>
+          <li class="masthead__menu-item masthead__menu-item--lg persist"><a href="{{ base_path }}/">{{ site.title }}</a></li>
           {% for link in site.data.navigation.main %}
             {% if link.url contains 'http' %}
               {% assign domain = '' %}
-              {% else %}
+            {% else %}
               {% assign domain = base_path %}
             {% endif %}
             <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
           {% endfor %}
+          <li id="theme-toggle" class="masthead__menu-item persist tail">
+            <a><i id="theme-icon" class="fa-solid fa-sun" aria-hidden="true" title="toggle theme"></i></a>
+          </li>
         </ul>
         <ul class="hidden-links hidden"></ul>
       </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -5,7 +5,7 @@
 {% include base_path %}
 
 <!doctype html>
-<html lang="{{ site.locale | slice: 0,2 }}" class="no-js">
+<html lang="{{ site.locale | slice: 0,2 }}" class="no-js"{% if site.site_theme == "dark" %} data-theme="dark"{% endif %}>
   <head>
     {% include head.html %}
     {% include head/custom.html %}
diff --git a/_sass/layout/_masthead.scss b/_sass/layout/_masthead.scss
@@ -5,8 +5,7 @@
 .masthead {
   position: fixed;
   background: var(--global-bg-color);
-  border-bottom: 1px solid var(--global-border-color);
-  height: $masthead-height;
+  height: fit-content;
   top: 0;
   width: 100%;
 
@@ -16,10 +15,19 @@
           animation-delay: 0.15s;
   z-index: 20;
 
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    height: 1px;
+    background: var(--global-border-color);
+    width: 100%;
+  }
+
   &__inner-wrap {
     @include container;
     @include clearfix;
-    padding: 1em 1em 1em;
+    padding: 0.5em 1em;
     font-family: $sans-serif-narrow;
 
     @include breakpoint($x-large) {
diff --git a/_sass/layout/_navigation.scss b/_sass/layout/_navigation.scss
@@ -225,6 +225,15 @@
       }
     }
 
+    #theme-toggle {
+      a {
+        width: 25px;
+        display: flex;
+        justify-content: center;
+        cursor: pointer;
+      }
+    }
+
     a {
       position: relative;
 
diff --git a/_sass/layout/_sidebar.scss b/_sass/layout/_sidebar.scss
@@ -12,9 +12,9 @@
 
   @include clearfix();
   margin-bottom: 1em;
-   
+
   @media (orientation: portrait) {
-    margin-top: 5em;
+    margin-top: 1em;
   }
 
   @media screen and (min-width: $sidebar-screen-min-width) {
diff --git a/_sass/theme/_dark.scss b/_sass/theme/_dark.scss
@@ -34,7 +34,7 @@ $sidebar-link-max-width     : 250px;
 $sidebar-screen-min-width   : 1024px;
 
 /* Dark theme for the site */
-:root {
+html[data-theme="dark"] {
     --global-base-color                 : #{$background};
     --global-bg-color                   : #{$background};
     --global-border-color               : #{$background-light};
@@ -43,9 +43,9 @@ $sidebar-screen-min-width   : 1024px;
     --global-fig-caption-color          : #{$dark-gray};
     --global-link-color                 : #{$link};
     --global-link-color-hover           : #{$link-dark};
-    --global-link-color-visited         : #{$link-light};    
+    --global-link-color-visited         : #{$link-light};
     --global-masthead-link-color        : #{$text};
-    --global-masthead-link-color-hover  : #{$background-light};    
+    --global-masthead-link-color-hover  : #{$background-light};
     --global-text-color                 : #{$text};
     --global-text-color-light           : #{$light-gray};
     --global-thead-color                : #{$background-lighter};
diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -8,11 +8,12 @@
    sorted by the dependencies. Also, the first two lines of the file are required by Jekyll.
  */
 
-@import 
+@import
     "vendor/breakpoint/breakpoint",
 
     "themes",
-    "theme/{{ site.site_theme | default: 'default' }}",
+    "theme/default",
+    "theme/dark",
 
     "include/mixins",
     "vendor/susy/susy",
@@ -34,7 +35,7 @@
     "layout/page",
     "layout/archive",
     "layout/sidebar",
-    
+
     "vendor/font-awesome/fontawesome",
     "vendor/font-awesome/solid",
     "vendor/font-awesome/brands",
diff --git a/assets/js/_main.js b/assets/js/_main.js
@@ -2,46 +2,70 @@
    jQuery plugin settings and other scripts
    ========================================================================== */
 
-$(document).ready(function(){
+$(document).ready(function () {
+  // Set the theme on page load
+  var setTheme = function (theme) {
+    const use_theme = theme || localStorage.getItem("theme") || $("html").attr("data-theme");
+    if (use_theme === "dark") {
+      $("html").attr("data-theme", "dark");
+      $("#theme-icon").removeClass("fa-sun").addClass("fa-moon");
+    } else if (use_theme === "light") {
+      $("html").removeAttr("data-theme");
+      $("#theme-icon").removeClass("fa-moon").addClass("fa-sun");
+    }
+  }
+  setTheme();
+
+  // Toggle the theme
+  var toggleTheme = function () {
+    const current_theme = $("html").attr("data-theme");
+    const new_theme = current_theme === "dark" ? "light" : "dark";
+    localStorage.setItem("theme", new_theme);
+    setTheme(new_theme);
+  }
+  $('#theme-toggle').on('click', function () {
+    toggleTheme();
+  });
+
   // These should be the same as the settings in _variables.scss
-  scssLarge = 925; // pixels
+  const scssLarge = 925; // pixels
 
   // Sticky footer
-  var bumpIt = function() {
-      $("body").css("margin-bottom", $(".page__footer").outerHeight(true));
-    },
+  var bumpIt = function () {
+    $("body").css("margin-bottom", $(".page__footer").outerHeight(true));
+  },
     didResize = false;
 
   bumpIt();
 
-  $(window).resize(function() {
+  $(window).resize(function () {
     didResize = true;
   });
-  setInterval(function() {
+  setInterval(function () {
     if (didResize) {
       didResize = false;
       bumpIt();
     }
   }, 250);
-  
+
   // FitVids init
   fitvids();
 
   // Follow menu drop down
-  $(".author__urls-wrapper button").on("click", function() {
-    $(".author__urls").fadeToggle("fast", function() {});
+  $(".author__urls-wrapper button").on("click", function () {
+    $(".author__urls").fadeToggle("fast", function () { });
     $(".author__urls-wrapper button").toggleClass("open");
   });
 
   // Restore the follow menu if toggled on a window resize
-  jQuery(window).on('resize', function() {
+  jQuery(window).on('resize', function () {
     if ($('.author__urls.social-icons').css('display') == 'none' && $(window).width() >= scssLarge) {
       $(".author__urls").css('display', 'block')
     }
-  });    
+  });
 
   // init smooth scroll, this needs to be slightly more than then fixed masthead height
-  $("a").smoothScroll({offset: -65});
+  $("a").smoothScroll({ offset: -65 });
 
   // add lightbox class to all image links
   $("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif']").addClass("image-popup");
@@ -53,7 +77,7 @@ $(document).ready(function(){
     gallery: {
       enabled: true,
       navigateByImgClick: true,
-      preload: [0,1] // Will preload 0 - before current, and 1 after the current image
+      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
     },
     image: {
       tError: '<a href="%url%">Image #%curr%</a> could not be loaded.',
@@ -63,7 +87,7 @@ $(document).ready(function(){
     // make it unique to apply your CSS animations just to this exact popup
     mainClass: 'mfp-zoom-in',
     callbacks: {
-      beforeOpen: function() {
+      beforeOpen: function () {
         // just a hack that adds mfp-anim class to markup
         this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
       }
diff --git a/assets/js/main.min.js b/assets/js/main.min.js
diff --git a/assets/js/plugins/jquery.greedy-navigation.js b/assets/js/plugins/jquery.greedy-navigation.js
@@ -8,6 +8,7 @@
 var $nav = $('#site-nav');
 var $btn = $('#site-nav button');
 var $vlinks = $('#site-nav .visible-links');
+var $vlinks_persist_tail = $vlinks.children("*.persist.tail");
 var $hlinks = $('#site-nav .hidden-links');
 
 var breaks = [];
@@ -17,36 +18,37 @@ function updateNav() {
   var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
 
   // The visible list is overflowing the nav
-  if($vlinks.width() > availableSpace) {
-
-    while ($vlinks.width() > availableSpace && $vlinks.children('*:not(.masthead__menu-item--lg)').length > 0) {
+  if ($vlinks.width() > availableSpace) {
 
+    while ($vlinks.width() > availableSpace && $vlinks.children("*:not(.persist)").length > 0) {
       // Record the width of the list
       breaks.push($vlinks.width());
 
       // Move item to the hidden list
-      $vlinks.children('*:not(.masthead__menu-item--lg)').last().prependTo($hlinks);
+      $vlinks.children("*:not(.persist)").last().prependTo($hlinks);
+
+      availableSpace = $btn.hasClass("hidden") ? $nav.width() : $nav.width() - $btn.width() - 30;
 
-      availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30;
-      
       // Show the dropdown btn
-      if($btn.hasClass('hidden')) {
-        $btn.removeClass('hidden');
-      }
+      $btn.removeClass("hidden");
     }
 
     // The visible list is not overflowing
   } else {
 
     // There is space for another item in the nav
-    while(breaks.length > 0 && availableSpace > breaks[breaks.length-1]) {
+    while (breaks.length > 0 && availableSpace > breaks[breaks.length - 1]) {
       // Move the item to the visible list
-      $hlinks.children().first().appendTo($vlinks);
+      if ($vlinks_persist_tail.children().length > 0) {
+        $hlinks.children().first().insertBefore($vlinks_persist_tail);
+      } else {
+        $hlinks.children().first().appendTo($vlinks);
+      }
       breaks.pop();
     }
 
     // Hide the dropdown btn if hidden list is empty
-    if(breaks.length < 1) {
+    if (breaks.length < 1) {
       $btn.addClass('hidden');
       $btn.removeClass('close');
       $hlinks.addClass('hidden');
@@ -56,18 +58,27 @@ function updateNav() {
   // Keep counter updated
   $btn.attr("count", breaks.length);
 
+  // update masthead height and the body/sidebar top padding
+  var mastheadHeight = $('.masthead').height();
+  $('body').css('padding-top', mastheadHeight + 'px');
+  if ($(".author__urls-wrapper button").is(":visible")) {
+    $(".sidebar").css("padding-top", "");
+  } else {
+    $(".sidebar").css("padding-top", mastheadHeight + "px");
+  }
+
 }
 
 // Window listeners
 
-$(window).on('resize', function() {
+$(window).on('resize', function () {
   updateNav();
 });
-screen.orientation.addEventListener("change", function(){
+screen.orientation.addEventListener("change", function () {
   updateNav();
 });
 
-$btn.on('click', function() {
+$btn.on('click', function () {
   $hlinks.toggleClass('hidden');
   $(this).toggleClass('close');
 });

Original file line number	Diff line number	Diff line change
`@@ -225,6 +225,15 @@`
`225`	`225`	`}`
`226`	`226`	`}`
`227`	`227`
	`228`	`+ #theme-toggle {`
	`229`	`+ a {`
	`230`	`+ width: 25px;`
	`231`	`+ display: flex;`
	`232`	`+ justify-content: center;`
	`233`	`+ cursor: pointer;`
	`234`	`+ }`
	`235`	`+ }`
	`236`	`+`
`228`	`237`	`a {`
`229`	`238`	`position: relative;`
`230`	`239`