mirror of
https://github.com/zadam/trilium.git
synced 2025-11-05 05:59:00 +01:00
refactor(share): reduce duplication in theme management
This commit is contained in:
parent
b58e1f146c
commit
1c832182d6
@ -1,11 +1,5 @@
|
||||
const themeToLoad = getThemeToLoad();
|
||||
if (themeToLoad === "dark") {
|
||||
document.body.classList.add("theme-dark");
|
||||
document.body.classList.remove("theme-light");
|
||||
} else {
|
||||
document.body.classList.remove("theme-dark");
|
||||
document.body.classList.add("theme-light");
|
||||
}
|
||||
setTheme(themeToLoad);
|
||||
|
||||
export default function setupThemeSelector() {
|
||||
const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
|
||||
@ -16,25 +10,31 @@ export default function setupThemeSelector() {
|
||||
setTimeout(() => themeSelection.classList.remove("no-transition"), 400);
|
||||
|
||||
themeSwitch?.addEventListener("change", () => {
|
||||
if (themeSwitch.checked) {
|
||||
document.body.classList.add("theme-dark");
|
||||
document.body.classList.remove("theme-light");
|
||||
localStorage.setItem("theme", "dark");
|
||||
} else {
|
||||
document.body.classList.remove("theme-dark");
|
||||
document.body.classList.add("theme-light");
|
||||
localStorage.setItem("theme", "light");
|
||||
}
|
||||
const theme = themeSwitch.checked ? "dark" : "light";
|
||||
setTheme(theme);
|
||||
localStorage.setItem("theme", theme);
|
||||
});
|
||||
}
|
||||
|
||||
function setTheme(theme: string) {
|
||||
if (theme === "dark") {
|
||||
document.body.classList.add("theme-dark");
|
||||
document.body.classList.remove("theme-light");
|
||||
} else {
|
||||
document.body.classList.remove("theme-dark");
|
||||
document.body.classList.add("theme-light");
|
||||
}
|
||||
}
|
||||
|
||||
function getThemeToLoad() {
|
||||
const storedTheme = localStorage.getItem("theme");
|
||||
if (storedTheme) {
|
||||
// Respect user's choice if one has already been made.
|
||||
return storedTheme;
|
||||
} else if (window.matchMedia) {
|
||||
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
// Fallback to browser's color preference otherwise.
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
return "dark";
|
||||
} else {
|
||||
return "light";
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user