Working dark theme switcher

docs/main.py

@@ -2,7 +2,7 @@ from typing import Any
 
 
 def define_env(env: Any) -> None:
-    static_dir = "../static/"
+    static_dir = "/static/"
     video_dir = "https://clan.lol/" + "videos/"
     asciinema_dir = static_dir + "asciinema-player/"
 
@@ -15,8 +15,7 @@ def define_env(env: Any) -> None:
 
     @env.macro
     def asciinema(name: str) -> str:
-        return f"""<div id="{name}"><link rel="stylesheet" type="text/css" href="{asciinema_dir}/asciinema-player.css" />
-            <link rel="stylesheet" type="text/css" href="{asciinema_dir}/custom-theme.css" />
+        return f"""<div id="{name}">
             <script src="{asciinema_dir}/asciinema-player.min.js"></script>
             <script>
                 AsciinemaPlayer.create('{video_dir + name}',
@@ -27,4 +26,5 @@ def define_env(env: Any) -> None:
                     speed: 1.5,
                     theme: "alabaster-auto"
                 }});
-            </script></div>"""
+            </script>
+        </div>"""

docs/mkdocs.yml

@@ -120,8 +120,11 @@ theme:
         icon: material/weather-sunny
         name: Switch to light mode
 
-  extra_javascript:
-    - static/main.js
+extra_javascript:
+  - static/main.js
+extra_css:
+  - static/asciinema-player/custom-theme.css
+  - static/asciinema-player/asciinema-player.css
 
 plugins:
   - search

docs/nix/scripts/renderOptions.py

@@ -74,7 +74,7 @@ def render_option(name: str, option: dict[str, Any], level: int = 3) -> str:
     read_only = option.get("readOnly")
 
     res = f"""
-{"#" * level} {sanitize(name)} {{#{sanitize(name)}}}
+{"#" * level} {sanitize(name)}
 {"Readonly" if read_only else ""}
 {option.get("description", "No description available.")}
 

docs/site/static/main.js

@@ -1,116 +1,72 @@
 
 
-// Set darkmode
-document.getElementById('mode').addEventListener('click', () => {
-    let isDarkTheme = document.body.classList.contains('dark');
-    setColorTheme(!isDarkTheme ? "dark" : "light");
-  });
-  
-  
-  let preferDarkTheme = prefersDarkMode();
-  let theme = localStorage.getItem('theme');
-  if (theme !== null) {
-    setColorTheme(theme);
+let preferDarkTheme = prefersDarkMode();
+let theme = localStorage.getItem('theme');
+if (theme !== null) {
+  setColorTheme(theme);
+} else {
+  setColorTheme(preferDarkTheme ? "dark" : "light");
+}
+
+// Get the media query list object for the prefers-color-scheme media feature
+const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
+// Add an event listener for the change event
+colorSchemeQueryList.addEventListener("change", handleColorSchemeChange);
+
+
+function setColorTheme(theme) {
+  if (theme === "dark") {
+    document.body.setAttribute('data-md-color-scheme', 'slate');
+    document.body.setAttribute('data-md-color-media', '(prefers-color-scheme: dark)')
+    localStorage.setItem('theme', 'dark');
   } else {
-    setColorTheme(preferDarkTheme ? "dark" : "light");
+    document.body.setAttribute('data-md-color-scheme', 'default');
+    document.body.setAttribute('data-md-color-media', '(prefers-color-scheme: light)')
+    localStorage.setItem('theme', 'light');
   }
-  
-  // Get the media query list object for the prefers-color-scheme media feature
-  const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: dark)");
-  // Add an event listener for the change event
-  colorSchemeQueryList.addEventListener("change", handleColorSchemeChange);
-  
-  
-  function setColorTheme(theme) {
-    if (theme === "dark") {
-      document.body.classList.add('dark');
-      switchClanLogo("white");
-      localStorage.setItem('theme', 'dark');
-    } else {
-      document.body.classList.remove('dark');
-      switchClanLogo("dark");
-      localStorage.setItem('theme', 'light');
-    }
+}
+
+// A function that returns true if the user prefers dark mode, false otherwise
+function prefersDarkMode() {
+  // Check if the browser supports the prefers-color-scheme media query
+  if (window.matchMedia) {
+    // Get the current value of the media query
+    let colorScheme = window.matchMedia("(prefers-color-scheme: dark)");
+    // Return true if the media query matches, false otherwise
+    return colorScheme.matches;
+  } else {
+    // If the browser does not support the media query, return false by default
+    return false;
   }
-  
-  // A function that returns true if the user prefers dark mode, false otherwise
-  function prefersDarkMode() {
-    // Check if the browser supports the prefers-color-scheme media query
-    if (window.matchMedia) {
-      // Get the current value of the media query
-      let colorScheme = window.matchMedia("(prefers-color-scheme: dark)");
-      // Return true if the media query matches, false otherwise
-      return colorScheme.matches;
-    } else {
-      // If the browser does not support the media query, return false by default
-      return false;
-    }
+}
+
+// A function that executes some logic based on the color scheme preference
+function handleColorSchemeChange(e) {
+  if (e.matches) {
+    // The user prefers dark mode
+    setColorTheme("dark");
+  } else {
+    // The user prefers light mode
+    setColorTheme("light");
   }
-  
-  function switchClanLogo(theme) {
-    let favs = document.getElementsByClassName("favicon");
-    for (item of favs) {
-      if (theme === "white")
-      {
-        item.href = item.href.replace("dark-favicon", "white-favicon")
-      } else {
-        item.href = item.href.replace("white-favicon", "dark-favicon")
-      }
-    }
-    let clogos = document.getElementsByClassName("clogo");
-    for (item of clogos) {
-      if (theme === "white")
-      {
-        item.src = item.src.replace("dark", "white")
-      } else {
-        item.src = item.src.replace("white", "dark")
-      }
-    }
+}
+
+// Detects if user pressed on the "change theme" button
+document.addEventListener('DOMContentLoaded', function () {
+  function handleThemeChange() {
+    const isDarkMode = document.body.getAttribute('data-md-color-media').includes('dark');
+    console.log(`Theme is now ${isDarkMode ? 'dark' : 'light'}`);
+
+    // Detect the current theme
   }
-  
-  
-  
-  // A function that executes some logic based on the color scheme preference
-  function handleColorSchemeChange(e) {
-    if (e.matches) {
-      // The user prefers dark mode
-      setColorTheme("dark");
-    } else {
-      // The user prefers light mode
-      setColorTheme("light");
-    }
-  }
-  
-  // Function to resize all video elements to match their parent article's width
-  function resizeVideosToMatchArticleWidth() {
-    // Function to adjust video sizes
-    function adjustVideoSizes() {
-      // Find all video elements
-      const videos = document.querySelectorAll('video');
-  
-      videos.forEach(video => {
-        // Find the closest parent article element
-        const article = video.closest('article');
-        if (!article) return; // Skip if no parent article found
-  
-        // Calculate new video height to maintain aspect ratio
-        const aspectRatio = video.videoHeight / video.videoWidth;
-        const newWidth = article.clientWidth; // Width of the parent article
-        const newHeight = newWidth * aspectRatio;
-  
-        // Set new width and height on the video
-        video.style.width = `${newWidth}px`;
-        video.style.height = `${newHeight}px`;
-      });
-    }
-  
-    // Adjust video sizes on load
-    document.addEventListener('DOMContentLoaded', adjustVideoSizes);
-  
-    // Adjust video sizes on window resize
-    window.onresize = adjustVideoSizes;
-  }
-  
-  // Call the function to initialize the resizing
-  resizeVideosToMatchArticleWidth();
-  
+
+  // Initial check
+  handleThemeChange();
+
+  // MutationObserver to detect changes to the `data-md-color-scheme` attribute
+  const observer = new MutationObserver(handleThemeChange);
+  observer.observe(document.body, {
+    attributes: true,
+    attributeFilter: ['data-md-color-media']
+  });
+});