73 lines
2.3 KiB
JavaScript
73 lines
2.3 KiB
JavaScript
|
|
|
|
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 {
|
|
document.body.setAttribute('data-md-color-scheme', 'default');
|
|
document.body.setAttribute('data-md-color-media', '(prefers-color-scheme: light)')
|
|
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 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");
|
|
}
|
|
}
|
|
|
|
// 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
|
|
}
|
|
|
|
// 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']
|
|
});
|
|
});
|