Add Nord color theme (#110)

* Color scheme courtesy of folks at arcticicestudio:
  https://arcticicestudio.github.io/nord/

src/app/accounts/settings.component.ts

@@ -64,6 +64,7 @@ export class SettingsComponent implements OnInit {
             { name: i18nService.t('default'), value: null },
             { name: i18nService.t('light'), value: 'light' },
             { name: i18nService.t('dark'), value: 'dark' },
+            { name: 'Nord', value: 'nord' },
         ];
     }
 

src/scss/nord.scss

@@ -0,0 +1,237 @@
+// Source: https://raw.githubusercontent.com/arcticicestudio/nord/develop/src/nord.scss
+//
+// Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
+// Copyright (c) 2016-present Sven Greb <code@svengreb.de>
+
+// Project:    Nord
+// Version:    0.2.0
+// Repository: https://github.com/arcticicestudio/nord
+// License:    MIT
+// References:
+//   http://sass-lang.com
+//   http://sassdoc.com
+
+////
+/// An arctic, north-bluish color palette.
+/// Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
+/// highlighting and UI.
+/// It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
+/// ambiance.
+///
+/// @author Arctic Ice Studio <development@arcticicestudio.com>
+////
+
+/// Base component color of "Polar Night".
+///
+/// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
+///
+/// @access public
+/// @example scss - SCSS
+///   /* For dark ambiance themes */
+///   .background {
+///     background-color: $nord0;
+///   }
+///   /* For light ambiance themes */
+///   .text {
+///     color: $nord0;
+///   }
+/// @group polarnight
+/// @since 0.1.0
+$nord0: #2e3440;
+
+/// Lighter shade color of the base component color.
+///
+/// Used as a lighter background color for UI elements like status bars.
+///
+/// @access public
+/// @group polarnight
+/// @see $nord0
+/// @since 0.1.0
+$nord1: #3b4252;
+
+/// Lighter shade color of the base component color.
+///
+/// Used as line highlighting in the editor.
+/// In the UI scope it may be used as selection- and highlight color.
+///
+/// @access public
+/// @example scss - SCSS
+///   /* Code Syntax Highlighting scope */
+///   .editor {
+///     &.line {
+///       background-color: $nord2;
+///     }
+///   }
+///
+///   /* UI scope */
+///   button {
+///     &:selected {
+///       background-color: $nord2;
+///     }
+///   }
+/// @group polarnight
+/// @see $nord0
+/// @since 0.1.0
+$nord2: #434c5e;
+
+/// Lighter shade color of the base component color.
+///
+/// Used for comments, invisibles, indent- and wrap guide marker.
+/// In the UI scope used as pseudoclass color for disabled elements.
+///
+/// @access public
+/// @example scss - SCSS
+///   /* Code Syntax Highlighting scope */
+///   .editor {
+///     &.indent-guide,
+///     &.wrap-guide {
+///       &.marker {
+///         color: $nord3;
+///       }
+///     }
+///   }
+///   .comment,
+///   .invisible {
+///     color: $nord3;
+///   }
+///
+///   /* UI scope */
+///   button {
+///     &:disabled {
+///       background-color: $nord3;
+///     }
+///   }
+/// @group polarnight
+/// @see $nord0
+/// @since 0.1.0
+$nord3: #4c566a;
+
+/// Base component color of "Snow Storm".
+///
+/// Main color for text, variables, constants and attributes.
+/// In the UI scope used as semi-light background depending on the theme shading design.
+///
+/// @access public
+/// @example scss - SCSS
+///   /* For light ambiance themes */
+///   .background {
+///     background-color: $nord4;
+///   }
+///   /* For dark ambiance themes */
+///   .text {
+///     color: $nord4;
+///   }
+/// @group snowstorm
+/// @since 0.1.0
+$nord4: #d8dee9;
+
+/// Lighter shade color of the base component color.
+///
+/// Used as a lighter background color for UI elements like status bars.
+/// Used as semi-light background depending on the theme shading design.
+///
+/// @access public
+/// @group snowstorm
+/// @see $nord4
+/// @since 0.1.0
+$nord5: #e5e9f0;
+
+/// Lighter shade color of the base component color.
+///
+/// Used for punctuations, carets and structuring characters like curly- and square brackets.
+/// In the UI scope used as background, selection- and highlight color depending on the theme shading design.
+///
+/// @access public
+/// @group snowstorm
+/// @see $nord4
+/// @since 0.1.0
+$nord6: #eceff4;
+
+/// Bluish core color.
+///
+/// Used for classes, types and documentation tags.
+///
+/// @access public
+/// @group frost
+/// @since 0.1.0
+$nord7:  #8fbcbb;
+
+/// Bluish core accent color.
+///
+/// Represents the accent color of the color palette.
+/// Main color for primary UI elements and methods/functions.
+///
+/// Can be used for
+///   - Markup quotes
+///   - Markup link URLs
+///
+/// @access public
+/// @group frost
+/// @since 0.1.0
+$nord8:  #88c0d0;
+
+/// Bluish core color.
+///
+/// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
+/// punctuations like (semi)colons,commas and braces.
+///
+/// @access public
+/// @group frost
+/// @since 0.1.0
+$nord9:  #81a1c1;
+
+/// Bluish core color.
+///
+/// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
+///
+/// @access public
+/// @group frost
+/// @since 0.1.0
+$nord10: #5e81ac;
+
+/// Colorful component color.
+///
+/// Used for errors, git/diff deletion and linter marker.
+///
+/// @access public
+/// @group aurora
+/// @since 0.1.0
+$nord11: #bf616a;
+
+/// Colorful component color.
+///
+/// Used for annotations.
+///
+/// @access public
+/// @group aurora
+/// @since 0.1.0
+$nord12: #d08770;
+
+/// Colorful component color.
+///
+/// Used for escape characters, regular expressions and markup entities.
+/// In the UI scope used for warnings and git/diff renamings.
+///
+/// @access public
+/// @group aurora
+/// @since 0.1.0
+$nord13: #ebcb8b;
+
+/// Colorful component color.
+///
+/// Main color for strings and attribute values.
+/// In the UI scope used for git/diff additions and success visualizations.
+///
+/// @access public
+/// @group aurora
+/// @since 0.1.0
+$nord14: #a3be8c;
+
+/// Colorful component color.
+///
+/// Used for numbers.
+///
+/// @access public
+/// @group aurora
+/// @since 0.1.0
+$nord15: #b48ead;

src/scss/variables.scss

@@ -1,4 +1,6 @@
-$font-family-sans-serif: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
+@import '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;
@@ -129,6 +131,52 @@ $themes: (
         warningColor: $brand-warning,
         logoSuffix: 'white',
     ),
+    nord: (
+        textColor: $nord5,
+        borderColor: $nord2,
+        backgroundColor: $nord2,
+        backgroundColorAlt: $nord1,
+        backgroundColorAlt2: $nord1,
+        scrollbarColor: $nord4,
+        scrollbarHoverColor: $nord5,
+        boxBackgroundColor: $nord2,
+        boxBackgroundHoverColor: $nord3,
+        boxBorderColor: $nord0,
+        headerBackgroundColor: $nord2,
+        headerBorderColor: $nord0,
+        headerInputBackgroundColor: $nord6,
+        headerInputBackgroundFocusColor: $nord5,
+        headerInputColor: $nord2,
+        headerInputPlaceholderColor: $nord3,
+        listItemBackgroundColor: $nord2,
+        listItemBackgroundHoverColor: $nord3,
+        listItemBorderColor: $nord0,
+        groupingsActiveColor: $nord3,
+        disabledIconColor: $nord5,
+        headingColor: $nord4,
+        headingButtonColor: $nord5,
+        headingButtonHoverColor: $nord6,
+        labelColor: $nord4,
+        mutedColor: $nord4,
+        totpStrokeColor: $nord4,
+        boxRowButtonColor: $nord4,
+        boxRowButtonHoverColor: $nord6,
+        inputBorderColor: $nord2,
+        inputBackgroundColor: $nord0,
+        inputPlaceholderColor: $nord4,
+        buttonBackgroundColor: $nord3,
+        buttonBorderColor: $nord0,
+        buttonColor: $nord6,
+        buttonPrimaryColor: $nord9,
+        buttonDangerColor: $nord11,
+        primaryColor: $nord9,
+        primaryAccentColor: $nord8,
+        dangerColor: $nord11,
+        successColor: $nord14,
+        infoColor: $nord9,
+        warningColor: $nord12,
+        logoSuffix: 'white',
+    ),
 );
 
 @mixin themify($themes: $themes) {