Merge pull request #2990 from Samir-Rashid/more-theme-fixes

More theme fixes

Author: rjzupkoii

_sass/theme/_dark.scss

@@ -42,7 +42,7 @@ html[data-theme="dark"] {
     --global-dark-border-color          : #{$background-light};
     --global-code-background-color      : #fafafa;
     --global-code-text-color            : #{$darker-gray};
-    --global-fig-caption-color          : #{$dark-gray};
+    --global-fig-caption-color          : #{$light-gray};
     --global-link-color                 : #{$link};
     --global-link-color-hover           : #{$link-dark};
     --global-link-color-visited         : #{$link-light};

assets/js/_main.js

@@ -3,29 +3,48 @@
    ========================================================================== */
 
 $(document).ready(function () {
-  // Set the theme on page load
+  // detect OS/browser preference
+  const browserPref = window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
+
+  // Set the theme on page load or when explicitly called
   var setTheme = function (theme) {
-    const use_theme = theme || localStorage.getItem("theme") || $("html").attr("data-theme");
+    const use_theme =
+      theme ||
+      localStorage.getItem("theme") ||
+      $("html").attr("data-theme") ||
+      browserPref;
+
     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
+  // if user hasn't chosen a theme, follow OS changes
+  window
+    .matchMedia('(prefers-color-scheme: dark)')
+    .addEventListener("change", (e) => {
+      if (!localStorage.getItem("theme")) {
+        setTheme(e.matches ? "dark" : "light");
+      }
+    });
+
+  // Toggle the theme manually
   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();
-  });
+  };
+
+  $('#theme-toggle').on('click', toggleTheme);
 
   // These should be the same as the settings in _variables.scss
   const scssLarge = 925; // pixels
@@ -65,10 +84,35 @@ $(document).ready(function () {
   });
 
   // init smooth scroll, this needs to be slightly more than then fixed masthead height
-  $("a").smoothScroll({ offset: -65 });
+  $("a").smoothScroll({ 
+    offset: -75, // needs to match $masthead-height
+    preventDefault: false,
+  }); 
 
   // 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");
+  // Add "image-popup" to links ending in image extensions,
+  // but skip any <a> that already contains an <img>
+  $("a[href$='.jpg'],\
+  a[href$='.jpeg'],\
+  a[href$='.JPG'],\
+  a[href$='.png'],\
+  a[href$='.gif'],\
+  a[href$='.webp']")
+      .not(':has(img)')
+      .addClass("image-popup");
+
+  // 1) Wrap every <p><img> (except emoji images) in an <a> pointing at the image, and give it the lightbox class
+  $('p > img').not('.emoji').each(function() {
+    var $img = $(this);
+    // skip if it’s already wrapped in an <a.image-popup>
+    if ( ! $img.parent().is('a.image-popup') ) {
+      $('<a>')
+        .addClass('image-popup')
+        .attr('href', $img.attr('src'))
+        .insertBefore($img)   // place the <a> right before the <img>
+        .append($img);        // move the <img> into the <a>
+    }
+  });
 
   // Magnific-Popup options
   $(".image-popup").magnificPopup({