From 6e0087457dc91cca424f02dc3f543777addf1904 Mon Sep 17 00:00:00 2001 From: Kyle Sferrazza Date: Fri, 12 Feb 2021 15:00:57 -0500 Subject: [PATCH] Add support for the Solarized Dark color scheme --- solarized.scss | 16 ++++++++ src/popup/scss/variables.scss | 50 +++++++++++++++++++++++++ src/popup/settings/options.component.ts | 1 + 3 files changed, 67 insertions(+) create mode 100644 solarized.scss diff --git a/solarized.scss b/solarized.scss new file mode 100644 index 0000000000..5365ddbce0 --- /dev/null +++ b/solarized.scss @@ -0,0 +1,16 @@ +$solarizedDarkBase03: #002b36; +$solarizedDarkBase02: #073642; +$solarizedDarkBase01: #586e75; +$solarizedDarkBase00: #657b83; +$solarizedDarkBase0: #839496; +$solarizedDarkBase1: #93a1a1; +$solarizedDarkBase2: #eee8d5; +$solarizedDarkBase3: #fdf6e3; +$solarizedDarkYellow: #b58900; +$solarizedDarkOrange: #cb4b16; +$solarizedDarkRed: #dc322f; +$solarizedDarkMagenta: #d33682; +$solarizedDarkViolet: #6c71c4; +$solarizedDarkBlue: #268bd2; +$solarizedDarkCyan: #2aa198; +$solarizedDarkGreen: #859900; diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss index 8ec057f6e9..303f7bc384 100644 --- a/src/popup/scss/variables.scss +++ b/src/popup/scss/variables.scss @@ -1,4 +1,5 @@ @import '~nord/src/sass/nord.scss'; +@import './solarized.scss'; $font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; @@ -185,6 +186,55 @@ $themes: ( calloutBorderColor: $nord0, calloutBackgroundColor: $nord2, ), + solarizedDark: ( + textColor: $solarizedDarkBase2, + borderColor: $solarizedDarkBase03, + backgroundColor: $solarizedDarkBase03, + backgroundColorAlt: $solarizedDarkBase02, + scrollbarColor: $solarizedDarkBase0, + scrollbarHoverColor: $solarizedDarkBase2, + boxBackgroundColor: $solarizedDarkBase03, + boxBackgroundHoverColor: $solarizedDarkBase02, + boxBorderColor: $solarizedDarkBase02, + tabBackgroundColor: $solarizedDarkBase02, + tabBackgroundHoverColor: $solarizedDarkBase01, + headerColor: $solarizedDarkBase1, + headerBackgroundColor: $solarizedDarkBase02, + headerBackgroundHoverColor: $solarizedDarkBase01, + headerBorderColor: $solarizedDarkBase03, + headerInputBackgroundColor: $solarizedDarkBase2, + headerInputBackgroundFocusColor: $solarizedDarkBase1, + headerInputColor: $solarizedDarkBase01, + headerInputPlaceholderColor: $solarizedDarkBase00, + listItemBackgroundHoverColor: $solarizedDarkBase02, + disabledIconColor: $solarizedDarkBase0, + disabledBoxOpacity: 0.5, + headingColor: $solarizedDarkBase0, + labelColor: $solarizedDarkBase0, + mutedColor: $solarizedDarkBase0, + totpStrokeColor: $solarizedDarkBase0, + boxRowButtonColor: $solarizedDarkBase0, + boxRowButtonHoverColor: $solarizedDarkBase2, + inputBorderColor: $solarizedDarkBase03, + inputBackgroundColor: $solarizedDarkBase01, + inputPlaceholderColor: lighten($solarizedDarkBase00, 20%), + buttonBackgroundColor: $solarizedDarkBase00, + buttonBorderColor: $solarizedDarkBase03, + buttonColor: $solarizedDarkBase1, + buttonPrimaryColor: $solarizedDarkCyan, + buttonDangerColor: $solarizedDarkRed, + primaryColor: $solarizedDarkGreen, + primaryAccentColor: $solarizedDarkCyan, + dangerColor: $solarizedDarkRed, + successColor: $solarizedDarkGreen, + infoColor: $solarizedDarkGreen, + warningColor: $solarizedDarkYellow, + logoSuffix: 'white', + passwordNumberColor: $solarizedDarkCyan, + passwordSpecialColor: $solarizedDarkYellow, + calloutBorderColor: $solarizedDarkBase03, + calloutBackgroundColor: $solarizedDarkBase01, + ), ); @mixin themify($themes: $themes) { diff --git a/src/popup/settings/options.component.ts b/src/popup/settings/options.component.ts index f48aafd3f8..c24098233a 100644 --- a/src/popup/settings/options.component.ts +++ b/src/popup/settings/options.component.ts @@ -43,6 +43,7 @@ export class OptionsComponent implements OnInit { { name: i18nService.t('light'), value: 'light' }, { name: i18nService.t('dark'), value: 'dark' }, { name: 'Nord', value: 'nord' }, + { name: 'Solarized Dark', value: 'solarizedDark' }, ]; this.uriMatchOptions = [ { name: i18nService.t('baseDomain'), value: UriMatchType.Domain },