Desktop: Moved all themes out into their own .js theme files (#2951)

* Working on an aritim-dark theme, very WIP still

* Update aritim.js

* Added new theme "Aritim-Dark"

* removing aritim-dark "brace" theme for now

* Updating style with some changes

* Reset branch back to the original upstream state, to create a different pull-request for moving all themes outside

* Reset branch back to the original upstream state

* Moved all themes out into their own .js theme files

* Updating master to use the seperated themes stuff

* Moved themes into their own const

* Removed switch case for themes and simplified it. Thanks Laurent for the help!

ElectronClient/gui/style/theme/dark.js

@@ -0,0 +1,40 @@
+const darkStyle = {
+	backgroundColor: '#1D2024',
+	backgroundColorTransparent: 'rgba(255,255,255,0.9)',
+	oddBackgroundColor: '#dddddd',
+	color: '#dddddd',
+	colorError: 'red',
+	colorWarn: '#9A5B00',
+	colorFaded: '#777777', // For less important text
+	colorBright: '#ffffff', // For important text
+	dividerColor: '#555555',
+	selectedColor: '#333333',
+	urlColor: '#4E87EE',
+
+	backgroundColor2: '#181A1D',
+	depthColor: 'rgb(200, 200, 200, OPACITY)',
+	color2: '#ffffff',
+	selectedColor2: '#013F74',
+	colorError2: '#ff6c6c',
+
+	raisedBackgroundColor: '#474747',
+	raisedColor: '#ffffff',
+
+	warningBackgroundColor: '#CC6600',
+
+	htmlColor: 'rgb(220,220,220)',
+	htmlBackgroundColor: 'rgb(29,32,36)',
+	htmlDividerColor: '#3D444E',
+	htmlCodeColor: '#ffffff',
+	htmlLinkColor: 'rgb(166,166,255)',
+	htmlTableBackgroundColor: 'rgb(40, 41, 42)',
+	htmlCodeBackgroundColor: 'rgb(47, 48, 49)',
+	htmlCodeBorderColor: 'rgb(70, 70, 70)',
+
+	editorTheme: 'twilight',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+
+	highlightedColor: '#0066C7',
+};
+
+module.exports = darkStyle;

ElectronClient/gui/style/theme/dracula.js

@@ -0,0 +1,38 @@
+const draculaStyle = {
+	backgroundColor: '#282a36',
+	backgroundColorTransparent: 'rgba(40, 42, 54, 0.9)',
+	oddBackgroundColor: '#282a36',
+	color: '#f8f8f2', // For regular text
+	colorError: '#ff5555',
+	colorWarn: '#ffb86c',
+	colorFaded: '#6272a4', // For less important text;
+	colorBright: '#50fa7b', // For important text;
+	dividerColor: '#bd93f9',
+	selectedColor: '#44475a',
+	urlColor: '#8be9fd',
+
+	backgroundColor2: '#21222C',
+	depthColor: 'rgb(200, 200, 200, OPACITY)',
+	color2: '#bd93f9',
+	selectedColor2: '#44475a',
+	colorError2: '#ff5555',
+
+	raisedBackgroundColor: '#44475a',
+	raisedColor: '#bd93f9',
+
+	warningBackgroundColor: '#ffb86c',
+
+	htmlColor: '#f8f8f2',
+	htmlBackgroundColor: '#282a36',
+	htmlDividerColor: '#f8f8f2',
+	htmlLinkColor: '#8be9fd',
+	htmlTableBackgroundColor: '#6272a4',
+	htmlCodeBackgroundColor: '#44475a',
+	htmlCodeBorderColor: '#f8f8f2',
+	htmlCodeColor: '#50fa7b',
+
+	editorTheme: 'dracula',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+};
+
+module.exports = draculaStyle;

ElectronClient/gui/style/theme/light.js

@@ -0,0 +1,39 @@
+// This is the default theme in Joplin
+const lightStyle = {
+	backgroundColor: '#ffffff',
+	backgroundColorTransparent: 'rgba(255,255,255,0.9)',
+	oddBackgroundColor: '#dddddd',
+	color: '#222222', // For regular text
+	colorError: 'red',
+	colorWarn: '#9A5B00',
+	colorFaded: '#777777', // For less important text
+	colorBright: '#000000', // For important text
+	dividerColor: '#dddddd',
+	selectedColor: '#e5e5e5',
+	urlColor: '#155BDA',
+
+	backgroundColor2: '#162B3D',
+	depthColor: 'rgb(100, 182, 253, OPACITY)',
+	color2: '#f5f5f5',
+	selectedColor2: '#0269C2',
+	colorError2: '#ff6c6c',
+
+	raisedBackgroundColor: '#e5e5e5',
+	raisedColor: '#222222',
+
+	warningBackgroundColor: '#FFD08D',
+
+	htmlColor: '#222222',
+	htmlBackgroundColor: 'white',
+	htmlDividerColor: 'rgb(230,230,230)',
+	htmlLinkColor: 'rgb(80,130,190)',
+	htmlTableBackgroundColor: 'rgb(247, 247, 247)',
+	htmlCodeBackgroundColor: 'rgb(243, 243, 243)',
+	htmlCodeBorderColor: 'rgb(220, 220, 220)',
+	htmlCodeColor: 'rgb(0,0,0)',
+
+	editorTheme: 'chrome',
+	codeThemeCss: 'atom-one-light.css',
+};
+
+module.exports = lightStyle;

ElectronClient/gui/style/theme/solarizedDark.js

@@ -0,0 +1,38 @@
+const solarizedDarkStyle = {
+	backgroundColor: '#002b36',
+	backgroundColorTransparent: 'rgba(0, 43, 54, 0.9)',
+	oddBackgroundColor: '#073642',
+	color: '#93a1a1', // For regular text
+	colorError: '#dc322f',
+	colorWarn: '#cb4b16',
+	colorFaded: '#657b83', // For less important text;
+	colorBright: '#eee8d5', // For important text;
+	dividerColor: '#586e75',
+	selectedColor: '#073642',
+	urlColor: '#268bd2',
+
+	backgroundColor2: '#073642',
+	depthColor: 'rgb(200, 200, 200, OPACITY)',
+	color2: '#eee8d5',
+	selectedColor2: '#6c71c4',
+	colorError2: '#cb4b16',
+
+	raisedBackgroundColor: '#073642',
+	raisedColor: '#839496',
+
+	warningBackgroundColor: '#b5890055',
+
+	htmlColor: '#93a1a1',
+	htmlBackgroundColor: '#002b36',
+	htmlDividerColor: '#073642',
+	htmlLinkColor: '#268bd2',
+	htmlTableBackgroundColor: '#002b36',
+	htmlCodeBackgroundColor: '#002b36',
+	htmlCodeBorderColor: '#696969',
+	htmlCodeColor: '#fdf6e3',
+
+	editorTheme: 'solarized_dark',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+};
+
+module.exports = solarizedDarkStyle;

ElectronClient/gui/style/theme/solarizedLight.js

@@ -0,0 +1,38 @@
+const solarizedLightStyle = {
+	backgroundColor: '#fdf6e3',
+	backgroundColorTransparent: 'rgba(253, 246, 227, 0.9)',
+	oddBackgroundColor: '#eee8d5',
+	color: '#657b83', // For regular text
+	colorError: '#dc322f',
+	colorWarn: '#cb4b16',
+	colorFaded: '#839496', // For less important text;
+	colorBright: '#073642', // For important text;
+	dividerColor: '#eee8d5',
+	selectedColor: '#eee8d5',
+	urlColor: '#268bd2',
+
+	backgroundColor2: '#002b36',
+	depthColor: 'rgb(100, 182, 253, OPACITY)',
+	color2: '#eee8d5',
+	selectedColor2: '#6c71c4',
+	colorError2: '#cb4b16',
+
+	raisedBackgroundColor: '#eee8d5',
+	raisedColor: '#073642',
+
+	warningBackgroundColor: '#b5890055',
+
+	htmlColor: '#657b83',
+	htmlBackgroundColor: '#fdf6e3',
+	htmlDividerColor: '#eee8d5',
+	htmlLinkColor: '#268bd2',
+	htmlTableBackgroundColor: '#fdf6e3',
+	htmlCodeBackgroundColor: '#fdf6e3',
+	htmlCodeBorderColor: '#eee8d5',
+	htmlCodeColor: '#002b36',
+
+	editorTheme: 'solarized_light',
+	codeThemeCss: 'atom-one-light.css',
+};
+
+module.exports = solarizedLightStyle;

ElectronClient/theme.js

@@ -1,5 +1,13 @@
 const Setting = require('lib/models/Setting.js');
-const nordStyle = require('./gui/style/theme/nord');
+
+const themes = {
+	[Setting.THEME_LIGHT]: require('./gui/style/theme/light'),
+	[Setting.THEME_DARK]: require('./gui/style/theme/dark'),
+	[Setting.THEME_DRACULA]: require('./gui/style/theme/dracula'),
+	[Setting.THEME_SOLARIZED_LIGHT]: require('./gui/style/theme/solarizedLight'),
+	[Setting.THEME_SOLARIZED_DARK]: require('./gui/style/theme/solarizedDark'),
+	[Setting.THEME_NORD]: 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
@@ -73,194 +81,6 @@ globalStyle.buttonStyle = {
 	borderRadius: 4,
 };
 
-const lightStyle = {
-	backgroundColor: '#ffffff',
-	backgroundColorTransparent: 'rgba(255,255,255,0.9)',
-	oddBackgroundColor: '#dddddd',
-	color: '#222222', // For regular text
-	colorError: 'red',
-	colorWarn: '#9A5B00',
-	colorFaded: '#777777', // For less important text
-	colorBright: '#000000', // For important text
-	dividerColor: '#dddddd',
-	selectedColor: '#e5e5e5',
-	urlColor: '#155BDA',
-
-	backgroundColor2: '#162B3D',
-	depthColor: 'rgb(100, 182, 253, OPACITY)',
-	color2: '#f5f5f5',
-	selectedColor2: '#0269C2',
-	colorError2: '#ff6c6c',
-
-	raisedBackgroundColor: '#e5e5e5',
-	raisedColor: '#222222',
-
-	warningBackgroundColor: '#FFD08D',
-
-	htmlColor: '#222222',
-	htmlBackgroundColor: 'white',
-	htmlDividerColor: 'rgb(230,230,230)',
-	htmlLinkColor: 'rgb(80,130,190)',
-	htmlTableBackgroundColor: 'rgb(247, 247, 247)',
-	htmlCodeBackgroundColor: 'rgb(243, 243, 243)',
-	htmlCodeBorderColor: 'rgb(220, 220, 220)',
-	htmlCodeColor: 'rgb(0,0,0)',
-
-	editorTheme: 'chrome',
-	codeThemeCss: 'atom-one-light.css',
-};
-
-const darkStyle = {
-	backgroundColor: '#1D2024',
-	backgroundColorTransparent: 'rgba(255,255,255,0.9)',
-	oddBackgroundColor: '#dddddd',
-	color: '#dddddd',
-	colorError: 'red',
-	colorWarn: '#9A5B00',
-	colorFaded: '#777777', // For less important text
-	colorBright: '#ffffff', // For important text
-	dividerColor: '#555555',
-	selectedColor: '#333333',
-	urlColor: '#4E87EE',
-
-	backgroundColor2: '#181A1D',
-	depthColor: 'rgb(200, 200, 200, OPACITY)',
-	color2: '#ffffff',
-	selectedColor2: '#013F74',
-	colorError2: '#ff6c6c',
-
-	raisedBackgroundColor: '#474747',
-	raisedColor: '#ffffff',
-
-	warningBackgroundColor: '#CC6600',
-
-	htmlColor: 'rgb(220,220,220)',
-	htmlBackgroundColor: 'rgb(29,32,36)',
-	htmlDividerColor: '#3D444E',
-	htmlCodeColor: '#ffffff',
-	htmlLinkColor: 'rgb(166,166,255)',
-	htmlTableBackgroundColor: 'rgb(40, 41, 42)',
-	htmlCodeBackgroundColor: 'rgb(47, 48, 49)',
-	htmlCodeBorderColor: 'rgb(70, 70, 70)',
-
-	editorTheme: 'twilight',
-	codeThemeCss: 'atom-one-dark-reasonable.css',
-
-	highlightedColor: '#0066C7',
-};
-
-// Solarized Styles
-const solarizedLightStyle = {
-	backgroundColor: '#fdf6e3',
-	backgroundColorTransparent: 'rgba(253, 246, 227, 0.9)',
-	oddBackgroundColor: '#eee8d5',
-	color: '#657b83', // For regular text
-	colorError: '#dc322f',
-	colorWarn: '#cb4b16',
-	colorFaded: '#839496', // For less important text;
-	colorBright: '#073642', // For important text;
-	dividerColor: '#eee8d5',
-	selectedColor: '#eee8d5',
-	urlColor: '#268bd2',
-
-	backgroundColor2: '#002b36',
-	depthColor: 'rgb(100, 182, 253, OPACITY)',
-	color2: '#eee8d5',
-	selectedColor2: '#6c71c4',
-	colorError2: '#cb4b16',
-
-	raisedBackgroundColor: '#eee8d5',
-	raisedColor: '#073642',
-
-	warningBackgroundColor: '#b5890055',
-
-	htmlColor: '#657b83',
-	htmlBackgroundColor: '#fdf6e3',
-	htmlDividerColor: '#eee8d5',
-	htmlLinkColor: '#268bd2',
-	htmlTableBackgroundColor: '#fdf6e3',
-	htmlCodeBackgroundColor: '#fdf6e3',
-	htmlCodeBorderColor: '#eee8d5',
-	htmlCodeColor: '#002b36',
-
-	editorTheme: 'solarized_light',
-	codeThemeCss: 'atom-one-light.css',
-};
-
-const solarizedDarkStyle = {
-	backgroundColor: '#002b36',
-	backgroundColorTransparent: 'rgba(0, 43, 54, 0.9)',
-	oddBackgroundColor: '#073642',
-	color: '#93a1a1', // For regular text
-	colorError: '#dc322f',
-	colorWarn: '#cb4b16',
-	colorFaded: '#657b83', // For less important text;
-	colorBright: '#eee8d5', // For important text;
-	dividerColor: '#586e75',
-	selectedColor: '#073642',
-	urlColor: '#268bd2',
-
-	backgroundColor2: '#073642',
-	depthColor: 'rgb(200, 200, 200, OPACITY)',
-	color2: '#eee8d5',
-	selectedColor2: '#6c71c4',
-	colorError2: '#cb4b16',
-
-	raisedBackgroundColor: '#073642',
-	raisedColor: '#839496',
-
-	warningBackgroundColor: '#b5890055',
-
-	htmlColor: '#93a1a1',
-	htmlBackgroundColor: '#002b36',
-	htmlDividerColor: '#073642',
-	htmlLinkColor: '#268bd2',
-	htmlTableBackgroundColor: '#002b36',
-	htmlCodeBackgroundColor: '#002b36',
-	htmlCodeBorderColor: '#696969',
-	htmlCodeColor: '#fdf6e3',
-
-	editorTheme: 'solarized_dark',
-	codeThemeCss: 'atom-one-dark-reasonable.css',
-};
-
-const draculaStyle = {
-	backgroundColor: '#282a36',
-	backgroundColorTransparent: 'rgba(40, 42, 54, 0.9)',
-	oddBackgroundColor: '#282a36',
-	color: '#f8f8f2', // For regular text
-	colorError: '#ff5555',
-	colorWarn: '#ffb86c',
-	colorFaded: '#6272a4', // For less important text;
-	colorBright: '#50fa7b', // For important text;
-	dividerColor: '#bd93f9',
-	selectedColor: '#44475a',
-	urlColor: '#8be9fd',
-
-	backgroundColor2: '#21222C',
-	depthColor: 'rgb(200, 200, 200, OPACITY)',
-	color2: '#bd93f9',
-	selectedColor2: '#44475a',
-	colorError2: '#ff5555',
-
-	raisedBackgroundColor: '#44475a',
-	raisedColor: '#bd93f9',
-
-	warningBackgroundColor: '#ffb86c',
-
-	htmlColor: '#f8f8f2',
-	htmlBackgroundColor: '#282a36',
-	htmlDividerColor: '#f8f8f2',
-	htmlLinkColor: '#8be9fd',
-	htmlTableBackgroundColor: '#6272a4',
-	htmlCodeBackgroundColor: '#44475a',
-	htmlCodeBorderColor: '#f8f8f2',
-	htmlCodeColor: '#50fa7b',
-
-	editorTheme: 'dracula',
-	codeThemeCss: 'atom-one-dark-reasonable.css',
-};
-
 function addExtraStyles(style) {
 	style.tagStyle = {
 		fontSize: style.fontSize,
@@ -427,20 +247,7 @@ function themeStyle(theme) {
 
 	// All theme are based on the light style, and just override the
 	// relevant properties
-	output = Object.assign({}, globalStyle, fontSizes, lightStyle);
+	output = Object.assign({}, globalStyle, fontSizes, themes[Setting.THEME_LIGHT], themes[theme]);
-
-	switch (theme) {
-	case Setting.THEME_DARK :
-		output = Object.assign({}, output, darkStyle); break;
-	case Setting.THEME_SOLARIZED_LIGHT :
-		output = Object.assign({}, output, solarizedLightStyle); break;
-	case Setting.THEME_SOLARIZED_DARK :
-		output = Object.assign({}, output, solarizedDarkStyle); break;
-	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
 	// so that their definition is not split between here and the