Musselman/notatio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Take intial mode from prefers-color-scheme

Browse source
This commit is contained in:
James Musselman 2023-11-30 01:37:27 -06:00
parent 2588ef9729
commit 11b374743c
1 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
static/build/darkmode.js
View file

@ -1,11 +1,22 @@
let darkModeEnabled = false; // Default to false
// Check if user preference for dark mode is stored in a cookie // Check if user preference for dark mode is stored in a cookie
let darkModeEnabled = (document.cookie.indexOf('darkModeEnabled=true') !== -1); const cookieValue = document.cookie;
if (cookieValue.indexOf('darkModeEnabled=true') !== -1) {
darkModeEnabled = true;
} else {
// Check if user preference for dark mode is set at the system level
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDarkMode) {
darkModeEnabled = true;
}
}
// Apply dark mode based on the user's preference // Apply dark mode based on the user's preference
function applyDarkMode() { function applyDarkMode() {
const theme = darkModeEnabled ? "dark" : "light"; const theme = darkModeEnabled ? "dark" : "light";
document.documentElement.setAttribute("data-bs-theme", theme); document.documentElement.setAttribute("data-bs-theme", theme);
// Change the icon based on the theme // Change the icon based on the theme
const icon = darkModeEnabled ? "fa-sun" : "fa-moon"; const icon = darkModeEnabled ? "fa-sun" : "fa-moon";
const iconElement = document.getElementById("darkModeIcon"); const iconElement = document.getElementById("darkModeIcon");