bitwarden-browser/apps/desktop/src/scss/variables.scss

@import "~nord/src/sass/nord.scss";

$dark-icon-themes: "theme_dark", "theme_nord";

$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
$font-size-base: 14px;
$font-size-large: 18px;
$font-size-small: 12px;
$text-color: #000000;
$border-color: #f0f0f0;
$border-color-dark: #ddd;
$list-item-hover: #fbfbfb;
$list-icon-color: #c7c7cd;
$border-radius: 3px;
$line-height-base: 1.42857143;

$gray: #555;
$gray-light: #777;
$text-muted: $gray-light;

$brand-primary: #175ddc;
$brand-danger: #dd4b39;
$brand-success: #00a65a;
$brand-info: #555555;
$brand-warning: #bf7e16;
$brand-primary-accent: #1252a3;

$background-color: white;
$background-color-alt: #f9f9f9;
$background-color-alt2: #ededed;

$box-background-color: $background-color;
$box-background-hover-color: $list-item-hover;
$box-border-color: $border-color;

$button-border-color: darken($border-color-dark, 12%);
$button-background-color: white;
$button-color: lighten($text-color, 40%);
$button-color-primary: darken($brand-primary, 8%);
$button-color-danger: darken($brand-danger, 10%);

$themes: (
  light: (
    textColor: $text-color,
    borderColor: $border-color-dark,
    backgroundColor: $background-color,
    backgroundColorAlt: $background-color-alt,
    backgroundColorAlt2: $background-color-alt2,
    scrollbarColor: rgba(100, 100, 100, 0.2),
    scrollbarHoverColor: rgba(100, 100, 100, 0.4),
    boxBackgroundColor: $box-background-color,
    boxBackgroundHoverColor: $box-background-hover-color,
    boxBorderColor: $box-border-color,
    headerBackgroundColor: $brand-primary,
    headerBorderColor: darken($brand-primary, 7%),
    headerInputBackgroundColor: darken($brand-primary, 8%),
    headerInputBackgroundFocusColor: darken($brand-primary, 10%),
    headerInputColor: #ffffff,
    headerInputPlaceholderColor: lighten($brand-primary, 35%),
    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%),
    headingButtonHoverColor: $gray-light,
    labelColor: $gray-light,
    mutedColor: $text-muted,
    totpStrokeColor: $brand-primary,
    boxRowButtonColor: $brand-primary,
    boxRowButtonHoverColor: darken($brand-primary, 10%),
    inputBorderColor: darken($border-color-dark, 7%),
    inputBackgroundColor: #ffffff,
    inputPlaceholderColor: lighten($gray-light, 35%),
    buttonBackgroundColor: $button-background-color,
    buttonBorderColor: $button-border-color,
    buttonColor: $button-color,
    buttonPrimaryColor: $button-color-primary,
    buttonDangerColor: $button-color-danger,
    primaryColor: $brand-primary,
    primaryAccentColor: $brand-primary-accent,
    dangerColor: $brand-danger,
    successColor: $brand-success,
    infoColor: $brand-info,
    warningColor: $brand-warning,
    logoSuffix: "dark",
    passwordNumberColor: #007fde,
    passwordSpecialColor: #c40800,
    calloutBorderColor: $border-color-dark,
    calloutBackgroundColor: $background-color,
    accountSwitcherBackgroundColor: $background-color,
    accountSwitcherTextColor: #ffffff,
    svgSuffix: "-light.svg",
    hrColor: #eeeeee,
  ),
  dark: (
    textColor: #ffffff,
    borderColor: #2f2f2f,
    backgroundColor: #363636,
    backgroundColorAlt: #3d3d3d,
    backgroundColorAlt2: #222222,
    scrollbarColor: #4d4d4d,
    scrollbarHoverColor: #5f5f5f,
    boxBackgroundColor: #363636,
    boxBackgroundHoverColor: #3f3f3f,
    boxBorderColor: #2f2f2f,
    headerBackgroundColor: #363636,
    headerBorderColor: #272727,
    headerInputBackgroundColor: #222222,
    headerInputBackgroundFocusColor: #1d1d1d,
    headerInputColor: #ffffff,
    headerInputPlaceholderColor: #707070,
    listItemBackgroundColor: #363636,
    listItemBackgroundHoverColor: #3c3c3c,
    listItemBorderColor: #2f2f2f,
    groupingsActiveColor: #292929,
    disabledIconColor: #c7c7cd,
    headingColor: #a3a3a3,
    headingButtonColor: #a3a3a3,
    headingButtonHoverColor: #ffffff,
    labelColor: #a3a3a3,
    mutedColor: #a3a3a3,
    totpStrokeColor: #cacaca,
    boxRowButtonColor: #cacaca,
    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,
    logoSuffix: "white",
    passwordNumberColor: #52bdfb,
    passwordSpecialColor: #ff7c70,
    calloutBorderColor: #2f2f2f,
    calloutBackgroundColor: #363636,
    accountSwitcherBackgroundColor: #2f2f2f,
    accountSwitcherTextColor: #ffffff,
    svgSuffix: "-dark.svg",
    hrColor: #a3a3a3,
  ),
  nord: (
    textColor: $nord5,
    borderColor: $nord0,
    backgroundColor: $nord2,
    backgroundColorAlt: $nord1,
    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,
    groupingsActiveColor: $nord3,
    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",
    passwordNumberColor: $nord8,
    passwordSpecialColor: $nord12,
    calloutBorderColor: $nord1,
    calloutBackgroundColor: $nord2,
    accountSwitcherBackgroundColor: $nord0,
    accountSwitcherTextColor: $nord5,
    svgSuffix: "-dark.svg",
    hrColor: $nord4,
  ),
);

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {
    html.theme_#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), "#{$key}");
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value,
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}