38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
|
// Set theme on page load
|
||
|
|
// This is done outside the Angular app to avoid a flash of unthemed content before it loads
|
||
|
|
const setTheme = () => {
|
||
|
|
const getLegacyTheme = (): string | null => {
|
||
|
|
// MANUAL-STATE-ACCESS: Calling global to get setting before migration
|
||
|
|
// has had a chance to run, can be remove in the future.
|
||
|
|
// Tracking Issue: https://bitwarden.atlassian.net/browse/PM-6676
|
||
|
|
const globalState = window.localStorage.getItem("global");
|
||
|
|
|
||
|
|
const parsedGlobalState = JSON.parse(globalState) as { theme?: string } | null;
|
||
|
|
return parsedGlobalState ? parsedGlobalState.theme : null;
|
||
|
|
};
|
||
|
|
|
||
|
|
const defaultTheme = "light";
|
||
|
|
const htmlEl = document.documentElement;
|
||
|
|
let theme = defaultTheme;
|
||
|
|
|
||
|
|
// First try the new state providers location, then the legacy location
|
||
|
|
const themeFromState =
|
||
|
|
window.localStorage.getItem("global_theming_selection") ?? getLegacyTheme();
|
||
|
|
|
||
|
|
if (themeFromState) {
|
||
|
|
if (themeFromState.indexOf("system") > -1) {
|
||
|
|
theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
|
||
|
|
} else if (themeFromState.indexOf("dark") > -1) {
|
||
|
|
theme = "dark";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!htmlEl.classList.contains("theme_" + theme)) {
|
||
|
|
// The defaultTheme is also set in the html itself to make sure that some theming is always applied
|
||
|
|
htmlEl.classList.remove("theme_" + defaultTheme);
|
||
|
|
htmlEl.classList.add("theme_" + theme);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
setTheme();
|