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

[PM-15892] [PM-12250]Remove nord and remnants from solarizedark (#13449)

Browse Source 
* Remove nord and remnants from solarizedark

* Update window reload color

* Remove extension-refresh feature flag from clients (#13450)

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

* Remove usage of nord and solarized themes within DarkImageDirective

---------

Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
This commit is contained in:
Oscar Hinton
2025-03-10 15:33:55 +01:00
committed by GitHub
parent ef72f513b1
commit a569dd9ad6
31 changed files with 50 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/browser/src/_locales/en/messages.json
View File

@@ -1166,10 +1166,6 @@
"message": "Light",
"description": "Light color"
},
"solarizedDark": {
"message": "Solarized dark",
"description": "'Solarized' is a noun and the name of a color scheme. It should not be translated."
},
"exportFrom": {
"message": "Export from"
},

2
apps/browser/src/autofill/content/components/constants/styles.ts
View File

@@ -124,8 +124,6 @@ export const themes = {
// For compatibility
system: lightTheme,
nord: lightTheme,
solarizedDark: darkTheme,
};
export const spacing = {

26
apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts
View File

@@ -277,32 +277,6 @@ describe("AutofillOverlayIframeService", () => {
borderColor: "#4c525f",
});
});
it("updates the border to match the `nord` theme", () => {
const message = {
command: "initAutofillOverlayList",
theme: ThemeType.Nord,
};
sendPortMessage(portSpy, message);
expect(updateElementStylesSpy).toBeCalledWith(autofillOverlayIframeService["iframe"], {
borderColor: "#2E3440",
});
});
it("updates the border to match the `solarizedDark` theme", () => {
const message = {
command: "initAutofillOverlayList",
theme: ThemeType.SolarizedDark,
};
sendPortMessage(portSpy, message);
expect(updateElementStylesSpy).toBeCalledWith(autofillOverlayIframeService["iframe"], {
borderColor: "#073642",
});
});
});
describe("updating the iframe's position", () => {

6
apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts
View File

@@ -221,12 +221,6 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf
if (verifiedTheme === ThemeTypes.Dark) {
borderColor = "#4c525f";
}
if (theme === ThemeTypes.Nord) {
borderColor = "#2E3440";
}
if (theme === ThemeTypes.SolarizedDark) {
borderColor = "#073642";
}
if (borderColor) {
this.updateElementStyles(this.iframe, { borderColor });
}

16
apps/browser/src/autofill/notification/bar.scss
View File

@@ -334,19 +334,3 @@ button {
}
}
}
.theme_solarizedDark {
.notification-bar-redesign #content .inner-wrapper {
#select-folder {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nbm9uZSc+PHBhdGggc3Ryb2tlPScjZWVlOGQ1JyBkPSdtNSA2IDMgMyAzLTMnLz48L3N2Zz4=");
}
}
}
.theme_nord {
.notification-bar-redesign #content .inner-wrapper {
#select-folder {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nbm9uZSc+PHBhdGggc3Ryb2tlPScjRTVFOUYwJyBkPSdtNSA2IDMgMyAzLTMnLz48L3N2Zz4=");
}
}
}

32
apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts
View File

@@ -302,38 +302,6 @@ describe("AutofillInlineMenuIframeService", () => {
},
);
});
it("updates the border to match the `nord` theme", () => {
const message = {
command: "initAutofillInlineMenuList",
theme: ThemeType.Nord,
};
sendPortMessage(portSpy, message);
expect(updateElementStylesSpy).toHaveBeenCalledWith(
autofillInlineMenuIframeService["iframe"],
{
borderColor: "#2E3440",
},
);
});
it("updates the border to match the `solarizedDark` theme", () => {
const message = {
command: "initAutofillInlineMenuList",
theme: ThemeType.SolarizedDark,
};
sendPortMessage(portSpy, message);
expect(updateElementStylesSpy).toHaveBeenCalledWith(
autofillInlineMenuIframeService["iframe"],
{
borderColor: "#073642",
},
);
});
});
describe("updating the iframe's position", () => {

6
apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
View File

@@ -250,12 +250,6 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
if (verifiedTheme === ThemeTypes.Dark) {
borderColor = "#4c525f";
}
if (theme === ThemeTypes.Nord) {
borderColor = "#2E3440";
}
if (theme === ThemeTypes.SolarizedDark) {
borderColor = "#073642";
}
if (borderColor) {
this.updateElementStyles(this.iframe, { borderColor });
}

47
apps/browser/src/autofill/shared/styles/variables.scss
View File

@@ -1,6 +1,4 @@
@import "~nord/src/sass/nord.scss";
$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
$dark-icon-themes: "theme_dark";
$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-source-code-pro: "Source Code Pro", monospace;
@@ -34,14 +32,6 @@ $border-color: #ced4dc;
$border-radius: 3px;
$focus-outline-color: #1252a3;
$solarizedDarkBase0: #839496;
$solarizedDarkBase03: #002b36;
$solarizedDarkBase02: #073642;
$solarizedDarkBase01: #586e75;
$solarizedDarkBase2: #eee8d5;
$solarizedDarkCyan: #2aa198;
$solarizedDarkGreen: #859900;
$themes: (
light: (
textColor: $text-color-light,
@@ -79,41 +69,6 @@ $themes: (
passwordSpecialColor: $password-special-color-dark,
passwordNumberColor: $password-number-color-dark,
),
nord: (
textColor: $nord5,
mutedTextColor: $nord4,
backgroundColor: $nord1,
backgroundOffsetColor: darken($nord1, 2.75%),
buttonPrimaryColor: $nord8,
primaryColor: $nord9,
textContrast: $nord2,
inputBorderColor: $nord0,
inputBackgroundColor: $nord2,
borderColor: $nord0,
focusOutlineColor: lighten($focus-outline-color, 25%),
successColor: $success-color-dark,
passkeysAuthenticating: $nord4,
passwordSpecialColor: $nord12,
passwordNumberColor: $nord8,
),
solarizedDark: (
textColor: $solarizedDarkBase2,
// Muted uses main text color to avoid contrast issues
mutedTextColor: $solarizedDarkBase2,
backgroundColor: $solarizedDarkBase03,
backgroundOffsetColor: darken($solarizedDarkBase03, 2.75%),
buttonPrimaryColor: $solarizedDarkCyan,
primaryColor: $solarizedDarkGreen,
textContrast: $solarizedDarkBase02,
inputBorderColor: rgba($solarizedDarkBase2, 0.2),
inputBackgroundColor: $solarizedDarkBase01,
borderColor: $solarizedDarkBase2,
focusOutlineColor: lighten($focus-outline-color, 15%),
successColor: $success-color-dark,
passkeysAuthenticating: $solarizedDarkBase2,
passwordSpecialColor: #b58900,
passwordNumberColor: $solarizedDarkCyan,
),
);
@mixin themify($themes: $themes) {

5
apps/browser/src/background/main.background.ts
View File

@@ -834,10 +834,7 @@ export default class MainBackground {
this.configService,
);
this.themeStateService = new DefaultThemeStateService(
this.globalStateProvider,
this.configService,
);
this.themeStateService = new DefaultThemeStateService(this.globalStateProvider);
this.bulkEncryptService = new FallbackBulkEncryptService(this.encryptService);

4
apps/browser/src/popup/scss/environment.scss
View File

@@ -40,8 +40,4 @@ html.browser_safari {
&.theme_light app-root {
border-color: #777777;
}
&.theme_nord app-root {
border-color: #2e3440;
}
}

147
apps/browser/src/popup/scss/variables.scss
View File

@@ -1,6 +1,4 @@
@import "~nord/src/sass/nord.scss";
$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
$dark-icon-themes: "theme_dark";
$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -47,24 +45,6 @@ $button-color-danger: darken($brand-danger, 10%);
$code-color: #c01176;
$code-color-dark: #f08dc7;
$code-color-nord: #dbb1d5;
$solarizedDarkBase03: #002b36;
$solarizedDarkBase02: #073642;
$solarizedDarkBase01: #586e75;
$solarizedDarkBase00: #657b83;
$solarizedDarkBase0: #839496;
$solarizedDarkBase1: #93a1a1;
$solarizedDarkBase2: #eee8d5;
$solarizedDarkBase3: #fdf6e3;
$solarizedDarkYellow: #b58900;
$solarizedDarkOrange: #cb4b16;
$solarizedDarkRed: #dc322f;
$solarizedDarkMagenta: #d33682;
$solarizedDarkViolet: #6c71c4;
$solarizedDarkBlue: #268bd2;
$solarizedDarkCyan: #2aa198;
$solarizedDarkGreen: #859900;
$themes: (
light: (
@@ -194,131 +174,6 @@ $themes: (
saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%),
codeColor: $code-color-dark,
),
nord: (
textColor: $nord5,
hoverColorTransparent: rgba($text-color, 0.15),
borderColor: $nord0,
backgroundColor: $nord1,
borderColorAlt: $nord5,
backgroundColorAlt: $nord2,
scrollbarColor: $nord4,
scrollbarHoverColor: $nord6,
boxBackgroundColor: $nord2,
boxBackgroundHoverColor: $nord3,
boxBorderColor: $nord1,
tabBackgroundColor: $nord1,
tabBackgroundHoverColor: $nord2,
headerColor: $nord5,
headerBackgroundColor: $nord1,
headerBackgroundHoverColor: $nord2,
headerBorderColor: $nord0,
headerInputBackgroundColor: $nord6,
headerInputBackgroundFocusColor: $nord5,
headerInputColor: $nord2,
headerInputPlaceholderColor: $nord3,
listItemBackgroundHoverColor: $nord3,
disabledIconColor: $nord4,
disabledBoxOpacity: 0.5,
headingColor: $nord4,
labelColor: $nord4,
mutedColor: $nord4,
totpStrokeColor: $nord4,
boxRowButtonColor: $nord4,
boxRowButtonHoverColor: $nord6,
inputBorderColor: $nord0,
inputBackgroundColor: $nord2,
inputPlaceholderColor: lighten($nord3, 20%),
buttonBackgroundColor: $nord3,
buttonBorderColor: $nord0,
buttonColor: $nord5,
buttonPrimaryColor: $nord8,
buttonDangerColor: $nord11,
primaryColor: $nord9,
primaryAccentColor: $nord8,
dangerColor: $nord11,
successColor: $nord14,
infoColor: $nord9,
warningColor: $nord12,
logoSuffix: "white",
mfaLogoSuffix: "-w.png",
passwordNumberColor: $nord8,
passwordSpecialColor: $nord12,
passwordCountText: $nord5,
calloutBorderColor: $nord0,
calloutBackgroundColor: $nord2,
toastTextColor: #000000,
svgSuffix: "-dark.svg",
transparentColor: rgba(0, 0, 0, 0),
dateInputColorScheme: dark,
webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(94%) sepia(5%) saturate(454%)
hue-rotate(185deg) brightness(93%) contrast(96%),
// has no hover so use same color
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(5%)
saturate(454%) hue-rotate(185deg) brightness(93%) contrast(96%),
codeColor: $code-color-nord,
),
solarizedDark: (
textColor: $solarizedDarkBase2,
hoverColorTransparent: rgba($text-color, 0.15),
borderColor: $solarizedDarkBase03,
backgroundColor: $solarizedDarkBase03,
borderColorAlt: $solarizedDarkBase01,
backgroundColorAlt: $solarizedDarkBase02,
scrollbarColor: $solarizedDarkBase0,
scrollbarHoverColor: $solarizedDarkBase2,
boxBackgroundColor: $solarizedDarkBase02,
boxBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
boxBorderColor: $solarizedDarkBase02,
tabBackgroundColor: $solarizedDarkBase02,
tabBackgroundHoverColor: $solarizedDarkBase01,
headerColor: $solarizedDarkBase1,
headerBackgroundColor: $solarizedDarkBase02,
headerBackgroundHoverColor: $solarizedDarkBase01,
headerBorderColor: $solarizedDarkBase03,
headerInputBackgroundColor: darken($solarizedDarkBase0, 5%),
headerInputBackgroundFocusColor: $solarizedDarkBase1,
headerInputColor: $solarizedDarkBase02,
headerInputPlaceholderColor: lighten($solarizedDarkBase02, 5%),
listItemBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
disabledIconColor: $solarizedDarkBase0,
disabledBoxOpacity: 0.5,
headingColor: $solarizedDarkBase0,
labelColor: $solarizedDarkBase0,
mutedColor: $solarizedDarkBase0,
totpStrokeColor: $solarizedDarkBase0,
boxRowButtonColor: $solarizedDarkBase0,
boxRowButtonHoverColor: $solarizedDarkBase2,
inputBorderColor: $solarizedDarkBase03,
inputBackgroundColor: $solarizedDarkBase01,
inputPlaceholderColor: lighten($solarizedDarkBase00, 20%),
buttonBackgroundColor: $solarizedDarkBase00,
buttonBorderColor: $solarizedDarkBase03,
buttonColor: $solarizedDarkBase1,
buttonPrimaryColor: $solarizedDarkCyan,
buttonDangerColor: $solarizedDarkRed,
primaryColor: $solarizedDarkGreen,
primaryAccentColor: $solarizedDarkCyan,
dangerColor: $solarizedDarkRed,
successColor: $solarizedDarkGreen,
infoColor: $solarizedDarkGreen,
warningColor: $solarizedDarkYellow,
logoSuffix: "white",
mfaLogoSuffix: "-w.png",
passwordNumberColor: $solarizedDarkCyan,
passwordSpecialColor: $solarizedDarkYellow,
passwordCountText: $solarizedDarkBase2,
calloutBorderColor: $solarizedDarkBase03,
calloutBackgroundColor: $solarizedDarkBase01,
toastTextColor: #000000,
svgSuffix: "-solarized.svg",
transparentColor: rgba(0, 0, 0, 0),
dateInputColorScheme: dark,
webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(61%) sepia(13%) saturate(289%)
hue-rotate(138deg) brightness(92%) contrast(90%),
webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(10%)
saturate(462%) hue-rotate(345deg) brightness(103%) contrast(87%),
codeColor: $code-color-dark,
),
);
@mixin themify($themes: $themes) {

4
apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
View File

@@ -47,7 +47,7 @@ describe("AppearanceV2Component", () => {
const showFavicons$ = new BehaviorSubject<boolean>(true);
const enableBadgeCounter$ = new BehaviorSubject<boolean>(true);
const selectedTheme$ = new BehaviorSubject<ThemeType>(ThemeType.Nord);
const selectedTheme$ = new BehaviorSubject<ThemeType>(ThemeType.Light);
const enableRoutingAnimation$ = new BehaviorSubject<boolean>(true);
const enableCompactMode$ = new BehaviorSubject<boolean>(false);
const showQuickCopyActions$ = new BehaviorSubject<boolean>(false);
@@ -135,7 +135,7 @@ describe("AppearanceV2Component", () => {
enableAnimations: true,
enableFavicon: true,
enableBadgeCounter: true,
theme: ThemeType.Nord,
theme: ThemeType.Light,
enableCompactMode: false,
showQuickCopyActions: false,
width: "default",

14
apps/browser/src/vault/popup/settings/appearance-v2.component.ts
View File

@@ -12,7 +12,7 @@ import { DomainSettingsService } from "@bitwarden/common/autofill/services/domai
import { AnimationControlService } from "@bitwarden/common/platform/abstractions/animation-control.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
import { ThemeType } from "@bitwarden/common/platform/enums";
import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
import {
@@ -60,7 +60,7 @@ export class AppearanceV2Component implements OnInit {
appearanceForm = this.formBuilder.group({
enableFavicon: false,
enableBadgeCounter: true,
theme: ThemeType.System,
theme: ThemeTypes.System as Theme,
enableAnimations: true,
enableCompactMode: false,
showQuickCopyActions: false,
@@ -72,7 +72,7 @@ export class AppearanceV2Component implements OnInit {
formLoading = true;
/** Available theme options */
themeOptions: { name: string; value: ThemeType }[];
themeOptions: { name: string; value: Theme }[];
/** Available width options */
protected readonly widthOptions: Option<PopupWidthOption>[] = [
@@ -93,9 +93,9 @@ export class AppearanceV2Component implements OnInit {
private vaultSettingsService: VaultSettingsService,
) {
this.themeOptions = [
{ name: i18nService.t("systemDefault"), value: ThemeType.System },
{ name: i18nService.t("light"), value: ThemeType.Light },
{ name: i18nService.t("dark"), value: ThemeType.Dark },
{ name: i18nService.t("systemDefault"), value: ThemeTypes.System },
{ name: i18nService.t("light"), value: ThemeTypes.Light },
{ name: i18nService.t("dark"), value: ThemeTypes.Dark },
];
}
@@ -191,7 +191,7 @@ export class AppearanceV2Component implements OnInit {
this.messagingService.send("bgUpdateContextMenu");
}
async saveTheme(newTheme: ThemeType) {
async saveTheme(newTheme: Theme) {
await this.themeStateService.setSelectedTheme(newTheme);
}

11
apps/desktop/src/app/accounts/settings.component.ts
View File

@@ -36,7 +36,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
import { ThemeType } from "@bitwarden/common/platform/enums/theme-type.enum";
import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
import { Utils } from "@bitwarden/common/platform/misc/utils";
import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
import { UserId } from "@bitwarden/common/types/guid";
@@ -128,7 +128,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
enableSshAgent: false,
allowScreenshots: false,
enableDuckDuckGoBrowserIntegration: false,
theme: [null as ThemeType | null],
theme: [null as Theme | null],
locale: [null as string | null],
});
@@ -198,10 +198,9 @@ export class SettingsComponent implements OnInit, OnDestroy {
this.localeOptions = localeOptions;
this.themeOptions = [
{ name: this.i18nService.t("default"), value: ThemeType.System },
{ name: this.i18nService.t("light"), value: ThemeType.Light },
{ name: this.i18nService.t("dark"), value: ThemeType.Dark },
{ name: "Nord", value: ThemeType.Nord },
{ name: this.i18nService.t("default"), value: ThemeTypes.System },
{ name: this.i18nService.t("light"), value: ThemeTypes.Light },
{ name: this.i18nService.t("dark"), value: ThemeTypes.Dark },
];
this.clearClipboardOptions = [

25
apps/desktop/src/app/services/desktop-theme.service.ts
View File

@@ -1,25 +0,0 @@
import { map } from "rxjs";
import { ThemeType } from "@bitwarden/common/platform/enums";
import { GlobalStateProvider } from "@bitwarden/common/platform/state";
import {
THEME_SELECTION,
ThemeStateService,
} from "@bitwarden/common/platform/theming/theme-state.service";
export class DesktopThemeStateService implements ThemeStateService {
private readonly selectedThemeState = this.globalStateProvider.get(THEME_SELECTION);
selectedTheme$ = this.selectedThemeState.state$.pipe(map((theme) => theme ?? this.defaultTheme));
constructor(
private globalStateProvider: GlobalStateProvider,
private defaultTheme: ThemeType = ThemeType.System,
) {}
async setSelectedTheme(theme: ThemeType): Promise<void> {
await this.selectedThemeState.update(() => theme, {
shouldUpdate: (currentTheme) => currentTheme !== theme,
});
}
}

7
apps/desktop/src/app/services/services.module.ts
View File

@@ -91,7 +91,6 @@ import { GlobalStateProvider, StateProvider } from "@bitwarden/common/platform/s
// eslint-disable-next-line import/no-restricted-paths -- Implementation for memory storage
import { MemoryStorageService as MemoryStorageServiceForStateProviders } from "@bitwarden/common/platform/state/storage/memory-storage.service";
import { SyncService } from "@bitwarden/common/platform/sync";
import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
import { CipherService as CipherServiceAbstraction } from "@bitwarden/common/vault/abstractions/cipher.service";
import { DialogService, ToastService } from "@bitwarden/components";
import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
@@ -135,7 +134,6 @@ import { SearchBarService } from "../layout/search/search-bar.service";
import { DesktopFileDownloadService } from "./desktop-file-download.service";
import { DesktopSetPasswordJitService } from "./desktop-set-password-jit.service";
import { DesktopThemeStateService } from "./desktop-theme.service";
import { InitService } from "./init.service";
import { NativeMessagingManifestService } from "./native-messaging-manifest.service";
import { RendererCryptoFunctionService } from "./renderer-crypto-function.service";
@@ -268,11 +266,6 @@ const safeProviders: SafeProvider[] = [
useFactory: () => fromIpcSystemTheme(),
deps: [],
}),
safeProvider({
provide: ThemeStateService,
useClass: DesktopThemeStateService,
deps: [GlobalStateProvider],
}),
safeProvider({
provide: EncryptedMessageHandlerService,
deps: [

11
apps/desktop/src/main/window.main.ts
View File

@@ -9,6 +9,7 @@ import { firstValueFrom } from "rxjs";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
import { ThemeTypes, Theme } from "@bitwarden/common/platform/enums";
import { processisolations } from "@bitwarden/desktop-napi";
import { BiometricStateService } from "@bitwarden/key-management";
@@ -297,11 +298,15 @@ export class WindowMain {
}
// Retrieve the background color
// Resolves background color missmatch when starting the application.
// Resolves background color mismatch when starting the application.
async getBackgroundColor(): Promise<string> {
let theme = await this.storageService.get("global_theming_selection");
if (theme == null || theme === "system") {
if (
theme == null ||
!Object.values(ThemeTypes).includes(theme as Theme) ||
theme === "system"
) {
theme = nativeTheme.shouldUseDarkColors ? "dark" : "light";
}
@@ -310,8 +315,6 @@ export class WindowMain {
return "#ededed";
case "dark":
return "#15181e";
case "nord":
return "#3b4252";
}
}

63
apps/desktop/src/scss/variables.scss
View File

@@ -1,6 +1,4 @@
@import "~nord/src/sass/nord.scss";
$dark-icon-themes: "theme_dark", "theme_nord";
$dark-icon-themes: "theme_dark";
$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -166,65 +164,6 @@ $themes: (
hrColor: #bac0ce,
codeColor: $code-color-dark,
),
nord: (
textColor: $nord5,
borderColor: $nord0,
backgroundColor: $nord2,
borderColorAlt: $nord5,
backgroundColorAlt: $nord1,
// Ensure the `window.main.ts` is updated with this value
backgroundColorAlt2: $nord1,
scrollbarColor: $nord4,
scrollbarHoverColor: $nord6,
boxBackgroundColor: $nord2,
boxBackgroundHoverColor: $nord3,
boxBorderColor: $nord1,
headerBackgroundColor: $nord2,
headerBorderColor: $nord0,
headerInputBackgroundColor: $nord6,
headerInputBackgroundFocusColor: $nord5,
headerInputColor: $nord2,
headerInputPlaceholderColor: $nord3,
listItemBackgroundColor: $nord2,
listItemBackgroundHoverColor: $nord3,
listItemBorderColor: $nord1,
disabledIconColor: $nord5,
headingColor: $nord4,
headingButtonColor: $nord5,
headingButtonHoverColor: $nord6,
labelColor: $nord4,
mutedColor: $nord4,
totpStrokeColor: $nord4,
boxRowButtonColor: $nord4,
boxRowButtonHoverColor: $nord6,
inputBorderColor: $nord0,
inputBackgroundColor: $nord2,
inputPlaceholderColor: lighten($nord3, 20%),
buttonBackgroundColor: $nord3,
buttonBorderColor: $nord0,
buttonColor: $nord5,
buttonPrimaryColor: $nord8,
buttonDangerColor: $nord11,
primaryColor: $nord9,
primaryAccentColor: $nord8,
dangerColor: $nord11,
successColor: $nord14,
infoColor: $nord9,
warningColor: $nord12,
logoSuffix: "white",
mfaLogoSuffix: "-w.png",
passwordNumberColor: $nord8,
passwordSpecialColor: $nord12,
passwordCountText: $nord5,
calloutBorderColor: $nord1,
calloutBackgroundColor: $nord2,
toastTextColor: #000000,
accountSwitcherBackgroundColor: $nord0,
accountSwitcherTextColor: $nord5,
svgSuffix: "-dark.svg",
hrColor: $nord4,
codeColor: $code-color-nord,
),
);
@mixin themify($themes: $themes) {

5
apps/web/src/app/admin-console/organizations/shared/components/integrations/integration-card/integration-card.component.ts
View File

@@ -61,11 +61,10 @@ export class IntegrationCardComponent implements AfterViewInit, OnDestroy {
if (theme === ThemeType.System) {
// When the user's preference is the system theme,
// use the system theme to determine the image
const prefersDarkMode =
systemTheme === ThemeType.Dark || systemTheme === ThemeType.SolarizedDark;
const prefersDarkMode = systemTheme === ThemeType.Dark;
this.imageEle.nativeElement.src = prefersDarkMode ? this.imageDarkMode : this.image;
} else if (theme === ThemeType.Dark || theme === ThemeType.SolarizedDark) {
} else if (theme === ThemeType.Dark) {
// When the user's preference is dark mode, use the dark mode image
this.imageEle.nativeElement.src = this.imageDarkMode;
} else {

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

@@ -60,7 +60,6 @@ import {
VaultTimeoutStringType,
} from "@bitwarden/common/key-management/vault-timeout";
import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
import {
EnvironmentService,
@@ -74,7 +73,7 @@ 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 { ThemeType } from "@bitwarden/common/platform/enums";
import { ThemeTypes } from "@bitwarden/common/platform/enums";
// eslint-disable-next-line no-restricted-imports -- Needed for DI
import {
UnsupportedWebPushConnectionService,
@@ -235,10 +234,10 @@ const safeProviders: SafeProvider[] = [
}),
safeProvider({
provide: ThemeStateService,
useFactory: (globalStateProvider: GlobalStateProvider, configService: ConfigService) =>
useFactory: (globalStateProvider: GlobalStateProvider) =>
// Web chooses to have Light as the default theme
new DefaultThemeStateService(globalStateProvider, configService, ThemeType.Light),
deps: [GlobalStateProvider, ConfigService],
new DefaultThemeStateService(globalStateProvider, ThemeTypes.Light),
deps: [GlobalStateProvider],
}),
safeProvider({
provide: CLIENT_TYPE,

10
apps/web/src/app/settings/preferences.component.ts
View File

@@ -17,7 +17,7 @@ import {
} from "@bitwarden/common/key-management/vault-timeout";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { ThemeType } from "@bitwarden/common/platform/enums";
import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
import { Utils } from "@bitwarden/common/platform/misc/utils";
import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
import { DialogService } from "@bitwarden/components";
@@ -47,7 +47,7 @@ export class PreferencesComponent implements OnInit, OnDestroy {
vaultTimeout: [null as VaultTimeout | null],
vaultTimeoutAction: [VaultTimeoutAction.Lock],
enableFavicons: true,
theme: [ThemeType.Light],
theme: [ThemeTypes.Light as Theme],
locale: [null as string | null],
});
@@ -90,9 +90,9 @@ export class PreferencesComponent implements OnInit, OnDestroy {
localeOptions.splice(0, 0, { name: i18nService.t("default"), value: null });
this.localeOptions = localeOptions;
this.themeOptions = [
{ name: i18nService.t("themeLight"), value: ThemeType.Light },
{ name: i18nService.t("themeDark"), value: ThemeType.Dark },
{ name: i18nService.t("themeSystem"), value: ThemeType.System },
{ name: i18nService.t("themeLight"), value: ThemeTypes.Light },
{ name: i18nService.t("themeDark"), value: ThemeTypes.Dark },
{ name: i18nService.t("themeSystem"), value: ThemeTypes.System },
];
}