forked from clan/clan-core
Working dark theme switcher
This commit is contained in:
parent
8762ee4420
commit
f6efd11eae
@ -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>"""
|
||||
|
@ -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
|
||||
|
@ -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.")}
|
||||
|
||||
|
@ -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']
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user