Desktop: Resolves #1903: Add Nord theme (#2004)

code by vzsky (PR was abandoned)
closes #1903

ElectronClient/app/gui/NoteText.jsx

@@ -49,6 +49,7 @@ require('brace/theme/solarized_light');
 require('brace/theme/solarized_dark');
 require('brace/theme/twilight');
 require('brace/theme/dracula');
+require('brace/theme/chaos');
 
 const NOTE_TAG_BAR_FEATURE_ENABLED = false;
 

ElectronClient/app/gui/style/theme/nord.js

@@ -0,0 +1,84 @@
+const nord = ['#2e3440', '#3b4252', '#434c5e', '#4c566a', '#d8dee9', '#e5e9f0', '#eceff4', '#8fbcbb', '#88c0d0', '#81a1c1', '#5e81ac', '#bf616a', '#d08770', '#ebcb8b', '#a3be8c', '#b48ead'];
+
+// DOCUMENTATION of Nord as of Oct 3
+// 0 #2e3440 :     Base component color of "Polar Night".
+// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
+// 1 #3b4252 :     Lighter shade color of the base component color.
+// Used as a lighter background color for UI elements like status bars.
+// 2 #434c5e :     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.
+// 3 #4c566a :     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.
+// 4 #d8dee9 :     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.
+// 5 #e5e9f0 :     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.
+// 6 #eceff4 :     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.
+// 7 #8fbcbb :     Bluish core color.
+// Used for classes, types and documentation tags.
+// 8 #88c0d0 :     Bluish core accent color.
+// Represents the accent color of the color palette.
+// Main color for primary UI elements and methods/functions.
+// 9 #81a1c1 :     Bluish core color.
+// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
+// punctuations like (semi)colons,commas and braces.
+// 10 #5e81ac :    Bluish core color.
+// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
+// 11 #bf616a :    Colorful component color.
+// Used for errors, git/diff deletion and linter marker.
+// 12 #d08770 :    Colorful component color.
+// Used for annotations.
+// 13 #ebcb8b :    Colorful component color.
+// Used for escape characters, regular expressions and markup entities.
+// In the UI scope used for warnings and git/diff renamings.
+// 14 #a3be8c :    Colorful component color.
+// Main color for strings and attribute values.
+// In the UI scope used for git/diff additions and success visualizations.
+// 15 #b48ead :    Colorful component color.
+// Used for numbers.
+// 2e3440 === rbga(46, 52, 64, 1)
+
+const nordStyle = {
+	backgroundColor: nord[0],
+	backgroundColorTransparent: 'rgba(46, 52, 64, 0.9)',
+	oddBackgroundColor: nord[1],
+	color: nord[5], // For regular text
+	colorError: nord[11],
+	colorWarn: nord[12],
+	colorFaded: nord[4], // For less important text;
+	colorBright: nord[6], // For important text;
+	dividerColor: nord[10],
+	selectedColor: nord[9],
+	urlColor: nord[8],
+
+	backgroundColor2: nord[2],
+	depthColor: 'rgb(200, 200, 200, OPACITY)',
+	color2: nord[8],
+	selectedColor2: nord[10],
+	colorError2: nord[11],
+
+	raisedBackgroundColor: nord[2],
+	raisedColor: nord[7],
+
+	warningBackgroundColor: nord[13],
+
+	htmlColor: nord[4],
+	htmlBackgroundColor: nord[1],
+	htmlDividerColor: nord[2],
+	htmlLinkColor: nord[10],
+	htmlTableBackgroundColor: nord[0],
+	htmlCodeBackgroundColor: nord[0],
+	htmlCodeBorderColor: nord[2],
+	htmlCodeColor: nord[13],
+
+	editorTheme: 'chaos',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+};
+
+module.exports = nordStyle;

ElectronClient/app/theme.js

@@ -1,4 +1,5 @@
 const Setting = require('lib/models/Setting.js');
+const nordStyle = require('./gui/style/theme/nord');
 
 // globalStyle should be used for properties that do not change across themes
 // i.e. should not be used for colors
@@ -399,14 +400,17 @@ function themeStyle(theme) {
 	// relevant properties
 	output = Object.assign({}, globalStyle, fontSizes, lightStyle);
 
-	if (theme == Setting.THEME_DARK) {
+	switch (theme) {
-		output = Object.assign({}, output, darkStyle);
+	case Setting.THEME_DARK :
-	} else if (theme == Setting.THEME_SOLARIZED_LIGHT) {
+		output = Object.assign({}, output, darkStyle); break;
-		output = Object.assign({}, output, solarizedLightStyle);
+	case Setting.THEME_SOLARIZED_LIGHT :
-	} else if (theme == Setting.THEME_SOLARIZED_DARK) {
+		output = Object.assign({}, output, solarizedLightStyle); break;
-		output = Object.assign({}, output, solarizedDarkStyle);
+	case Setting.THEME_SOLARIZED_DARK :
-	} else if (theme == Setting.THEME_DRACULA) {
+		output = Object.assign({}, output, solarizedDarkStyle); break;
-		output = Object.assign({}, output, draculaStyle);
+	case Setting.THEME_DRACULA :
+		output = Object.assign({}, output, draculaStyle); break;
+	case Setting.THEME_NORD :
+		output = Object.assign({}, output, nordStyle); break;
 	}
 
 	// Note: All the theme specific things should go in addExtraStyles

ReactNativeClient/lib/models/Setting.js

@@ -228,6 +228,7 @@ class Setting extends BaseModel {
 						output[Setting.THEME_DRACULA] = _('Dracula');
 						output[Setting.THEME_SOLARIZED_LIGHT] = _('Solarised Light');
 						output[Setting.THEME_SOLARIZED_DARK] = _('Solarised Dark');
+						output[Setting.THEME_NORD] = _('Nord');
 					}
 					return output;
 				},
@@ -914,6 +915,7 @@ Setting.THEME_DARK = 2;
 Setting.THEME_SOLARIZED_LIGHT = 3;
 Setting.THEME_SOLARIZED_DARK = 4;
 Setting.THEME_DRACULA = 5;
+Setting.THEME_NORD = 6;
 
 Setting.FONT_DEFAULT = 0;
 Setting.FONT_MENLO = 1;