All: Refactored themes to allow using the same ones in both desktop and mobile version

Will also allow using them when exporting HTML or PDF from CLI.

ReactNativeClient/lib/themes/aritimDark.js

@@ -0,0 +1,38 @@
+const aritimStyle = {
+	appearance: 'dark',
+
+	backgroundColor: '#10151a', // Main background color
+	backgroundColorTransparent: 'rgba(16, 21, 26, 0.9)', //
+	oddBackgroundColor: '#141a21',
+	color: '#d3dae3', // For regular text (everything except notebooks)
+	colorError: '#9a2f2f',
+	colorWarn: '#d66500',
+	colorFaded: '#666a73', // For less important text (e.g. not selected menu in settings)
+	colorBright: '#d3dae3', // For important text; (e.g. bold)
+	dividerColor: '#141a21', // Borders, I wish I could remove them
+	selectedColor: '#2b5278', // Selected note
+	urlColor: '#356693', // Links to external sites (e.g. in settings)
+
+	backgroundColor2: '#141a21', // Notebooks main background
+	color2: '#d3dae3', // Notebook sidebar text color
+	selectedColor2: '#10151a', // Selected notebook (or settings icon in settings)
+	colorError2: '#9a2f2f',
+
+	raisedBackgroundColor: '#2b5278', // Table, hover
+	raisedColor: '#141a21',
+
+	warningBackgroundColor: '#9a2f2f', // Info / Warning boxes bg color
+
+	tableBackgroundColor: '#141a21', // Table (even) background color
+	codeBackgroundColor: '#141a21', // Single line code bg
+	codeBorderColor: '#141a21', // Single line code border, and tables
+	codeColor: '#005b47', // Single line code text
+
+	aceEditorTheme: 'chaos',
+	codeMirrorTheme: 'monokai',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+
+	highlightedColor: '#d3dae3',
+};
+
+module.exports = aritimStyle;

ReactNativeClient/lib/themes/dark.js

@@ -0,0 +1,38 @@
+const darkStyle = {
+	appearance: 'dark',
+
+	backgroundColor: '#1D2024',
+	backgroundColorTransparent: 'rgba(255,255,255,0.9)',
+	oddBackgroundColor: '#dddddd',
+	color: '#dddddd',
+	colorError: 'red',
+	colorWarn: '#9A5B00',
+	colorFaded: '#999999', // For less important text
+	colorBright: '#ffffff', // For important text
+	dividerColor: '#555555',
+	selectedColor: '#333333',
+	urlColor: '#4E87EE',
+
+	backgroundColor2: '#181A1D',
+	color2: '#ffffff',
+	selectedColor2: '#013F74',
+	colorError2: '#ff6c6c',
+
+	raisedBackgroundColor: '#474747',
+	raisedColor: '#ffffff',
+
+	warningBackgroundColor: '#CC6600',
+
+	codeColor: '#ffffff',
+	tableBackgroundColor: 'rgb(40, 41, 42)',
+	codeBackgroundColor: 'rgb(47, 48, 49)',
+	codeBorderColor: 'rgb(70, 70, 70)',
+
+	aceEditorTheme: 'twilight',
+	codeMirrorTheme: 'material-darker',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+
+	highlightedColor: '#0066C7',
+};
+
+module.exports = darkStyle;

ReactNativeClient/lib/themes/dracula.js

@@ -0,0 +1,36 @@
+const draculaStyle = {
+	appearance: 'dark',
+
+	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',
+	color2: '#bd93f9',
+	selectedColor2: '#44475a',
+	colorError2: '#ff5555',
+
+	raisedBackgroundColor: '#44475a',
+	raisedColor: '#bd93f9',
+
+	warningBackgroundColor: '#ffb86c',
+
+	tableBackgroundColor: '#6272a4',
+	codeBackgroundColor: '#44475a',
+	codeBorderColor: '#f8f8f2',
+	codeColor: '#50fa7b',
+
+	aceEditorTheme: 'dracula',
+	codeMirrorTheme: 'dracula',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+};
+
+module.exports = draculaStyle;

ReactNativeClient/lib/themes/light.js

@@ -0,0 +1,37 @@
+// This is the default theme in Joplin
+const lightStyle = {
+	appearance: 'light',
+
+	backgroundColor: '#ffffff',
+	backgroundColorTransparent: 'rgba(255,255,255,0.9)',
+	oddBackgroundColor: '#dddddd',
+	color: '#555555', // 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',
+	color2: '#f5f5f5',
+	selectedColor2: '#0269C2',
+	colorError2: '#ff6c6c',
+
+	raisedBackgroundColor: '#e5e5e5',
+	raisedColor: '#222222',
+
+	warningBackgroundColor: '#FFD08D',
+
+	tableBackgroundColor: 'rgb(247, 247, 247)',
+	codeBackgroundColor: 'rgb(243, 243, 243)',
+	codeBorderColor: 'rgb(220, 220, 220)',
+	codeColor: 'rgb(0,0,0)',
+
+	aceEditorTheme: 'chrome',
+	codeMirrorTheme: 'default',
+	codeThemeCss: 'atom-one-light.css',
+};
+
+module.exports = lightStyle;

ReactNativeClient/lib/themes/nord.js

@@ -0,0 +1,82 @@
+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 = {
+	appearance: 'dark',
+
+	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],
+	color2: nord[8],
+	selectedColor2: nord[10],
+	colorError2: nord[11],
+
+	raisedBackgroundColor: nord[2],
+	raisedColor: nord[7],
+
+	warningBackgroundColor: nord[13],
+
+	tableBackgroundColor: nord[0],
+	codeBackgroundColor: nord[0],
+	codeBorderColor: nord[2],
+	codeColor: nord[13],
+
+	aceEditorTheme: 'terminal',
+	codeMirrorTheme: 'nord',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+};
+
+module.exports = nordStyle;

ReactNativeClient/lib/themes/oledDark.js

@@ -0,0 +1,20 @@
+const darkBase = require('./dark');
+
+module.exports = Object.assign({}, darkBase, {
+	appearance: 'dark',
+	backgroundColor: '#000000',
+	color: '#dddddd',
+	colorFaded: '#777777',
+	dividerColor: '#3D444E',
+	selectedColor: '#333333',
+	urlColor: 'rgb(166,166,255)',
+	codeColor: '#ffffff',
+	raisedBackgroundColor: '#0F2051',
+	raisedColor: '#788BC3',
+	raisedHighlightedColor: '#ffffff',
+	tableBackgroundColor: 'rgb(0, 0, 0)',
+	codeBackgroundColor: 'rgb(47, 48, 49)',
+	codeBorderColor: 'rgb(70, 70, 70)',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+	colorBright: 'rgb(220,220,220)',
+});

ReactNativeClient/lib/themes/solarizedDark.js

@@ -0,0 +1,36 @@
+const solarizedDarkStyle = {
+	appearance: 'dark',
+
+	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',
+	color2: '#eee8d5',
+	selectedColor2: '#6c71c4',
+	colorError2: '#cb4b16',
+
+	raisedBackgroundColor: '#073642',
+	raisedColor: '#839496',
+
+	warningBackgroundColor: '#b5890055',
+
+	tableBackgroundColor: '#002b36',
+	codeBackgroundColor: '#002b36',
+	codeBorderColor: '#696969',
+	codeColor: '#fdf6e3',
+
+	aceEditorTheme: 'twilight',
+	codeMirrorTheme: 'solarized dark',
+	codeThemeCss: 'atom-one-dark-reasonable.css',
+};
+
+module.exports = solarizedDarkStyle;

ReactNativeClient/lib/themes/solarizedLight.js

@@ -0,0 +1,36 @@
+const solarizedLightStyle = {
+	appearance: 'light',
+
+	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',
+	color2: '#eee8d5',
+	selectedColor2: '#6c71c4',
+	colorError2: '#cb4b16',
+
+	raisedBackgroundColor: '#eee8d5',
+	raisedColor: '#073642',
+
+	warningBackgroundColor: '#b5890055',
+
+	tableBackgroundColor: '#fdf6e3',
+	codeBackgroundColor: '#fdf6e3',
+	codeBorderColor: '#eee8d5',
+	codeColor: '#002b36',
+
+	aceEditorTheme: 'tomorrow',
+	codeMirrorTheme: 'solarized light',
+	codeThemeCss: 'atom-one-light.css',
+};
+
+module.exports = solarizedLightStyle;