[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

apps/desktop/src/main/window.main.ts

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

apps/desktop/src/scss/plugins.scss

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

apps/desktop/src/scss/variables.scss

@@ -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,
+    borderColor: #15181e,
-    backgroundColor: #363636,
+    backgroundColor: #1f242e,
     borderColorAlt: #6e788a,
-    backgroundColorAlt: #3d3d3d,
+    backgroundColorAlt: #2f343d,
     // Ensure the `window.main.ts` is updated with this value
-    backgroundColorAlt2: #222222,
+    backgroundColorAlt2: #15181e,
-    scrollbarColor: #4d4d4d,
+    scrollbarColor: #6e788a,
-    scrollbarHoverColor: #5f5f5f,
+    scrollbarHoverColor: #8d94a5,
-    boxBackgroundColor: #363636,
+    boxBackgroundColor: #2f343d,
-    boxBackgroundHoverColor: #3f3f3f,
+    boxBackgroundHoverColor: #3c424e,
-    boxBorderColor: #2f2f2f,
+    boxBorderColor: #4c525f,
-    headerBackgroundColor: #363636,
+    headerBackgroundColor: #2f343d,
-    headerBorderColor: #272727,
+    headerBorderColor: #15181e,
-    headerInputBackgroundColor: #222222,
+    headerInputBackgroundColor: #3c424e,
-    headerInputBackgroundFocusColor: #1d1d1d,
+    headerInputBackgroundFocusColor: #4c525f,
     headerInputColor: #ffffff,
-    headerInputPlaceholderColor: #707070,
+    headerInputPlaceholderColor: #bac0ce,
-    listItemBackgroundColor: #363636,
+    listItemBackgroundColor: #1f242e,
-    listItemBackgroundHoverColor: #3c3c3c,
+    listItemBackgroundHoverColor: #2f343d,
-    listItemBorderColor: #2f2f2f,
+    listItemBorderColor: #4c525f,
-    groupingsActiveColor: #292929,
+    disabledIconColor: #6e7689,
-    disabledIconColor: #c7c7cd,
+    headingColor: #bac0ce,
-    headingColor: #a3a3a3,
+    headingButtonColor: #bac0ce,
-    headingButtonColor: #a3a3a3,
     headingButtonHoverColor: #ffffff,
-    labelColor: #a3a3a3,
+    labelColor: #bac0ce,
-    mutedColor: #a3a3a3,
+    mutedColor: #bac0ce,
-    totpStrokeColor: #cacaca,
+    totpStrokeColor: #4c525f,
-    boxRowButtonColor: #cacaca,
+    boxRowButtonColor: #bac0ce,
     boxRowButtonHoverColor: #ffffff,
-    inputBorderColor: #222222,
+    inputBorderColor: #4c525f,
-    inputBackgroundColor: #363636,
+    inputBackgroundColor: #2f343d,
-    inputPlaceholderColor: #707070,
+    inputPlaceholderColor: #bac0ce,
-    buttonBackgroundColor: #363636,
+    buttonBackgroundColor: #272b32,
-    buttonBorderColor: #1f1f1f,
+    buttonBorderColor: #4c525f,
-    buttonColor: #e0e0e0,
+    buttonColor: #bac0ce,
-    buttonPrimaryColor: #46ace7,
+    buttonPrimaryColor: #6f9df1,
-    buttonDangerColor: #ff3e24,
+    buttonDangerColor: #ff8d85,
-    primaryColor: #52bdfb,
+    primaryColor: #6f9df1,
-    primaryAccentColor: #3ea1da,
+    primaryAccentColor: #6f9df1,
-    dangerColor: #ff3e24,
+    dangerColor: #ff8d85,
-    successColor: $brand-success,
+    successColor: #52e07c,
-    infoColor: $brand-info,
+    infoColor: #a4b0c6,
-    warningColor: $brand-warning,
+    warningColor: #ffeb66,
     logoSuffix: "white",
-    passwordNumberColor: #52bdfb,
+    passwordNumberColor: #6f9df1,
-    passwordSpecialColor: #ff7c70,
+    passwordSpecialColor: #ff8d85,
     passwordCountText: #ffffff,
-    calloutBorderColor: #2f2f2f,
+    calloutBorderColor: #4c525f,
-    calloutBackgroundColor: #363636,
+    calloutBackgroundColor: #3c424e,
-    accountSwitcherBackgroundColor: #2f2f2f,
+    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",