mirror of
https://github.com/zadam/trilium.git
synced 2026-05-06 04:27:16 +02:00
fix(share): flash while theme is loading
This commit is contained in:
@@ -1,12 +1,11 @@
|
||||
const themeToLoad = getThemeToLoad();
|
||||
setTheme(themeToLoad);
|
||||
const themeRootEl = document.documentElement;
|
||||
|
||||
export default function setupThemeSelector() {
|
||||
const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
|
||||
|
||||
const themeSelection: HTMLDivElement = document.querySelector(".theme-selection")!;
|
||||
themeSelection.classList.add("no-transition");
|
||||
themeSwitch.checked = (themeToLoad === "dark");
|
||||
themeSwitch.checked = (themeRootEl.classList.contains("theme-dark"));
|
||||
setTimeout(() => themeSelection.classList.remove("no-transition"), 400);
|
||||
|
||||
themeSwitch?.addEventListener("change", () => {
|
||||
@@ -18,23 +17,10 @@ export default function setupThemeSelector() {
|
||||
|
||||
function setTheme(theme: string) {
|
||||
if (theme === "dark") {
|
||||
document.body.classList.add("theme-dark");
|
||||
document.body.classList.remove("theme-light");
|
||||
themeRootEl.classList.add("theme-dark");
|
||||
themeRootEl.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 && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
// Fallback to browser's color preference otherwise.
|
||||
return "dark";
|
||||
} else {
|
||||
return "light";
|
||||
themeRootEl.classList.remove("theme-dark");
|
||||
themeRootEl.classList.add("theme-light");
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user