bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-12 06:13:38 +00:00
Code Issues Releases Wiki Activity

[PM-23374] Default to system theme in web app (#15755)

Browse Source
This commit is contained in:
Vicki League
2025-07-25 15:33:14 -04:00
committed by GitHub
parent 3062107d98
commit ae79080055
2 changed files with 17 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/web/src/app/core/core.module.ts
View File

@@ -77,7 +77,6 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
import { SdkClientFactory } from "@bitwarden/common/platform/abstractions/sdk/sdk-client-factory"; import { SdkClientFactory } from "@bitwarden/common/platform/abstractions/sdk/sdk-client-factory";
import { SdkLoadService } from "@bitwarden/common/platform/abstractions/sdk/sdk-load.service"; import { SdkLoadService } from "@bitwarden/common/platform/abstractions/sdk/sdk-load.service";
import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service"; import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
import { ThemeTypes } from "@bitwarden/common/platform/enums";
import { IpcService } from "@bitwarden/common/platform/ipc"; import { IpcService } from "@bitwarden/common/platform/ipc";
// eslint-disable-next-line no-restricted-imports -- Needed for DI // eslint-disable-next-line no-restricted-imports -- Needed for DI
import { import {
@@ -238,9 +237,7 @@ const safeProviders: SafeProvider[] = [
}), }),
safeProvider({ safeProvider({
provide: ThemeStateService, provide: ThemeStateService,
useFactory: (globalStateProvider: GlobalStateProvider) => useClass: DefaultThemeStateService,
// Web chooses to have Light as the default theme
new DefaultThemeStateService(globalStateProvider, ThemeTypes.Light),
deps: [GlobalStateProvider], deps: [GlobalStateProvider],
}), }),
safeProvider({ safeProvider({

34
apps/web/src/theme.ts
View File

@@ -1,25 +1,22 @@
// FIXME: Update this file to be type safe and remove this and next line /**
// @ts-strict-ignore * Set theme on page load based on (in order of priority):
// Set theme on page load * 1. the user's preferred theme from the theme state provider
// This is done outside the Angular app to avoid a flash of unthemed content before it loads * 2. the user's system theme
* 3. default to light theme (theoretically should never happen, but we need some kind of default)
*
* This is done outside the Angular app to avoid a flash of unthemed content before it loads.
*/
const setTheme = () => { const setTheme = () => {
const getLegacyTheme = (): string | null => { /**
// MANUAL-STATE-ACCESS: Calling global to get setting before migration * If we cannot find a system preference or any other indication of what theme to apply,
// has had a chance to run, can be remove in the future. * then we will default to light. `theme_light` is hardcoded as the default in the web app's
// Tracking Issue: https://bitwarden.atlassian.net/browse/PM-6676 * index.html file.
const globalState = window.localStorage.getItem("global"); */
const parsedGlobalState = JSON.parse(globalState) as { theme?: string } | null;
return parsedGlobalState ? parsedGlobalState.theme : null;
};
const defaultTheme = "light"; const defaultTheme = "light";
const htmlEl = document.documentElement; const htmlEl = document.documentElement;
let theme = defaultTheme; let theme = defaultTheme;
// First try the new state providers location, then the legacy location const themeFromState = window.localStorage.getItem("global_theming_selection");
const themeFromState =
window.localStorage.getItem("global_theming_selection") ?? getLegacyTheme();
if (themeFromState) { if (themeFromState) {
if (themeFromState.indexOf("system") > -1) { if (themeFromState.indexOf("system") > -1) {
@@ -27,10 +24,11 @@ const setTheme = () => {
} else if (themeFromState.indexOf("dark") > -1) { } else if (themeFromState.indexOf("dark") > -1) {
theme = "dark"; theme = "dark";
} }
} else {
theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
} }
if (!htmlEl.classList.contains("theme_" + theme)) { 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.remove("theme_" + defaultTheme);
htmlEl.classList.add("theme_" + theme); htmlEl.classList.add("theme_" + theme);
} }