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-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

1
.github/renovate.json5 vendored
View File

@@ -173,7 +173,6 @@
"cross-env",
"del",
"lit",
"nord",
"patch-package",
"prettier",
"prettier-plugin-tailwindcss",

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 },
];
}

2
libs/angular/src/platform/services/theming/angular-theming.service.ts
View File

@@ -59,8 +59,6 @@ export class AngularThemingService implements AbstractThemingService {
document.documentElement.classList.remove(
"theme_" + ThemeTypes.Light,
"theme_" + ThemeTypes.Dark,
"theme_" + ThemeTypes.Nord,
"theme_" + ThemeTypes.SolarizedDark,
);
document.documentElement.classList.add("theme_" + theme);
});

2
libs/angular/src/services/jslib-services.module.ts
View File

@@ -408,7 +408,7 @@ const safeProviders: SafeProvider[] = [
safeProvider({
provide: ThemeStateService,
useClass: DefaultThemeStateService,
deps: [GlobalStateProvider, ConfigService],
deps: [GlobalStateProvider],
}),
safeProvider({
provide: AbstractThemingService,

2
libs/common/src/enums/feature-flag.enum.ts
View File

@@ -27,7 +27,6 @@ export enum FeatureFlag {
CriticalApps = "pm-14466-risk-insights-critical-application",
EnableRiskInsightsNotifications = "enable-risk-insights-notifications",
ExtensionRefresh = "extension-refresh",
PM4154_BulkEncryptionService = "PM-4154-bulk-encryption-service",
VaultBulkManagementAction = "vault-bulk-management-action",
UnauthenticatedExtensionUIRefresh = "unauth-ui-refresh",
@@ -83,7 +82,6 @@ export const DefaultFeatureFlagValue = {
[FeatureFlag.CriticalApps]: FALSE,
[FeatureFlag.EnableRiskInsightsNotifications]: FALSE,
[FeatureFlag.ExtensionRefresh]: FALSE,
[FeatureFlag.PM4154_BulkEncryptionService]: FALSE,
[FeatureFlag.VaultBulkManagementAction]: FALSE,
[FeatureFlag.UnauthenticatedExtensionUIRefresh]: FALSE,

4
libs/common/src/platform/enums/theme-type.enum.ts
View File

@@ -5,16 +5,12 @@ export enum ThemeType {
System = "system",
Light = "light",
Dark = "dark",
Nord = "nord",
SolarizedDark = "solarizedDark",
}
export const ThemeTypes = {
System: "system",
Light: "light",
Dark: "dark",
Nord: "nord",
SolarizedDark: "solarizedDark",
} as const;
export type Theme = (typeof ThemeTypes)[keyof typeof ThemeTypes];

35
libs/common/src/platform/theming/theme-state.service.ts
View File

@@ -1,43 +1,33 @@
import { Observable, combineLatest, map } from "rxjs";
import { Observable, map } from "rxjs";
import { FeatureFlag } from "../../enums/feature-flag.enum";
import { ConfigService } from "../abstractions/config/config.service";
import { ThemeType } from "../enums";
import { Theme, ThemeTypes } from "../enums";
import { GlobalStateProvider, KeyDefinition, THEMING_DISK } from "../state";
export abstract class ThemeStateService {
/**
* The users selected theme.
*/
abstract selectedTheme$: Observable<ThemeType>;
abstract selectedTheme$: Observable<Theme>;
/**
* A method for updating the current users configured theme.
* @param theme The chosen user theme.
*/
abstract setSelectedTheme(theme: ThemeType): Promise<void>;
abstract setSelectedTheme(theme: Theme): Promise<void>;
}
export const THEME_SELECTION = new KeyDefinition<ThemeType>(THEMING_DISK, "selection", {
export const THEME_SELECTION = new KeyDefinition<Theme>(THEMING_DISK, "selection", {
deserializer: (s) => s,
});
export class DefaultThemeStateService implements ThemeStateService {
private readonly selectedThemeState = this.globalStateProvider.get(THEME_SELECTION);
selectedTheme$ = combineLatest([
this.selectedThemeState.state$,
this.configService.getFeatureFlag$(FeatureFlag.ExtensionRefresh),
]).pipe(
map(([theme, isExtensionRefresh]) => {
// The extension refresh should not allow for Nord or SolarizedDark
// Default the user to their system theme
if (
isExtensionRefresh &&
theme != null &&
[ThemeType.Nord, ThemeType.SolarizedDark].includes(theme)
) {
return ThemeType.System;
selectedTheme$ = this.selectedThemeState.state$.pipe(
map((theme) => {
// We used to support additional themes. Since these are no longer supported we return null to default to the system theme.
if (theme != null && !Object.values(ThemeTypes).includes(theme)) {
return null;
}
return theme;
@@ -47,11 +37,10 @@ export class DefaultThemeStateService implements ThemeStateService {
constructor(
private globalStateProvider: GlobalStateProvider,
private configService: ConfigService,
private defaultTheme: ThemeType = ThemeType.System,
private defaultTheme: Theme = ThemeTypes.System,
) {}
async setSelectedTheme(theme: ThemeType): Promise<void> {
async setSelectedTheme(theme: Theme): Promise<void> {
await this.selectedThemeState.update(() => theme, {
shouldUpdate: (currentTheme) => currentTheme !== theme,
});

82
libs/components/src/tw-theme.css
View File

@@ -117,88 +117,6 @@
--tw-ring-offset-color: #1f242e;
}
.theme_nord {
--color-transparent-hover: rgb(255 255 255 / 0.12);
--color-background: 67 76 94;
--color-background-alt: 59 66 82;
--color-background-alt2: 76 86 106;
--color-background-alt3: 76 86 106;
--color-background-alt4: 67 76 94;
--color-primary-300: 108 153 166;
--color-primary-600: 136 192 208;
--color-primary-700: 160 224 242;
--color-secondary-100: 76 86 106;
--color-secondary-300: 94 105 125;
--color-secondary-600: 216 222 233;
--color-secondary-700: 255 255 255;
--color-success-600: 163 190 140;
--color-success-700: 144 170 122;
--color-danger-600: 228 129 139;
--color-danger-700: 191 97 106;
--color-warning-600: 235 203 139;
--color-warning-700: 210 181 121;
--color-info-600: 129 161 193;
--color-info-700: 94 129 172;
--color-text-main: 229 233 240;
--color-text-muted: 216 222 233;
--color-text-contrast: 46 52 64;
--color-text-alt2: 255 255 255;
--color-text-code: 219 177 211;
--color-marketing-logo: 255 255 255;
--tw-ring-offset-color: #434c5e;
}
.theme_solarized {
--color-transparent-hover: rgb(255 255 255 / 0.12);
--color-background: 0 43 54;
--color-background-alt: 7 54 66;
--color-background-alt2: 31 72 87;
--color-background-alt3: 31 72 87;
--color-background-alt4: 0 43 54;
--color-primary-300: 42 161 152;
--color-primary-600: 133 153 0;
--color-primary-700: 192 203 123;
--color-secondary-100: 31 72 87;
--color-secondary-300: 101 123 131;
--color-secondary-600: 131 148 150;
--color-secondary-700: 238 232 213;
--color-success-600: 133 153 0;
--color-success-700: 192 203 123;
--color-danger-600: 220 50 47;
--color-danger-700: 223 135 134;
--color-warning-600: 181 137 0;
--color-warning-700: 220 189 92;
--color-info-600: 133 153 0;
--color-info-700: 192 203 123;
--color-text-main: 253 246 227;
--color-text-muted: 147 161 161;
--color-text-contrast: 0 0 0;
--color-text-alt2: 255 255 255;
--color-text-code: 240 141 199;
--color-marketing-logo: 255 255 255;
--tw-ring-offset-color: #002b36;
}
/**
* tw-break-words does not work with table cells:
* https://github.com/tailwindlabs/tailwindcss/issues/835

3
libs/vault/src/components/dark-image-source.directive.ts
View File

@@ -54,8 +54,7 @@ export class DarkImageSourceDirective implements OnInit {
.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe(([theme, systemTheme]) => {
const appliedTheme = theme === "system" ? systemTheme : theme;
const isDark =
appliedTheme === "dark" || appliedTheme === "nord" || appliedTheme === "solarizedDark";
const isDark = appliedTheme === "dark";
this.src = isDark ? this.darkImgSrc() : this.lightImgSrc;
});
}

7
package-lock.json generated
View File

@@ -58,7 +58,6 @@
"ngx-toastr": "19.0.0",
"node-fetch": "2.6.12",
"node-forge": "1.3.1",
"nord": "0.2.1",
"oidc-client-ts": "2.4.1",
"open": "8.4.2",
"papaparse": "5.5.2",
@@ -28021,12 +28020,6 @@
"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
}
},
"node_modules/nord": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/nord/-/nord-0.2.1.tgz",
"integrity": "sha512-/AD7JGJbcp1pB5XwYkJyivqdeXofUP5u2lkif6vLGLc+SsV9OCC0JFNpVwM5pqHuFqbyojRt6xILuidJOwwJDQ==",
"license": "(Apache-2.0 AND CC-BY-SA-4.0)"
},
"node_modules/normalize-package-data": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.2.tgz",

1
package.json
View File

@@ -188,7 +188,6 @@
"ngx-toastr": "19.0.0",
"node-fetch": "2.6.12",
"node-forge": "1.3.1",
"nord": "0.2.1",
"oidc-client-ts": "2.4.1",
"open": "8.4.2",
"papaparse": "5.5.2",