Working dark theme switcher
This commit is contained in:
Qubasa
@@ -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']
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user