@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, ), 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, ), 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, ), ); @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); }