devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[PM-3334] Update desktop dark theme to match browser (#5890) 

* Update variables.scss

* update toast text color to have better WCAG contrast

* added toastcolor variables

* Update window.main.ts

* Tweaked styles

* darkened backgroundAlt2 and button background

* lightened button border

* lightened button backgroundColor

* Update window.main.ts
This commit is contained in:
Danielle Flinn 2023-08-19 06:50:36 -07:00 committed by GitHub
parent 052fe1991d
commit 5bd2fbfbba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -236,7 +236,7 @@ export class WindowMain {
case "light":
return "#ededed";
case "dark":
return "#222222";
return "#15181e";
case "nord":
return "#3b4252";
}

6
apps/desktop/src/scss/plugins.scss
View File

@ -5,11 +5,17 @@
.toast-container {
.toast-close-button {
@include themify($themes) {
color: themed("toastTextColor");
}
font-size: 18px;
margin-right: 4px;
}
.ngx-toastr {
@include themify($themes) {
color: themed("toastTextColor");
}
align-items: center;
background-image: none !important;
border-radius: $border-radius;

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

@ -66,7 +66,6 @@ $themes: (
listItemBackgroundColor: $background-color,
listItemBackgroundHoverColor: $list-item-hover,
listItemBorderColor: $border-color,
groupingsActiveColor: darken($background-color-alt, 5%),
disabledIconColor: $list-icon-color,
headingColor: $gray-light,
headingButtonColor: lighten($gray-light, 30%),
@ -96,6 +95,7 @@ $themes: (
passwordCountText: #212529,
calloutBorderColor: $border-color-dark,
calloutBackgroundColor: $background-color,
toastTextColor: #ffffff,
accountSwitcherBackgroundColor: $background-color,
accountSwitcherTextColor: #ffffff,
svgSuffix: "-light.svg",
@ -104,60 +104,60 @@ $themes: (
),
dark: (
textColor: #ffffff,
borderColor: #2f2f2f,
backgroundColor: #363636,
borderColor: #15181e,
backgroundColor: #1f242e,
borderColorAlt: #6e788a,
backgroundColorAlt: #3d3d3d,
backgroundColorAlt: #2f343d,
// Ensure the `window.main.ts` is updated with this value
backgroundColorAlt2: #222222,
scrollbarColor: #4d4d4d,
scrollbarHoverColor: #5f5f5f,
boxBackgroundColor: #363636,
boxBackgroundHoverColor: #3f3f3f,
boxBorderColor: #2f2f2f,
headerBackgroundColor: #363636,
headerBorderColor: #272727,
headerInputBackgroundColor: #222222,
headerInputBackgroundFocusColor: #1d1d1d,
backgroundColorAlt2: #15181e,
scrollbarColor: #6e788a,
scrollbarHoverColor: #8d94a5,
boxBackgroundColor: #2f343d,
boxBackgroundHoverColor: #3c424e,
boxBorderColor: #4c525f,
headerBackgroundColor: #2f343d,
headerBorderColor: #15181e,
headerInputBackgroundColor: #3c424e,
headerInputBackgroundFocusColor: #4c525f,
headerInputColor: #ffffff,
headerInputPlaceholderColor: #707070,
listItemBackgroundColor: #363636,
listItemBackgroundHoverColor: #3c3c3c,
listItemBorderColor: #2f2f2f,
groupingsActiveColor: #292929,
disabledIconColor: #c7c7cd,
headingColor: #a3a3a3,
headingButtonColor: #a3a3a3,
headerInputPlaceholderColor: #bac0ce,
listItemBackgroundColor: #1f242e,
listItemBackgroundHoverColor: #2f343d,
listItemBorderColor: #4c525f,
disabledIconColor: #6e7689,
headingColor: #bac0ce,
headingButtonColor: #bac0ce,
headingButtonHoverColor: #ffffff,
labelColor: #a3a3a3,
mutedColor: #a3a3a3,
totpStrokeColor: #cacaca,
boxRowButtonColor: #cacaca,
labelColor: #bac0ce,
mutedColor: #bac0ce,
totpStrokeColor: #4c525f,
boxRowButtonColor: #bac0ce,
boxRowButtonHoverColor: #ffffff,
inputBorderColor: #222222,
inputBackgroundColor: #363636,
inputPlaceholderColor: #707070,
buttonBackgroundColor: #363636,
buttonBorderColor: #1f1f1f,
buttonColor: #e0e0e0,
buttonPrimaryColor: #46ace7,
buttonDangerColor: #ff3e24,
primaryColor: #52bdfb,
primaryAccentColor: #3ea1da,
dangerColor: #ff3e24,
successColor: $brand-success,
infoColor: $brand-info,
warningColor: $brand-warning,
inputBorderColor: #4c525f,
inputBackgroundColor: #2f343d,
inputPlaceholderColor: #bac0ce,
buttonBackgroundColor: #272b32,
buttonBorderColor: #4c525f,
buttonColor: #bac0ce,
buttonPrimaryColor: #6f9df1,
buttonDangerColor: #ff8d85,
primaryColor: #6f9df1,
primaryAccentColor: #6f9df1,
dangerColor: #ff8d85,
successColor: #52e07c,
infoColor: #a4b0c6,
warningColor: #ffeb66,
logoSuffix: "white",
passwordNumberColor: #52bdfb,
passwordSpecialColor: #ff7c70,
passwordNumberColor: #6f9df1,
passwordSpecialColor: #ff8d85,
passwordCountText: #ffffff,
calloutBorderColor: #2f2f2f,
calloutBackgroundColor: #363636,
accountSwitcherBackgroundColor: #2f2f2f,
calloutBorderColor: #4c525f,
calloutBackgroundColor: #3c424e,
toastTextColor: #1f242e,
accountSwitcherBackgroundColor: #2f343d,
accountSwitcherTextColor: #ffffff,
svgSuffix: "-dark.svg",
hrColor: #a3a3a3,
hrColor: #bac0ce,
codeColor: $code-color,
),
nord: (
@ -182,7 +182,6 @@ $themes: (
listItemBackgroundColor: $nord2,
listItemBackgroundHoverColor: $nord3,
listItemBorderColor: $nord1,
groupingsActiveColor: $nord3,
disabledIconColor: $nord5,
headingColor: $nord4,
headingButtonColor: $nord5,
@ -212,6 +211,7 @@ $themes: (
passwordCountText: $nord5,
calloutBorderColor: $nord1,
calloutBackgroundColor: $nord2,
toastTextColor: #ffffff,
accountSwitcherBackgroundColor: $nord0,
accountSwitcherTextColor: $nord5,
svgSuffix: "-dark.svg",