Add support for the Nord Theme (#980)

* Add support for the Nord Theme as in Desktop and mobile apps

* Improves

src/popup/scss/variables.scss

@@ -1,4 +1,6 @@
-$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+@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;
@@ -128,6 +130,54 @@ $themes: (
         passwordNumberColor: #52bdfb,
         passwordSpecialColor: #ff7c70,
     ),
+    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,
+    ),
 );
 
 @mixin themify($themes: $themes) {

src/popup/settings/options.component.ts

@@ -46,6 +46,7 @@ export class OptionsComponent implements OnInit {
             { name: i18nService.t('default'), value: null },
             { name: i18nService.t('light'), value: 'light' },
             { name: i18nService.t('dark'), value: 'dark' },
+            { name: 'Nord', value: 'nord' },
         ];
         this.uriMatchOptions = [
             { name: i18nService.t('baseDomain'), value: UriMatchType.Domain },