bitwarden-browser/src/scss/variables.scss

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

$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,.2),
        scrollbarHoverColor: rgba(100,100,100,.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,
        subtextColor: #6c757d,
    ),
    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,
        subtextColor: #938a82,
    ),
    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,
        subtextColor: $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);
}