diff --git a/docs/main.py b/docs/main.py
index 2fa40edb..71f58fa7 100644
--- a/docs/main.py
+++ b/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"""
"""
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
index 302a31ed..371ce212 100644
--- a/docs/mkdocs.yml
+++ b/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
diff --git a/docs/nix/scripts/renderOptions.py b/docs/nix/scripts/renderOptions.py
index d434fdff..1c28300f 100644
--- a/docs/nix/scripts/renderOptions.py
+++ b/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.")}
diff --git a/docs/site/static/main.js b/docs/site/static/main.js
index 1d5dc0dc..a8e66e42 100644
--- a/docs/site/static/main.js
+++ b/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();
-
\ No newline at end of file
+
+ // 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']
+ });
+});