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/components/base-screen.js

@@ -1,27 +1,11 @@
 const React = require('react');
 
 const { StyleSheet } = require('react-native');
-const { globalStyle, themeStyle } = require('lib/components/global-style.js');
-
-const styleObject_ = {
-	screen: {
-		flex: 1,
-		backgroundColor: globalStyle.backgroundColor,
-	},
-};
-
-const styles_ = StyleSheet.create(styleObject_);
+const { themeStyle } = require('lib/components/global-style.js');
 
 const rootStyles_ = {};
 
 class BaseScreenComponent extends React.Component {
-	styles() {
-		return styles_;
-	}
-
-	styleObject() {
-		return styleObject_;
-	}
 
 	rootStyle(themeId) {
 		const theme = themeStyle(themeId);

ReactNativeClient/lib/components/global-style.js

@@ -1,56 +1,27 @@
 const Setting = require('lib/models/Setting.js');
 const { Platform } = require('react-native');
+const { themeById } = require('lib/theme');
 
-const globalStyle = {
+const baseStyle = {
+	appearance: 'light',
 	fontSize: 16,
+	noteViewerFontSize: 16,
 	margin: 15, // No text and no interactive component should be within this margin
 	itemMarginTop: 10,
 	itemMarginBottom: 10,
-	backgroundColor: '#ffffff',
-	color: '#555555', // For regular text
-	colorError: 'red',
-	colorWarn: '#9A5B00',
-	colorFaded: '#777777', // For less important text
 	fontSizeSmaller: 14,
-	dividerColor: '#dddddd',
-	strongDividerColor: '#aaaaaa',
-	selectedColor: '#e5e5e5',
-	headerBackgroundColor: '#F0F0F0',
 	disabledOpacity: 0.2,
-	colorUrl: '#7B81FF',
-	textSelectionColor: '#0096FF',
-	appearance: 'light',
-
-	raisedBackgroundColor: '#0080EF',
-	raisedColor: '#003363',
-	raisedHighlightedColor: '#ffffff',
-
-	warningBackgroundColor: '#FFD08D',
-
-	// For WebView - must correspond to the properties above
-	htmlFontSize: '16px',
-	htmlColor: '#222222',
-	htmlBackgroundColor: 'white',
-	htmlDividerColor: 'rgb(230,230,230)',
-	htmlLinkColor: 'rgb(80,130,190)',
-	htmlLineHeight: '1.6em',
-
-	htmlCodeBackgroundColor: 'rgb(243, 243, 243)',
-	htmlCodeBorderColor: 'rgb(220, 220, 220)',
-	htmlCodeColor: 'rgb(0,0,0)',
-
-	codeThemeCss: 'atom-one-light.css',
+	lineHeight: '1.6em',
 };
 
-globalStyle.marginRight = globalStyle.margin;
-globalStyle.marginLeft = globalStyle.margin;
-globalStyle.marginTop = globalStyle.margin;
-globalStyle.marginBottom = globalStyle.margin;
-globalStyle.htmlMarginLeft = `${((globalStyle.marginLeft / 10) * 0.6).toFixed(2)}em`;
-
 const themeCache_ = {};
 
 function addExtraStyles(style) {
+	style.marginRight = style.margin;
+	style.marginLeft = style.margin;
+	style.marginTop = style.margin;
+	style.marginBottom = style.margin;
+
 	style.icon = {
 		color: style.color,
 		fontSize: 30,
@@ -60,7 +31,7 @@ function addExtraStyles(style) {
 		color: style.color,
 		backgroundColor: style.backgroundColor,
 		borderBottomWidth: 1,
-		borderColor: style.strongDividerColor,
+		borderColor: style.dividerColor,
 		paddingBottom: 0,
 	};
 
@@ -82,7 +53,7 @@ function addExtraStyles(style) {
 	};
 
 	style.urlText = {
-		color: style.colorUrl,
+		color: style.urlColor,
 		fontSize: style.fontSize,
 	};
 
@@ -123,80 +94,12 @@ function themeStyle(theme) {
 		theme = Setting.THEME_LIGHT;
 	}
 
-	if (themeCache_[theme]) return themeCache_[theme];
+	const cacheKey = [theme].join('-');
+	if (themeCache_[cacheKey]) return themeCache_[cacheKey];
 
-	const output = Object.assign({}, globalStyle);
-	if (theme == Setting.THEME_LIGHT) {
-		return addExtraStyles(output);
-	} else if (theme == Setting.THEME_OLED_DARK) {
-		output.backgroundColor = '#000000';
-		output.color = '#dddddd';
-		output.colorFaded = '#777777';
-		output.dividerColor = '#555555';
-		output.strongDividerColor = '#888888';
-		output.selectedColor = '#333333';
-		output.textSelectionColor = '#00AEFF';
-		output.appearance = 'dark';
-		output.headerBackgroundColor = '#2D3136';
-
-		output.raisedBackgroundColor = '#0F2051';
-		output.raisedColor = '#788BC3';
-		output.raisedHighlightedColor = '#ffffff';
-
-		output.htmlColor = 'rgb(220,220,220)';
-		output.htmlBackgroundColor = 'rgb(0,0,0)';
-		output.htmlLinkColor = 'rgb(166,166,255)';
-
-		output.htmlDividerColor = '#3D444E';
-		output.htmlLinkColor = 'rgb(166,166,255)';
-		output.htmlCodeColor = '#ffffff';
-		output.htmlTableBackgroundColor = 'rgb(0, 0, 0)';
-		output.htmlCodeBackgroundColor = 'rgb(47, 48, 49)';
-		output.htmlCodeBorderColor = 'rgb(70, 70, 70)';
-
-		output.codeThemeCss = 'atom-one-dark-reasonable.css';
-
-		output.colorUrl = '#7B81FF';
-
-		output.colorBright = 'rgb(220,220,220)';
-
-		themeCache_[theme] = output;
-		return addExtraStyles(themeCache_[theme]);
-	}
-
-	output.backgroundColor = '#1D2024';
-	output.color = '#dddddd';
-	output.colorFaded = '#777777';
-	output.dividerColor = '#555555';
-	output.strongDividerColor = '#888888';
-	output.selectedColor = '#333333';
-	output.textSelectionColor = '#00AEFF';
-	output.appearance = 'dark';
-	output.headerBackgroundColor = '#2D3136';
-
-	output.raisedBackgroundColor = '#0F2051';
-	output.raisedColor = '#788BC3';
-	output.raisedHighlightedColor = '#ffffff';
-
-	output.htmlColor = 'rgb(220,220,220)';
-	output.htmlBackgroundColor = 'rgb(29,32,36)';
-	output.htmlLinkColor = 'rgb(166,166,255)';
-
-	output.htmlDividerColor = '#3D444E';
-	output.htmlLinkColor = 'rgb(166,166,255)';
-	output.htmlCodeColor = '#ffffff';
-	output.htmlTableBackgroundColor = 'rgb(40, 41, 42)';
-	output.htmlCodeBackgroundColor = 'rgb(47, 48, 49)';
-	output.htmlCodeBorderColor = 'rgb(70, 70, 70)';
-
-	output.codeThemeCss = 'atom-one-dark-reasonable.css';
-
-	output.colorUrl = '#7B81FF';
-
-	output.colorBright = 'rgb(220,220,220)';
-
-	themeCache_[theme] = output;
-	return addExtraStyles(themeCache_[theme]);
+	const output = Object.assign({}, baseStyle, themeById(theme));
+	themeCache_[cacheKey] = addExtraStyles(output);
+	return themeCache_[cacheKey];
 }
 
-module.exports = { globalStyle, themeStyle, editorFont };
+module.exports = { themeStyle, editorFont };

ReactNativeClient/lib/components/screen-header.js

@@ -39,7 +39,7 @@ class ScreenHeaderComponent extends React.PureComponent {
 		const styleObject = {
 			container: {
 				flexDirection: 'column',
-				backgroundColor: theme.raisedBackgroundColor,
+				backgroundColor: theme.backgroundColor2,
 				alignItems: 'center',
 				shadowColor: '#000000',
 				elevation: 5,
@@ -52,7 +52,7 @@ class ScreenHeaderComponent extends React.PureComponent {
 			sideMenuButton: {
 				flex: 1,
 				alignItems: 'center',
-				backgroundColor: theme.raisedBackgroundColor,
+				backgroundColor: theme.backgroundColor2,
 				paddingLeft: theme.marginLeft,
 				paddingRight: 5,
 				marginRight: 2,
@@ -61,7 +61,7 @@ class ScreenHeaderComponent extends React.PureComponent {
 			},
 			iconButton: {
 				flex: 1,
-				backgroundColor: theme.raisedBackgroundColor,
+				backgroundColor: theme.backgroundColor2,
 				paddingLeft: 15,
 				paddingRight: 15,
 				paddingTop: PADDING_V,
@@ -73,18 +73,18 @@ class ScreenHeaderComponent extends React.PureComponent {
 				alignItems: 'center',
 				padding: 10,
 				borderWidth: 1,
-				borderColor: theme.raisedHighlightedColor,
+				borderColor: theme.colorBright2,
 				borderRadius: 4,
 				marginRight: 8,
 			},
 			saveButtonText: {
 				textAlignVertical: 'center',
-				color: theme.raisedHighlightedColor,
+				color: theme.colorBright2,
 				fontWeight: 'bold',
 			},
 			savedButtonIcon: {
 				fontSize: 20,
-				color: theme.raisedHighlightedColor,
+				color: theme.colorBright2,
 				width: 18,
 				height: 18,
 			},
@@ -96,11 +96,11 @@ class ScreenHeaderComponent extends React.PureComponent {
 				fontSize: 30,
 				paddingLeft: 10,
 				paddingRight: theme.marginRight,
-				color: theme.raisedColor,
+				color: theme.color2,
 				fontWeight: 'bold',
 			},
 			contextMenu: {
-				backgroundColor: theme.raisedBackgroundColor,
+				backgroundColor: theme.backgroundColor2,
 			},
 			contextMenuItem: {
 				backgroundColor: theme.backgroundColor,
@@ -120,7 +120,7 @@ class ScreenHeaderComponent extends React.PureComponent {
 				flex: 1,
 				textAlignVertical: 'center',
 				marginLeft: 10,
-				color: theme.raisedHighlightedColor,
+				color: theme.colorBright2,
 				fontWeight: 'bold',
 				fontSize: theme.fontSize,
 				paddingTop: 15,
@@ -136,7 +136,7 @@ class ScreenHeaderComponent extends React.PureComponent {
 		styleObject.topIcon = Object.assign({}, theme.icon);
 		styleObject.topIcon.flex = 1;
 		styleObject.topIcon.textAlignVertical = 'center';
-		styleObject.topIcon.color = theme.raisedColor;
+		styleObject.topIcon.color = theme.colorBright2;
 
 		styleObject.backButton = Object.assign({}, styleObject.iconButton);
 		styleObject.backButton.marginRight = 1;
@@ -376,7 +376,7 @@ class ScreenHeaderComponent extends React.PureComponent {
 							backgroundColor: theme.backgroundColor,
 						}}
 						headerStyle={{
-							color: theme.raisedHighlightedColor,
+							color: theme.colorBright2,
 							fontSize: theme.fontSize,
 							opacity: disabled ? theme.disabledOpacity : 1,
 						}}

ReactNativeClient/lib/components/screens/config.js

@@ -222,7 +222,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
 		});
 
 		styles.settingControl.borderBottomWidth = 1;
-		styles.settingControl.borderBottomColor = theme.strongDividerColor;
+		styles.settingControl.borderBottomColor = theme.dividerColor;
 
 		styles.switchSettingText = Object.assign({}, styles.settingText);
 		styles.switchSettingText.width = '80%';
@@ -388,7 +388,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
 						<Text key="label" style={this.styles().switchSettingText}>
 							{md.label()}
 						</Text>
-						<Switch key="control" style={this.styles().switchSettingControl} trackColor={{ false: theme.strongDividerColor }} value={value} onValueChange={value => updateSettingValue(key, value)} />
+						<Switch key="control" style={this.styles().switchSettingControl} trackColor={{ false: theme.dividerColor }} value={value} onValueChange={value => updateSettingValue(key, value)} />
 					</View>
 					{descriptionComp}
 				</View>

ReactNativeClient/lib/components/screens/encryption-config.js

@@ -112,7 +112,7 @@ class EncryptionConfigScreenComponent extends BaseScreenComponent {
 
 		const inputStyle = { flex: 1, marginRight: 10, color: theme.color };
 		inputStyle.borderBottomWidth = 1;
-		inputStyle.borderBottomColor = theme.strongDividerColor;
+		inputStyle.borderBottomColor = theme.dividerColor;
 
 		return (
 			<View key={mk.id}>

ReactNativeClient/lib/components/screens/folder.js

@@ -107,7 +107,7 @@ class FolderScreenComponent extends BaseScreenComponent {
 		return (
 			<View style={this.rootStyle(this.props.theme).root}>
 				<ScreenHeader title={_('Edit notebook')} showSaveButton={true} saveButtonDisabled={saveButtonDisabled} onSaveButtonPress={() => this.saveFolderButton_press()} showSideMenuButton={false} showSearchButton={false} />
-				<TextInput placeholder={_('Enter notebook title')} placeholderTextColor={theme.colorFaded} underlineColorAndroid={theme.strongDividerColor} selectionColor={theme.textSelectionColor} keyboardAppearance={theme.keyboardAppearance} style={this.styles().textInput} autoFocus={true} value={this.state.folder.title} onChangeText={text => this.title_changeText(text)} />
+				<TextInput placeholder={_('Enter notebook title')} placeholderTextColor={theme.colorFaded} underlineColorAndroid={theme.dividerColor} selectionColor={theme.textSelectionColor} keyboardAppearance={theme.keyboardAppearance} style={this.styles().textInput} autoFocus={true} value={this.state.folder.title} onChangeText={text => this.title_changeText(text)} />
 				<dialogs.DialogBox
 					ref={dialogbox => {
 						this.dialogbox = dialogbox;

ReactNativeClient/lib/components/screens/note.js

@@ -269,7 +269,7 @@ class NoteScreenComponent extends BaseScreenComponent {
 			},
 			markdownButtons: {
 				borderColor: theme.dividerColor,
-				color: theme.htmlLinkColor,
+				color: theme.urlColor,
 			},
 		};
 

ReactNativeClient/lib/components/screens/status.js

@@ -1,20 +1,13 @@
 const React = require('react');
 
-const { StyleSheet, View, Text, Button, FlatList } = require('react-native');
+const { View, Text, Button, FlatList } = require('react-native');
 const Setting = require('lib/models/Setting.js');
 const { connect } = require('react-redux');
 const { ScreenHeader } = require('lib/components/screen-header.js');
 const { ReportService } = require('lib/services/report.js');
 const { _ } = require('lib/locale.js');
 const { BaseScreenComponent } = require('lib/components/base-screen.js');
-const { globalStyle, themeStyle } = require('lib/components/global-style.js');
-
-const styles = StyleSheet.create({
-	body: {
-		flex: 1,
-		margin: globalStyle.margin,
-	},
-});
+const { themeStyle } = require('lib/components/global-style.js');
 
 class StatusScreenComponent extends BaseScreenComponent {
 	static navigationOptions() {
@@ -38,6 +31,16 @@ class StatusScreenComponent extends BaseScreenComponent {
 		this.setState({ report: report });
 	}
 
+	styles() {
+		const theme = themeStyle(this.props.theme);
+		return {
+			body: {
+				flex: 1,
+				margin: theme.margin,
+			},
+		};
+	}
+
 	render() {
 		const theme = themeStyle(this.props.theme);
 
@@ -137,7 +140,7 @@ class StatusScreenComponent extends BaseScreenComponent {
 		return (
 			<View style={this.rootStyle(this.props.theme).root}>
 				<ScreenHeader title={_('Status')} />
-				<View style={styles.body}>{body}</View>
+				<View style={this.styles().body}>{body}</View>
 				<Button title={_('Refresh')} onPress={() => this.resfreshScreen()} />
 			</View>
 		);

ReactNativeClient/lib/components/side-menu-content-note.js

@@ -3,7 +3,7 @@ const Component = React.Component;
 const { TouchableOpacity, Text, StyleSheet, ScrollView, View } = require('react-native');
 const { connect } = require('react-redux');
 const Icon = require('react-native-vector-icons/Ionicons').default;
-const { globalStyle, themeStyle } = require('lib/components/global-style.js');
+const { themeStyle } = require('lib/components/global-style.js');
 
 Icon.loadFont();
 
@@ -50,7 +50,8 @@ class SideMenuContentNoteComponent extends Component {
 	}
 
 	renderDivider(key) {
-		return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: globalStyle.dividerColor }} key={key}></View>;
+		const theme = themeStyle(this.props.theme);
+		return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: theme.dividerColor }} key={key}></View>;
 	}
 
 	renderSideBarButton(key, title, iconName, onPressHandler) {
@@ -89,7 +90,7 @@ class SideMenuContentNoteComponent extends Component {
 		const style = {
 			flex: 1,
 			borderRightWidth: 1,
-			borderRightColor: globalStyle.dividerColor,
+			borderRightColor: theme.dividerColor,
 			backgroundColor: theme.backgroundColor,
 			paddingTop: 10,
 		};

ReactNativeClient/lib/components/side-menu-content.js

@@ -7,7 +7,7 @@ const Folder = require('lib/models/Folder.js');
 const { Synchronizer } = require('lib/synchronizer.js');
 const NavService = require('lib/services/NavService.js');
 const { _ } = require('lib/locale.js');
-const { globalStyle, themeStyle } = require('lib/components/global-style.js');
+const { themeStyle } = require('lib/components/global-style.js');
 const shared = require('lib/components/shared/side-menu-shared.js');
 
 Icon.loadFont();
@@ -298,7 +298,8 @@ class SideMenuContentComponent extends Component {
 	}
 
 	makeDivider(key) {
-		return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: globalStyle.dividerColor }} key={key}></View>;
+		const theme = themeStyle(this.props.theme);
+		return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: theme.dividerColor }} key={key}></View>;
 	}
 
 	renderBottomPanel() {
@@ -354,7 +355,7 @@ class SideMenuContentComponent extends Component {
 
 		// HACK: inner height of ScrollView doesn't appear to be calculated correctly when
 		// using padding. So instead creating blank elements for padding bottom and top.
-		items.push(<View style={{ height: globalStyle.marginTop }} key="bottom_top_hack" />);
+		items.push(<View style={{ height: theme.marginTop }} key="bottom_top_hack" />);
 
 		items.push(this.renderSideBarButton('all_notes', _('All notes'), 'md-document', this.allNotesButton_press, this.props.notesParentType === 'SmartFilter'));
 
@@ -371,7 +372,7 @@ class SideMenuContentComponent extends Component {
 		const style = {
 			flex: 1,
 			borderRightWidth: 1,
-			borderRightColor: globalStyle.dividerColor,
+			borderRightColor: theme.dividerColor,
 			backgroundColor: theme.backgroundColor,
 		};
 

ReactNativeClient/lib/joplin-renderer/MdToHtml/rules/checkbox.ts

@@ -60,7 +60,7 @@ pluginAssets[2] = function(theme:any) {
 					height: 1em;
 					margin-left: -1.3em;
 					position: absolute;
-					color: ${theme.htmlColor};
+					color: ${theme.color};
 				}
 
 				.joplin-checklist li:not(.checked)::before {

ReactNativeClient/lib/joplin-renderer/defaultNoteStyle.js

@@ -1,18 +1,18 @@
 module.exports = {
-	htmlFontSize: '15px',
-	htmlColor: '#222222',
-	htmlLineHeight: '1.6em',
-	htmlBackgroundColor: 'white',
+	fontSize: 15,
+	color: '#222222',
+	lineHeight: '1.6em',
+	backgroundColor: 'white',
 	paddingBottom: 3,
 	colorBright: '#000000', // For important text
-	htmlCodeBorderColor: 'rgb(220, 220, 220)',
-	htmlCodeBackgroundColor: 'rgb(243, 243, 243)',
-	htmlDividerColor: 'rgb(230,230,230)',
-	htmlLinkColor: 'rgb(80,130,190)',
-	htmlTableBackgroundColor: 'rgb(247, 247, 247)',
+	codeBorderColor: 'rgb(220, 220, 220)',
+	codeBackgroundColor: 'rgb(243, 243, 243)',
+	dividerColor: 'rgb(230,230,230)',
+	urlColor: 'rgb(80,130,190)',
+	tableBackgroundColor: 'rgb(247, 247, 247)',
 	raisedBackgroundColor: '#e5e5e5',
-	htmlCodeColor: 'rgb(0,0,0)',
-	htmlCodeFontSize: '.9em',
+	codeColor: 'rgb(0,0,0)',
+	codeFontSize: '.9em',
 	bodyPaddingTop: '0',
 	bodyPaddingBottom: '0',
 

ReactNativeClient/lib/joplin-renderer/noteStyle.js

@@ -19,11 +19,11 @@ module.exports = function(theme) {
 		b,strong{font-weight:bolder}small{font-size:80%}img{border-style:none}
 
 		body {
-			font-size: ${theme.htmlFontSize};
-			color: ${theme.htmlColor};
+			font-size: ${theme.noteViewerFontSize};
+			color: ${theme.color};
 			word-wrap: break-word;
-			line-height: ${theme.htmlLineHeight};
-			background-color: ${theme.htmlBackgroundColor};
+			line-height: ${theme.lineHeight};
+			background-color: ${theme.backgroundColor};
 			font-family: ${fontFamily};
 			padding-bottom: ${formatCssSize(theme.bodyPaddingBottom)};
 			padding-top: ${formatCssSize(theme.bodyPaddingTop)};
@@ -32,11 +32,11 @@ module.exports = function(theme) {
 			color: ${theme.colorBright};
 		}
 		kbd {
-			border: 1px solid ${theme.htmlCodeBorderColor};
-			box-shadow: inset 0 -1px 0 ${theme.htmlCodeBorderColor};
+			border: 1px solid ${theme.codeBorderColor};
+			box-shadow: inset 0 -1px 0 ${theme.codeBorderColor};
 			padding: 2px 4px;
 			border-radius: 3px;
-			background-color: ${theme.htmlCodeBackgroundColor};
+			background-color: ${theme.codeBackgroundColor};
 		}
 		::-webkit-scrollbar {
 			width: 7px;
@@ -85,7 +85,7 @@ module.exports = function(theme) {
 		h1 {
 			font-size: 1.5em;
 			font-weight: bold;
-			border-bottom: 1px solid ${theme.htmlDividerColor};
+			border-bottom: 1px solid ${theme.dividerColor};
 			padding-bottom: .3em;
 		}
 		h2 {
@@ -107,11 +107,11 @@ module.exports = function(theme) {
 			margin-bottom: 0.8em;
 			line-height: 1.5em;
 			padding-bottom: .35em;
-			border-bottom: 1px solid ${theme.htmlDividerColor};
+			border-bottom: 1px solid ${theme.dividerColor};
 		}
 
 		a {
-			color: ${theme.htmlLinkColor};
+			color: ${theme.urlColor};
 		}
 		ul, ol {
 			padding-left: 0;
@@ -132,7 +132,7 @@ module.exports = function(theme) {
 			width: 1.2em;
 			height: 1.4em;
 			margin-right: 0.4em;
-			background-color:  ${theme.htmlLinkColor};
+			background-color:  ${theme.urlColor};
 		}
     /* These icons are obtained from the wonderful ForkAwesome project by copying the src svgs 
      * into the css classes below.
@@ -193,7 +193,7 @@ module.exports = function(theme) {
       -webkit-mask-repeat: no-repeat;
 		}
 		blockquote {
-			border-left: 4px solid ${theme.htmlCodeBorderColor};
+			border-left: 4px solid ${theme.codeBorderColor};
 			padding-left: 1.2em;
 			margin-left: 0;
 			opacity: .7;
@@ -203,34 +203,34 @@ module.exports = function(theme) {
 		table {
 			text-align: left;
 			border-collapse: collapse;
-			border: 1px solid ${theme.htmlCodeBorderColor};
-			background-color: ${theme.htmlBackgroundColor};
+			border: 1px solid ${theme.codeBorderColor};
+			background-color: ${theme.backgroundColor};
 		}
 
 		.jop-tinymce table td, .jop-tinymce table th,
 		table td, th {
 			text-align: left;
 			padding: .5em 1em .5em 1em;
-			font-size: ${theme.htmlFontSize};
-			color: ${theme.htmlColor};
+			font-size: ${theme.noteViewerFontSize};
+			color: ${theme.color};
 			font-family: ${fontFamily};
 		}
 
 		.jop-tinymce table td,
 		table td {
-			border: 1px solid ${theme.htmlCodeBorderColor};
+			border: 1px solid ${theme.codeBorderColor};
 		}
 
 		.jop-tinymce table th,
 		table th {
-			border: 1px solid ${theme.htmlCodeBorderColor};
-			border-bottom: 2px solid ${theme.htmlCodeBorderColor};
-			background-color: ${theme.htmlTableBackgroundColor};
+			border: 1px solid ${theme.codeBorderColor};
+			border-bottom: 2px solid ${theme.codeBorderColor};
+			background-color: ${theme.tableBackgroundColor};
 		}
 
 		.jop-tinymce table tr:nth-child(even),
 		table tr:nth-child(even) {
-			background-color: ${theme.htmlTableBackgroundColor};
+			background-color: ${theme.tableBackgroundColor};
 		}
 
 		.jop-tinymce table tr:hover,
@@ -240,7 +240,7 @@ module.exports = function(theme) {
 
 		hr {
 			border: none;
-			border-bottom: 2px solid ${theme.htmlDividerColor};
+			border-bottom: 2px solid ${theme.dividerColor};
 		}
 		img {
 			max-width: 100%;
@@ -249,13 +249,13 @@ module.exports = function(theme) {
 		
 		.inline-code,
 		.mce-content-body code {
-			border: 1px solid ${theme.htmlCodeBorderColor};
-			background-color: ${theme.htmlCodeBackgroundColor};
+			border: 1px solid ${theme.codeBorderColor};
+			background-color: ${theme.codeBackgroundColor};
 			padding-right: .2em;
 			padding-left: .2em;
 			border-radius: .25em;
-			color: ${theme.htmlCodeColor};
-			font-size: ${theme.htmlCodeFontSize};
+			color: ${theme.codeColor};
+			font-size: ${theme.codeFontSize};
 		}
 
 		.highlighted-keyword {

ReactNativeClient/lib/models/Setting.js

@@ -50,14 +50,12 @@ class Setting extends BaseModel {
 			const output = {};
 			output[Setting.THEME_LIGHT] = _('Light');
 			output[Setting.THEME_DARK] = _('Dark');
-			if (platform !== mobilePlatform) {
-				output[Setting.THEME_DRACULA] = _('Dracula');
-				output[Setting.THEME_SOLARIZED_LIGHT] = _('Solarised Light');
-				output[Setting.THEME_SOLARIZED_DARK] = _('Solarised Dark');
-				output[Setting.THEME_NORD] = _('Nord');
-			} else {
-				output[Setting.THEME_OLED_DARK] = _('OLED Dark');
-			}
+			output[Setting.THEME_DRACULA] = _('Dracula');
+			output[Setting.THEME_SOLARIZED_LIGHT] = _('Solarised Light');
+			output[Setting.THEME_SOLARIZED_DARK] = _('Solarised Dark');
+			output[Setting.THEME_NORD] = _('Nord');
+			output[Setting.THEME_ARITIM_DARK] = _('Aritim Dark');
+			output[Setting.THEME_OLED_DARK] = _('OLED Dark');
 			return output;
 		};
 

ReactNativeClient/lib/services/InteropService_Exporter_Html.js

@@ -5,7 +5,7 @@ const Folder = require('lib/models/Folder');
 const Note = require('lib/models/Note');
 const Setting = require('lib/models/Setting');
 const { shim } = require('lib/shim');
-const { themeStyle } = require('../../theme.js');
+const { themeStyle } = require('lib/theme');
 const { dirname } = require('lib/path-utils.js');
 const { escapeHtml } = require('lib/string-utils.js');
 const markupLanguageUtils = require('lib/markupLanguageUtils');

ReactNativeClient/lib/theme.js

@@ -0,0 +1,354 @@
+const Setting = require('lib/models/Setting.js');
+const Color = require('color');
+
+const themes = {
+	[Setting.THEME_LIGHT]: require('./themes/light'),
+	[Setting.THEME_DARK]: require('./themes/dark'),
+	[Setting.THEME_DRACULA]: require('./themes/dracula'),
+	[Setting.THEME_SOLARIZED_LIGHT]: require('./themes/solarizedLight'),
+	[Setting.THEME_SOLARIZED_DARK]: require('./themes/solarizedDark'),
+	[Setting.THEME_NORD]: require('./themes/nord'),
+	[Setting.THEME_ARITIM_DARK]: require('./themes/aritimDark'),
+	[Setting.THEME_OLED_DARK]: require('./themes/oledDark'),
+};
+
+function themeById(themeId) {
+	if (!themes[themeId]) throw new Error(`Invalid theme ID: ${themeId}`);
+	const output = Object.assign({}, themes[themeId]);
+
+	if (!output.headerBackgroundColor) {
+		output.headerBackgroundColor = output.appearance === 'light' ? '#F0F0F0' : '#2D3136';
+	}
+
+	if (!output.textSelectionColor) {
+		output.textSelectionColor = output.appearance === 'light' ? '#0096FF' : '#00AEFF';
+	}
+
+	if (!output.colorBright2) {
+		output.colorBright2 = output.appearance === 'light' ? '#ffffff' : '#ffffff';
+	}
+
+	return output;
+}
+
+// globalStyle should be used for properties that do not change across themes
+// i.e. should not be used for colors
+const globalStyle = {
+	fontFamily: 'sans-serif',
+	margin: 15, // No text and no interactive component should be within this margin
+	itemMarginTop: 10,
+	itemMarginBottom: 10,
+	disabledOpacity: 0.3,
+	buttonMinWidth: 50,
+	buttonMinHeight: 30,
+	editorFontSize: 12,
+	textAreaLineHeight: 17,
+	lineHeight: '1.6em',
+	headerHeight: 35,
+	headerButtonHPadding: 6,
+	toolbarHeight: 35,
+	appearance: 'light',
+};
+
+globalStyle.marginRight = globalStyle.margin;
+globalStyle.marginLeft = globalStyle.margin;
+globalStyle.marginTop = globalStyle.margin;
+globalStyle.marginBottom = globalStyle.margin;
+
+globalStyle.icon = {
+	fontSize: 30,
+};
+
+globalStyle.lineInput = {
+	fontFamily: globalStyle.fontFamily,
+	maxHeight: 22,
+	height: 22,
+	paddingLeft: 5,
+};
+
+globalStyle.headerStyle = {
+	fontFamily: globalStyle.fontFamily,
+};
+
+globalStyle.inputStyle = {
+	border: '1px solid',
+	height: 24,
+	maxHeight: 24,
+	paddingLeft: 5,
+	paddingRight: 5,
+	boxSizing: 'border-box',
+};
+
+globalStyle.containerStyle = {
+	overflow: 'auto',
+	overflowY: 'auto',
+};
+
+globalStyle.buttonStyle = {
+	// marginRight: 10,
+	border: '1px solid',
+	minHeight: 26,
+	minWidth: 80,
+	// maxWidth: 220,
+	paddingLeft: 12,
+	paddingRight: 12,
+	paddingTop: 6,
+	paddingBottom: 6,
+	boxShadow: '0px 1px 1px rgba(0,0,0,0.3)',
+	fontSize: globalStyle.fontSize,
+	borderRadius: 4,
+};
+
+function addExtraStyles(style) {
+	style.selectedDividerColor = Color(style.dividerColor).darken(0.2).hex();
+	style.iconColor = Color(style.color).alpha(0.8);
+
+	style.tagStyle = {
+		fontSize: style.fontSize,
+		fontFamily: style.fontFamily,
+		paddingTop: 3,
+		paddingBottom: 3,
+		paddingRight: 8,
+		paddingLeft: 8,
+		backgroundColor: style.raisedBackgroundColor,
+		color: style.raisedColor,
+		display: 'flex',
+		alignItems: 'center',
+		justifyContent: 'center',
+		marginRight: 5,
+	};
+
+	style.toolbarStyle = {
+		height: style.toolbarHeight,
+		minWidth: style.toolbarHeight,
+		display: 'flex',
+		alignItems: 'center',
+		paddingLeft: style.headerButtonHPadding,
+		paddingRight: style.headerButtonHPadding,
+		textDecoration: 'none',
+		fontFamily: style.fontFamily,
+		fontSize: style.fontSize,
+		boxSizing: 'border-box',
+		cursor: 'default',
+		justifyContent: 'center',
+		color: style.color,
+		whiteSpace: 'nowrap',
+	};
+
+	style.textStyle = {
+		fontFamily: globalStyle.fontFamily,
+		fontSize: style.fontSize,
+		lineHeight: '1.6em',
+		color: style.color,
+	};
+
+	style.textStyle2 = Object.assign({}, style.textStyle,
+		{ color: style.color2 },
+	);
+
+	style.textStyleMinor = Object.assign({}, style.textStyle,
+		{
+			color: style.colorFaded,
+			fontSize: style.fontSize * 0.8,
+		},
+	);
+
+	style.urlStyle = Object.assign({}, style.textStyle,
+		{
+			textDecoration: 'underline',
+			color: style.urlColor,
+		},
+	);
+
+	style.h1Style = Object.assign({},
+		style.textStyle,
+		{
+			color: style.color,
+			fontSize: style.textStyle.fontSize * 1.5,
+			fontWeight: 'bold',
+		},
+	);
+
+	style.h2Style = Object.assign({},
+		style.textStyle,
+		{
+			color: style.color,
+			fontSize: style.textStyle.fontSize * 1.3,
+			fontWeight: 'bold',
+		},
+	);
+
+	style.dialogModalLayer = {
+		zIndex: 9999,
+		display: 'flex',
+		position: 'absolute',
+		top: 0,
+		left: 0,
+		width: '100%',
+		height: '100%',
+		backgroundColor: 'rgba(0,0,0,0.6)',
+		alignItems: 'flex-start',
+		justifyContent: 'center',
+	};
+
+	style.controlBox = {
+		marginBottom: '1em',
+		color: 'black', // This will apply for the calendar
+		display: 'flex',
+		flexDirection: 'row',
+		alignItems: 'center',
+	};
+
+	style.controlBoxLabel = {
+		marginRight: '1em',
+		width: '10em',
+		display: 'inline-block',
+		fontWeight: 'bold',
+	};
+
+	style.controlBoxValue = {
+		display: 'inline-block',
+	};
+
+	style.dialogBox = {
+		backgroundColor: style.backgroundColor,
+		padding: 16,
+		boxShadow: '6px 6px 20px rgba(0,0,0,0.5)',
+		marginTop: 20,
+		maxHeight: '80%',
+		display: 'flex',
+		flexDirection: 'column',
+	};
+
+	style.buttonIconStyle = {
+		color: style.iconColor,
+		marginRight: 6,
+	};
+
+	style.notificationBox = {
+		backgroundColor: style.warningBackgroundColor,
+		display: 'flex',
+		alignItems: 'center',
+		padding: 10,
+		fontSize: style.fontSize,
+	};
+
+	style.dialogTitle = Object.assign({}, style.h1Style, { marginBottom: '1.2em' });
+
+	style.dropdownList = Object.assign({}, style.inputStyle);
+
+	style.colorHover = style.color;
+	style.backgroundHover = `${style.selectedColor2}44`;
+
+	// In general the highlighted color, used to highlight text or icons, should be the same as selectedColor2
+	// but some times, depending on the theme, it might be too dark or too light, so it can be
+	// specified directly by the theme too.
+	if (!style.highlightedColor) style.highlightedColor = style.selectedColor2;
+
+	return style;
+}
+
+const themeCache_ = {};
+
+function themeStyle(theme) {
+	if (!theme) throw new Error('Theme must be specified');
+
+	const zoomRatio = 1; // Setting.value('style.zoom') / 100;
+	const editorFontSize = Setting.value('style.editor.fontSize');
+
+	const cacheKey = [theme, zoomRatio, editorFontSize].join('-');
+	if (themeCache_[cacheKey]) return themeCache_[cacheKey];
+
+	// Font size are not theme specific, but they must be referenced
+	// and computed here to allow them to respond to settings changes
+	// without the need to restart
+	const fontSizes = {
+		fontSize: Math.round(12 * zoomRatio),
+		editorFontSize: editorFontSize,
+		textAreaLineHeight: Math.round(globalStyle.textAreaLineHeight * editorFontSize / 12),
+	};
+
+	fontSizes.noteViewerFontSize = Math.round(fontSizes.fontSize * 1.25);
+
+	let output = {};
+	output.zoomRatio = zoomRatio;
+
+	// All theme are based on the light style, and just override the
+	// relevant properties
+	output = Object.assign({}, globalStyle, fontSizes, themes[Setting.THEME_LIGHT], themes[theme]);
+
+	// Note: All the theme specific things should go in addExtraStyles
+	// so that their definition is not split between here and the
+	// beginning of the file. At least new styles should go in
+	// addExtraStyles.
+
+	output.icon = Object.assign({},
+		output.icon,
+		{ color: output.color },
+	);
+
+	output.lineInput = Object.assign({},
+		output.lineInput,
+		{
+			color: output.color,
+			backgroundColor: output.backgroundColor,
+		},
+	);
+
+	output.headerStyle = Object.assign({},
+		output.headerStyle,
+		{
+			color: output.color,
+			backgroundColor: output.backgroundColor,
+		},
+	);
+
+	output.inputStyle = Object.assign({},
+		output.inputStyle,
+		{
+			color: output.color,
+			backgroundColor: output.backgroundColor,
+			borderColor: output.dividerColor,
+		},
+	);
+
+	output.containerStyle = Object.assign({},
+		output.containerStyle,
+		{
+			color: output.color,
+			backgroundColor: output.backgroundColor,
+		},
+	);
+
+	output.buttonStyle = Object.assign({},
+		output.buttonStyle,
+		{
+			color: output.color,
+			backgroundColor: output.backgroundColor,
+			borderColor: output.dividerColor,
+			userSelect: 'none',
+		},
+	);
+
+	output = addExtraStyles(output);
+
+	themeCache_[cacheKey] = output;
+	return themeCache_[cacheKey];
+}
+
+const cachedStyles_ = {};
+
+function buildStyle(cacheKey, themeId, callback) {
+	if (cachedStyles_[cacheKey]) cachedStyles_[cacheKey].style;
+
+	const s = callback(themeStyle(themeId));
+
+	cachedStyles_[cacheKey] = {
+		style: s,
+		timestamp: Date.now(),
+	};
+
+	return cachedStyles_[cacheKey].style;
+}
+
+module.exports = { themeStyle, buildStyle, themeById };

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;