bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-06 00:13:28 +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 { SdkLoadService } from "@bitwarden/common/platform/abstractions/sdk/sdk-load.service";
import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
import { ThemeTypes } from "@bitwarden/common/platform/enums";
import { IpcService } from "@bitwarden/common/platform/ipc";
// eslint-disable-next-line no-restricted-imports -- Needed for DI
import {
@@ -238,9 +237,7 @@ const safeProviders: SafeProvider[] = [
}),
safeProvider({
provide: ThemeStateService,
useFactory: (globalStateProvider: GlobalStateProvider) =>
// Web chooses to have Light as the default theme
new DefaultThemeStateService(globalStateProvider, ThemeTypes.Light),
useClass: DefaultThemeStateService,
deps: [GlobalStateProvider],
}),
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
// This is done outside the Angular app to avoid a flash of unthemed content before it loads
/**
* Set theme on page load based on (in order of priority):
* 1. the user's preferred theme from the theme state provider
* 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 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;
};
/**
* If we cannot find a system preference or any other indication of what theme to apply,
* then we will default to light. `theme_light` is hardcoded as the default in the web app's
* index.html file.
*/
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();
const themeFromState = window.localStorage.getItem("global_theming_selection");
if (themeFromState) {
if (themeFromState.indexOf("system") > -1) {
@@ -27,10 +24,11 @@ const setTheme = () => {
} else if (themeFromState.indexOf("dark") > -1) {
theme = "dark";
}
} else {
theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
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);
}