Theme switcher (#246)

Il-Libro-Open-Source · Sep 19, 2024 · d10e1f1 · d10e1f1
1 parent 8b667f4
commit d10e1f1
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 5 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -11,6 +11,7 @@ GEM
     eventmachine (1.2.7)
     ffi (1.16.3)
     forwardable-extended (2.6.0)
+    google-protobuf (3.25.2-arm64-darwin)
     google-protobuf (3.25.2-x86_64-darwin)
     google-protobuf (3.25.2-x86_64-linux)
     http_parser.rb (0.8.0)
@@ -64,21 +65,21 @@ GEM
     rexml (3.2.6)
     rouge (4.2.0)
     safe_yaml (1.0.5)
-    sass-embedded (1.70.0-x86_64-darwin)
-      google-protobuf (~> 3.25)
-    sass-embedded (1.70.0-x86_64-linux-gnu)
-      google-protobuf (~> 3.25)
+    sass-embedded (1.63.6)
+      google-protobuf (~> 3.23)
+      rake (>= 13.0.0)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
     unicode-display_width (2.5.0)
     webrick (1.8.1)
 
 PLATFORMS
+  arm64-darwin-22
   x86_64-darwin-22
   x86_64-linux
 
 DEPENDENCIES
   just-the-docs
 
 BUNDLED WITH
-   2.3.26
+   2.4.19
diff --git a/_includes/header_custom.html b/_includes/header_custom.html
@@ -0,0 +1,84 @@
+<div id="theme-switcher">
+    <svg id="theme-switcher-moon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30"
+        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z" />
+    </svg>
+
+    <svg id="theme-switcher-sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30"
+        fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="5"></circle>
+        <line x1="12" y1="1" x2="12" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="23"></line>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+        <line x1="1" y1="12" x2="3" y2="12"></line>
+        <line x1="21" y1="12" x2="23" y2="12"></line>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+    </svg>
+</div>
+<style>
+    #theme-switcher {
+        align-self: center;
+    }
+
+    #theme-switcher.light #theme-switcher-sun {
+        display: none;
+    }
+
+    #theme-switcher.dark #theme-switcher-moon {
+        display: none;
+    }
+</style>
+<script>
+    const toggleDarkMode = document.querySelector('#theme-switcher');
+    const hasLocalStorage = typeof localStorage !== 'undefined';
+
+    function switchTo(theme) {
+        if (theme === 'dark') {
+            jtd.setTheme('dark');
+            toggleDarkMode.classList.add('dark');
+            toggleDarkMode.classList.remove('light');
+            if (hasLocalStorage) {
+                localStorage.setItem('prefers-color-scheme', 'dark');
+            }
+        } else if (theme === 'light') {
+            jtd.setTheme('light');
+            toggleDarkMode.classList.add('light');
+            toggleDarkMode.classList.remove('dark');
+            if (hasLocalStorage) {
+                localStorage.setItem('prefers-color-scheme', 'light');
+            }
+        }
+    }
+
+    var darkAsPrefersColorSchema = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    var lightAsPrefersColorSchema = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
+
+    var savedColorSchema = null;
+    if (hasLocalStorage) {
+        savedColorSchema = localStorage.getItem('prefers-color-scheme');
+    }
+
+    if (savedColorSchema) {
+        if (savedColorSchema === 'dark') {
+            switchTo('dark')
+        } else {
+            switchTo('light')
+        }
+    } else {
+        if (darkAsPrefersColorSchema) {
+            switchTo('dark')
+        } else {
+            switchTo('light')
+        }
+    }
+
+    jtd.addEvent(toggleDarkMode, 'click', function () {
+        if (jtd.getTheme() === 'dark') {
+            switchTo('light')
+        } else {
+            switchTo('dark')
+        }
+    });
+</script>