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.

CliClient/tests/MdToHtml.js

@@ -12,7 +12,7 @@ const BaseModel = require('lib/BaseModel.js');
 const { shim } = require('lib/shim');
 const MdToHtml = require('lib/joplin-renderer/MdToHtml');
 const { enexXmlToMd } = require('lib/import-enex-md-gen.js');
-const { themeStyle } = require('../../ElectronClient/theme.js');
+const { themeStyle } = require('lib/theme');
 
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 60 * 60 * 1000; // Can run for a while since everything is in the same test unit
 

ElectronClient/gui/ClipperConfigScreen.jsx

@@ -1,7 +1,7 @@
 const React = require('react');
 const { connect } = require('react-redux');
 const { bridge } = require('electron').remote.require('./bridge');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { _ } = require('lib/locale.js');
 const ClipperServer = require('lib/ClipperServer');
 const Setting = require('lib/models/Setting');

ElectronClient/gui/ConfigScreen.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const { connect } = require('react-redux');
 const Setting = require('lib/models/Setting.js');
 const { bridge } = require('electron').remote.require('./bridge');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const pathUtils = require('lib/path-utils.js');
 const { _ } = require('lib/locale.js');
 const SyncTargetRegistry = require('lib/SyncTargetRegistry');

ElectronClient/gui/DialogButtonRow.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const { _ } = require('lib/locale.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 
 function DialogButtonRow(props) {
 	const theme = themeStyle(props.theme);

ElectronClient/gui/DropboxLoginScreen.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const { connect } = require('react-redux');
 const { bridge } = require('electron').remote.require('./bridge');
 const { Header } = require('./Header.min.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { _ } = require('lib/locale.js');
 const Shared = require('lib/components/shared/dropbox-login-shared');
 

ElectronClient/gui/EncryptionConfigScreen.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const { connect } = require('react-redux');
 const Setting = require('lib/models/Setting');
 const EncryptionService = require('lib/services/EncryptionService');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { _ } = require('lib/locale.js');
 const { time } = require('lib/time-utils.js');
 const { shim } = require('lib/shim');

ElectronClient/gui/Header.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const { connect } = require('react-redux');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { _ } = require('lib/locale.js');
 const { bridge } = require('electron').remote.require('./bridge');
 

ElectronClient/gui/HelpButton.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const { connect } = require('react-redux');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 
 class HelpButtonComponent extends React.Component {
 	constructor() {

ElectronClient/gui/IconButton.jsx

@@ -1,5 +1,5 @@
 const React = require('react');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 
 class IconButton extends React.Component {
 	render() {

ElectronClient/gui/ImportScreen.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const { connect } = require('react-redux');
 const Folder = require('lib/models/Folder.js');
 const { Header } = require('./Header.min.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { _ } = require('lib/locale.js');
 const { filename, basename } = require('lib/path-utils.js');
 const { importEnex } = require('lib/import-enex');

ElectronClient/gui/MainScreen.jsx

@@ -17,7 +17,7 @@ const Note = require('lib/models/Note.js');
 const { uuid } = require('lib/uuid.js');
 const { shim } = require('lib/shim');
 const Folder = require('lib/models/Folder.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme.js');
 const { _ } = require('lib/locale.js');
 const { bridge } = require('electron').remote.require('./bridge');
 const eventManager = require('../eventManager');

ElectronClient/gui/MultiNoteActions.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-const { buildStyle } = require('../theme.js');
+const { buildStyle } = require('lib/theme');
 const { bridge } = require('electron').remote.require('./bridge');
 const NoteListUtils = require('./utils/NoteListUtils');
 

ElectronClient/gui/NoteContentPropertiesDialog.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 const { _ } = require('lib/locale.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const DialogButtonRow = require('./DialogButtonRow.min');
 const { stripMarkdown } = require('lib/markdownUtils');
 const Countable = require('countable');

ElectronClient/gui/NoteEditor/NoteBody/AceEditor/Toolbar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 const ToolbarBase = require('../../../Toolbar.min.js');
 const { _ } = require('lib/locale');
-const { buildStyle, themeStyle } = require('../../../../theme.js');
+const { buildStyle, themeStyle } = require('lib/theme');
 
 interface ToolbarProps {
 	theme: number,

ElectronClient/gui/NoteEditor/NoteBody/AceEditor/styles/index.ts

@@ -1,5 +1,5 @@
 import { NoteBodyEditorProps } from '../../../utils/types';
-const { buildStyle } = require('../../../../../theme.js');
+const { buildStyle } = require('lib/theme');
 
 export default function styles(props: NoteBodyEditorProps) {
 	return buildStyle('AceEditor', props.theme, (theme: any) => {

ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Toolbar.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 const ToolbarBase = require('../../../Toolbar.min.js');
 const { _ } = require('lib/locale');
-const { buildStyle, themeStyle } = require('../../../../theme.js');
+const { buildStyle, themeStyle } = require('lib/theme');
 
 interface ToolbarProps {
 	theme: number,

ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/styles/index.ts

@@ -1,5 +1,5 @@
 import { NoteBodyEditorProps } from '../../../utils/types';
-const { buildStyle } = require('../../../../../theme.js');
+const { buildStyle } = require('lib/theme');
 
 export default function styles(props: NoteBodyEditorProps) {
 	return buildStyle('AceEditor', props.theme, (theme: any) => {

ElectronClient/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx

@@ -10,7 +10,7 @@ const { reg } = require('lib/registry.js');
 const { _, closestSupportedLocale } = require('lib/locale');
 const BaseItem = require('lib/models/BaseItem');
 const Resource = require('lib/models/Resource');
-const { themeStyle, buildStyle } = require('../../../../theme.js');
+const { themeStyle, buildStyle } = require('lib/theme');
 const { clipboard } = require('electron');
 const supportedLocales = require('./supportedLocales');
 

ElectronClient/gui/NoteEditor/NoteEditor.tsx

@@ -19,7 +19,7 @@ import styles_ from './styles';
 import { NoteEditorProps, FormNote, ScrollOptions, ScrollOptionTypes, OnChangeEvent, NoteBodyEditorProps } from './utils/types';
 import ResourceEditWatcher from '../../lib/services/ResourceEditWatcher';
 
-const { themeStyle } = require('../../theme.js');
+const { themeStyle } = require('lib/theme');
 const NoteSearchBar = require('../NoteSearchBar.min.js');
 const { reg } = require('lib/registry.js');
 const { time } = require('lib/time-utils.js');

ElectronClient/gui/NoteEditor/styles/index.ts

@@ -1,6 +1,6 @@
 import { NoteEditorProps } from '../utils/types';
 
-const { buildStyle } = require('../../../theme.js');
+const { buildStyle } = require('lib/theme');
 
 export default function styles(props: NoteEditorProps) {
 	return buildStyle('NoteEditor', props.theme, (theme: any) => {

ElectronClient/gui/NoteEditor/utils/useMarkupToHtml.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { ResourceInfos } from './types';
-const { themeStyle } = require('../../../theme.js');
+const { themeStyle } = require('lib/theme');
 const Note = require('lib/models/Note');
 const Setting = require('lib/models/Setting');
 const markupLanguageUtils = require('lib/markupLanguageUtils');

ElectronClient/gui/NoteList.jsx

@@ -2,7 +2,7 @@ const { ItemList } = require('./ItemList.min.js');
 const React = require('react');
 const { connect } = require('react-redux');
 const { time } = require('lib/time-utils.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const BaseModel = require('lib/BaseModel');
 const { _ } = require('lib/locale.js');
 const { bridge } = require('electron').remote.require('./bridge');

ElectronClient/gui/NoteListItem.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRef, forwardRef, useImperativeHandle, useCallback } from 'react';
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const Mark = require('mark.js/dist/mark.min.js');
 const markJsUtils = require('lib/markJsUtils');
 const Note = require('lib/models/Note');

ElectronClient/gui/NotePropertiesDialog.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const { _ } = require('lib/locale.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { time } = require('lib/time-utils.js');
 const DialogButtonRow = require('./DialogButtonRow.min');
 const Datetime = require('react-datetime');

ElectronClient/gui/NoteRevisionViewer.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const { connect } = require('react-redux');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { _ } = require('lib/locale.js');
 const NoteTextViewer = require('./NoteTextViewer.min');
 const HelpButton = require('./HelpButton.min');

ElectronClient/gui/NoteSearchBar.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const { connect } = require('react-redux');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { _ } = require('lib/locale.js');
 
 class NoteSearchBarComponent extends React.Component {

ElectronClient/gui/NoteStatusBar.jsx

@@ -1,7 +1,7 @@
 const React = require('react');
 const { connect } = require('react-redux');
 const { time } = require('lib/time-utils.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 
 class NoteStatusBarComponent extends React.Component {
 	style() {

ElectronClient/gui/NoteToolbar/NoteToolbar.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 const { connect } = require('react-redux');
-const { buildStyle } = require('../../theme.js');
+const { buildStyle } = require('lib/theme');
 const Toolbar = require('../Toolbar.min.js');
 const Note = require('lib/models/Note');
 const Folder = require('lib/models/Folder');

ElectronClient/gui/OneDriveLoginScreen.jsx

@@ -4,7 +4,7 @@ const { reg } = require('lib/registry.js');
 const Setting = require('lib/models/Setting');
 const { bridge } = require('electron').remote.require('./bridge');
 const { Header } = require('./Header.min.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { _ } = require('lib/locale.js');
 const { OneDriveApiNodeUtils } = require('lib/onedrive-api-node-utils.js');
 

ElectronClient/gui/PromptDialog.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const { _ } = require('lib/locale.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { time } = require('lib/time-utils.js');
 const Datetime = require('react-datetime');
 const CreatableSelect = require('react-select/lib/Creatable').default;

ElectronClient/gui/ResourceScreen.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 const { connect } = require('react-redux');
 const { _ } = require('lib/locale.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { bridge } = require('electron').remote.require('./bridge');
 const { Header } = require('./Header.min.js');
 const prettyBytes = require('pretty-bytes');
@@ -53,7 +53,7 @@ const ResourceTable: React.FC<ResourceTable> = (props: ResourceTable) => {
 	const sortOrderEngagedMarker = (s: SortingOrder) => {
 		return (
 			<a href="#"
-				style={{ color: props.theme.htmlLinkColor }}
+				style={{ color: props.theme.urlColor }}
 				onClick={() => props.onToggleSorting(s)}>{
 					(props.sorting.order === s && props.sorting.type === 'desc') ? '▾' : '▴'}</a>
 		);
@@ -97,7 +97,7 @@ const ResourceTable: React.FC<ResourceTable> = (props: ResourceTable) => {
 					<tr key={index}>
 						<td style={titleCellStyle} className="titleCell">
 							<a
-								style={{ color: props.theme.htmlLinkColor }}
+								style={{ color: props.theme.urlColor }}
 								href="#"
 								onClick={() => props.onResourceClick(resource)}>{resource.title || `(${_('Untitled')})`}
 							</a>

ElectronClient/gui/ShareNoteDialog.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import JoplinServerApi from '../lib/JoplinServerApi';
 
 const { _, _n } = require('lib/locale.js');
-const { themeStyle, buildStyle } = require('../theme.js');
+const { themeStyle, buildStyle } = require('lib/theme');
 const DialogButtonRow = require('./DialogButtonRow.min');
 const Note = require('lib/models/Note');
 const Setting = require('lib/models/Setting');

ElectronClient/gui/SideBar.jsx

@@ -8,7 +8,7 @@ const Folder = require('lib/models/Folder.js');
 const Note = require('lib/models/Note.js');
 const Tag = require('lib/models/Tag.js');
 const { _ } = require('lib/locale.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { bridge } = require('electron').remote.require('./bridge');
 const Menu = bridge().Menu;
 const MenuItem = bridge().MenuItem;

ElectronClient/gui/StatusScreen.jsx

@@ -3,7 +3,7 @@ const { connect } = require('react-redux');
 const Setting = require('lib/models/Setting.js');
 const { bridge } = require('electron').remote.require('./bridge');
 const { Header } = require('./Header.min.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const { _ } = require('lib/locale.js');
 const { ReportService } = require('lib/services/report.js');
 const fs = require('fs-extra');

ElectronClient/gui/TagItem.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const { connect } = require('react-redux');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 
 class TagItemComponent extends React.Component {
 	render() {

ElectronClient/gui/TagList.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const { connect } = require('react-redux');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const TagItem = require('./TagItem.min.js');
 
 class TagListComponent extends React.Component {

ElectronClient/gui/Toolbar.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const { connect } = require('react-redux');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const ToolbarButton = require('./ToolbarButton.min.js');
 const ToolbarSpace = require('./ToolbarSpace.min.js');
 

ElectronClient/gui/ToolbarButton.jsx

@@ -1,5 +1,5 @@
 const React = require('react');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 
 class ToolbarButton extends React.Component {
 	render() {

ElectronClient/gui/ToolbarSpace.jsx

@@ -1,5 +1,5 @@
 const React = require('react');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 
 class ToolbarSpace extends React.Component {
 	render() {

ElectronClient/gui/style/ConfigMenuBar.js

@@ -1,5 +1,5 @@
 const { createSelector } = require('reselect');
-const { themeStyle } = require('../../theme.js');
+const { themeStyle } = require('lib/theme');
 
 const themeSelector = (state, props) => themeStyle(props.theme);
 

ElectronClient/gui/style/ExtensionBadge.js

@@ -1,5 +1,5 @@
 const { createSelector } = require('reselect');
-const { themeStyle } = require('../../theme.js');
+const { themeStyle } = require('lib/theme');
 
 const themeSelector = (state, props) => themeStyle(props.theme);
 

ElectronClient/plugins/GotoAnything.jsx

@@ -1,7 +1,7 @@
 const React = require('react');
 const { connect } = require('react-redux');
 const { _ } = require('lib/locale.js');
-const { themeStyle } = require('../theme.js');
+const { themeStyle } = require('lib/theme');
 const SearchEngine = require('lib/services/SearchEngine');
 const BaseModel = require('lib/BaseModel');
 const Tag = require('lib/models/Tag');

README.md

@@ -237,10 +237,9 @@ Joplin notes can be opened and edited using an external editor of your choice. I
 
 Any kind of file can be attached to a note. In Markdown, links to these files are represented as a simple ID to the attachment. In the note viewer, these files, if they are images, will be displayed or, if they are other files (PDF, text files, etc.) they will be displayed as links. Clicking on this link will open the file in the default application.
 
-In the **desktop application**, files can be attached either by clicking the "Attach file" icon in the editor or via drag and drop. If you prefer to create a link to a local file instead, hold the ALT key while performing the drag and drop operation.
-If the OS-clipboard contains an image you can directly paste it in the editor via Ctrl+V.
+In the **desktop application**, files can be attached either by clicking the "Attach file" icon in the editor or via drag and drop. If you prefer to create a link to a local file instead, hold the ALT key while performing the drag and drop operation. You can also copy and paste images directly in the editor via Ctrl+V.
 
-Resources that are not attached to any note will be automatically deleted after 10 days (see [rationale](https://github.com/laurent22/joplin/issues/154#issuecomment-356582366)).
+Resources that are not attached to any note will be automatically deleted in accordance to the [Note History](#note-history) settings.
 
 **Important:** Resources larger than 10 MB are not currently supported on mobile. They will crash the application when synchronising so it is recommended not to attach such resources at the moment. The issue is being looked at.
 
@@ -478,7 +477,7 @@ Thank you to everyone who've contributed to Joplin's source code!
 
 # Known bugs
 
-- Resources larger than 10 MB are not currently supported on mobile. They will crash the application so it is recommended not to attach such resources at the moment. The issue is being looked at.
+- Resources larger than 10 MB are not currently supported on mobile as they can crash the application.
 - Non-alphabetical characters such as Chinese or Arabic might create glitches in the terminal on Windows. This is a limitation of the current Windows console.
 
 # License

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

@@ -2,35 +2,51 @@ const Setting = require('lib/models/Setting.js');
 const Color = require('color');
 
 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'),
-	[Setting.THEME_ARITIM_DARK]: require('./gui/style/theme/aritimDark'),
+	[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 = {
-	fontSize: 12,
 	fontFamily: 'sans-serif',
 	margin: 15, // No text and no interactive component should be within this margin
 	itemMarginTop: 10,
 	itemMarginBottom: 10,
-	fontSizeSmaller: 14,
 	disabledOpacity: 0.3,
 	buttonMinWidth: 50,
 	buttonMinHeight: 30,
 	editorFontSize: 12,
 	textAreaLineHeight: 17,
-
+	lineHeight: '1.6em',
 	headerHeight: 35,
 	headerButtonHPadding: 6,
-
 	toolbarHeight: 35,
-
 	appearance: 'light',
 };
 
@@ -38,7 +54,6 @@ 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`;
 
 globalStyle.icon = {
 	fontSize: 30,
@@ -248,20 +263,15 @@ function themeStyle(theme) {
 	// and computed here to allow them to respond to settings changes
 	// without the need to restart
 	const fontSizes = {
-		fontSize: Math.round(globalStyle.fontSize * zoomRatio),
+		fontSize: Math.round(12 * zoomRatio),
 		editorFontSize: editorFontSize,
 		textAreaLineHeight: Math.round(globalStyle.textAreaLineHeight * editorFontSize / 12),
-
-		// For WebView - must correspond to the properties above
-		htmlFontSize: `${Math.round(15 * zoomRatio)}px`,
-		htmlLineHeight: '1.6em', // Math.round(20 * zoomRatio) + 'px'
-
-		htmlCodeFontSize: '.9em',
 	};
 
+	fontSizes.noteViewerFontSize = Math.round(fontSizes.fontSize * 1.25);
+
 	let output = {};
 	output.zoomRatio = zoomRatio;
-	output.editorFontSize = editorFontSize;
 
 	// All theme are based on the light style, and just override the
 	// relevant properties
@@ -341,4 +351,4 @@ function buildStyle(cacheKey, themeId, callback) {
 	return cachedStyles_[cacheKey].style;
 }
 
-module.exports = { themeStyle, buildStyle };
+module.exports = { themeStyle, buildStyle, themeById };

ReactNativeClient/lib/themes/aritimDark.js

@@ -14,7 +14,6 @@ const aritimStyle = {
 	urlColor: '#356693', // Links to external sites (e.g. in settings)
 
 	backgroundColor2: '#141a21', // Notebooks main background
-	depthColor: '#141a21',	// Notebooks background color
 	color2: '#d3dae3', // Notebook sidebar text color
 	selectedColor2: '#10151a', // Selected notebook (or settings icon in settings)
 	colorError2: '#9a2f2f',
@@ -24,15 +23,10 @@ const aritimStyle = {
 
 	warningBackgroundColor: '#9a2f2f', // Info / Warning boxes bg color
 
-	// Markdown rendered
-	htmlColor: '#d3dae3', // Text color
-	htmlBackgroundColor: '#10151a', // BG Color
-	htmlDividerColor: '#d3dae3', // Lines e.g. ---
-	htmlLinkColor: '#356693', // Normal links
-	htmlTableBackgroundColor: '#141a21', // Table (even) background color
-	htmlCodeBackgroundColor: '#141a21', // Single line code bg
-	htmlCodeBorderColor: '#141a21', // Single line code border, and tables
-	htmlCodeColor: '#005b47', // Single line code text
+	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',

ReactNativeClient/lib/themes/dark.js

@@ -14,7 +14,6 @@ const darkStyle = {
 	urlColor: '#4E87EE',
 
 	backgroundColor2: '#181A1D',
-	depthColor: 'rgb(200, 200, 200, OPACITY)',
 	color2: '#ffffff',
 	selectedColor2: '#013F74',
 	colorError2: '#ff6c6c',
@@ -24,14 +23,10 @@ const darkStyle = {
 
 	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)',
+	codeColor: '#ffffff',
+	tableBackgroundColor: 'rgb(40, 41, 42)',
+	codeBackgroundColor: 'rgb(47, 48, 49)',
+	codeBorderColor: 'rgb(70, 70, 70)',
 
 	aceEditorTheme: 'twilight',
 	codeMirrorTheme: 'material-darker',

ReactNativeClient/lib/themes/dracula.js

@@ -14,7 +14,6 @@ const draculaStyle = {
 	urlColor: '#8be9fd',
 
 	backgroundColor2: '#21222C',
-	depthColor: 'rgb(200, 200, 200, OPACITY)',
 	color2: '#bd93f9',
 	selectedColor2: '#44475a',
 	colorError2: '#ff5555',
@@ -24,14 +23,10 @@ const draculaStyle = {
 
 	warningBackgroundColor: '#ffb86c',
 
-	htmlColor: '#f8f8f2',
-	htmlBackgroundColor: '#282a36',
-	htmlDividerColor: '#f8f8f2',
-	htmlLinkColor: '#8be9fd',
-	htmlTableBackgroundColor: '#6272a4',
-	htmlCodeBackgroundColor: '#44475a',
-	htmlCodeBorderColor: '#f8f8f2',
-	htmlCodeColor: '#50fa7b',
+	tableBackgroundColor: '#6272a4',
+	codeBackgroundColor: '#44475a',
+	codeBorderColor: '#f8f8f2',
+	codeColor: '#50fa7b',
 
 	aceEditorTheme: 'dracula',
 	codeMirrorTheme: 'dracula',

ReactNativeClient/lib/themes/light.js

@@ -1,9 +1,11 @@
 // This is the default theme in Joplin
 const lightStyle = {
+	appearance: 'light',
+
 	backgroundColor: '#ffffff',
 	backgroundColorTransparent: 'rgba(255,255,255,0.9)',
 	oddBackgroundColor: '#dddddd',
-	color: '#222222', // For regular text
+	color: '#555555', // For regular text
 	colorError: 'red',
 	colorWarn: '#9A5B00',
 	colorFaded: '#777777', // For less important text
@@ -13,7 +15,6 @@ const lightStyle = {
 	urlColor: '#155BDA',
 
 	backgroundColor2: '#162B3D',
-	depthColor: 'rgb(100, 182, 253, OPACITY)',
 	color2: '#f5f5f5',
 	selectedColor2: '#0269C2',
 	colorError2: '#ff6c6c',
@@ -23,14 +24,10 @@ const lightStyle = {
 
 	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)',
+	tableBackgroundColor: 'rgb(247, 247, 247)',
+	codeBackgroundColor: 'rgb(243, 243, 243)',
+	codeBorderColor: 'rgb(220, 220, 220)',
+	codeColor: 'rgb(0,0,0)',
 
 	aceEditorTheme: 'chrome',
 	codeMirrorTheme: 'default',

ReactNativeClient/lib/themes/nord.js

@@ -60,7 +60,6 @@ const nordStyle = {
 	urlColor: nord[8],
 
 	backgroundColor2: nord[2],
-	depthColor: 'rgb(200, 200, 200, OPACITY)',
 	color2: nord[8],
 	selectedColor2: nord[10],
 	colorError2: nord[11],
@@ -70,14 +69,10 @@ const nordStyle = {
 
 	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],
+	tableBackgroundColor: nord[0],
+	codeBackgroundColor: nord[0],
+	codeBorderColor: nord[2],
+	codeColor: nord[13],
 
 	aceEditorTheme: 'terminal',
 	codeMirrorTheme: 'nord',

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

@@ -14,7 +14,6 @@ const solarizedDarkStyle = {
 	urlColor: '#268bd2',
 
 	backgroundColor2: '#073642',
-	depthColor: 'rgb(200, 200, 200, OPACITY)',
 	color2: '#eee8d5',
 	selectedColor2: '#6c71c4',
 	colorError2: '#cb4b16',
@@ -24,14 +23,10 @@ const solarizedDarkStyle = {
 
 	warningBackgroundColor: '#b5890055',
 
-	htmlColor: '#93a1a1',
-	htmlBackgroundColor: '#002b36',
-	htmlDividerColor: '#073642',
-	htmlLinkColor: '#268bd2',
-	htmlTableBackgroundColor: '#002b36',
-	htmlCodeBackgroundColor: '#002b36',
-	htmlCodeBorderColor: '#696969',
-	htmlCodeColor: '#fdf6e3',
+	tableBackgroundColor: '#002b36',
+	codeBackgroundColor: '#002b36',
+	codeBorderColor: '#696969',
+	codeColor: '#fdf6e3',
 
 	aceEditorTheme: 'twilight',
 	codeMirrorTheme: 'solarized dark',

ReactNativeClient/lib/themes/solarizedLight.js

@@ -1,4 +1,6 @@
 const solarizedLightStyle = {
+	appearance: 'light',
+
 	backgroundColor: '#fdf6e3',
 	backgroundColorTransparent: 'rgba(253, 246, 227, 0.9)',
 	oddBackgroundColor: '#eee8d5',
@@ -12,7 +14,6 @@ const solarizedLightStyle = {
 	urlColor: '#268bd2',
 
 	backgroundColor2: '#002b36',
-	depthColor: 'rgb(100, 182, 253, OPACITY)',
 	color2: '#eee8d5',
 	selectedColor2: '#6c71c4',
 	colorError2: '#cb4b16',
@@ -22,14 +23,10 @@ const solarizedLightStyle = {
 
 	warningBackgroundColor: '#b5890055',
 
-	htmlColor: '#657b83',
-	htmlBackgroundColor: '#fdf6e3',
-	htmlDividerColor: '#eee8d5',
-	htmlLinkColor: '#268bd2',
-	htmlTableBackgroundColor: '#fdf6e3',
-	htmlCodeBackgroundColor: '#fdf6e3',
-	htmlCodeBorderColor: '#eee8d5',
-	htmlCodeColor: '#002b36',
+	tableBackgroundColor: '#fdf6e3',
+	codeBackgroundColor: '#fdf6e3',
+	codeBorderColor: '#eee8d5',
+	codeColor: '#002b36',
 
 	aceEditorTheme: 'tomorrow',
 	codeMirrorTheme: 'solarized light',

ReactNativeClient/package-lock.json

@@ -3195,6 +3195,15 @@
         "object-visit": "^1.0.0"
       }
     },
+    "color": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/color/-/color-3.1.2.tgz",
+      "integrity": "sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg==",
+      "requires": {
+        "color-convert": "^1.9.1",
+        "color-string": "^1.5.2"
+      }
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3208,6 +3217,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
+    "color-string": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz",
+      "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==",
+      "requires": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -9770,6 +9788,21 @@
         "plist": "^3.0.1"
       }
     },
+    "simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
+      "requires": {
+        "is-arrayish": "^0.3.1"
+      },
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+          "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+        }
+      }
+    },
     "slash": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",

ReactNativeClient/package.json

@@ -20,6 +20,7 @@
     "async-mutex": "^0.1.3",
     "base-64": "^0.1.0",
     "buffer": "^5.0.8",
+    "color": "^3.1.2",
     "diacritics": "^1.3.0",
     "diff-match-patch": "^1.0.4",
     "events": "^1.1.1",

ReactNativeClient/root.js

@@ -444,7 +444,7 @@ async function initialize(dispatch) {
 		if (Setting.value('env') == 'prod') {
 			await db.open({ name: 'joplin.sqlite' });
 		} else {
-			await db.open({ name: 'joplin-70.sqlite' });
+			await db.open({ name: 'joplin-71.sqlite' });
 
 			// await db.clearForTesting();
 		}
@@ -722,30 +722,34 @@ class AppComponent extends React.Component {
 			Config: { screen: ConfigScreen },
 		};
 
+		const statusBarStyle = theme.appearance === 'light' ? 'dark-content' : 'light-content';
+
 		return (
-			<SideMenu
-				menu={sideMenuContent}
-				edgeHitWidth={5}
-				menuPosition={menuPosition}
-				onChange={(isOpen) => this.sideMenu_change(isOpen)}
-				onSliding={(percent) => {
-					this.props.dispatch({
-						type: 'SIDE_MENU_OPEN_PERCENT',
-						value: percent,
-					});
-				}}
-			>
-				<StatusBar barStyle="dark-content" />
-				<MenuContext style={{ flex: 1, backgroundColor: theme.backgroundColor  }}>
-					<SafeAreaView style={{ flex: 1 }}>
-						<View style={{ flex: 1, backgroundColor: theme.backgroundColor }}>
-							<AppNav screens={appNavInit} />
-						</View>
-						<DropdownAlert ref={ref => this.dropdownAlert_ = ref} tapToCloseEnabled={true} />
-						<Animated.View pointerEvents='none' style={{ position: 'absolute', backgroundColor: 'black', opacity: this.state.sideMenuContentOpacity, width: '100%', height: '120%' }}/>
-					</SafeAreaView>
-				</MenuContext>
-			</SideMenu>
+			<View style={{ flex: 1, backgroundColor: theme.backgroundColor }}>
+				<SideMenu
+					menu={sideMenuContent}
+					edgeHitWidth={5}
+					menuPosition={menuPosition}
+					onChange={(isOpen) => this.sideMenu_change(isOpen)}
+					onSliding={(percent) => {
+						this.props.dispatch({
+							type: 'SIDE_MENU_OPEN_PERCENT',
+							value: percent,
+						});
+					}}
+				>
+					<StatusBar barStyle={statusBarStyle} />
+					<MenuContext style={{ flex: 1, backgroundColor: theme.backgroundColor }}>
+						<SafeAreaView style={{ flex: 1 }}>
+							<View style={{ flex: 1, backgroundColor: theme.backgroundColor }}>
+								<AppNav screens={appNavInit} />
+							</View>
+							<DropdownAlert ref={ref => this.dropdownAlert_ = ref} tapToCloseEnabled={true} />
+							<Animated.View pointerEvents='none' style={{ position: 'absolute', backgroundColor: 'black', opacity: this.state.sideMenuContentOpacity, width: '100%', height: '120%' }}/>
+						</SafeAreaView>
+					</MenuContext>
+				</SideMenu>
+			</View>
 		);
 	}
 }

tsconfig.json

@@ -14,6 +14,7 @@
 		"strictFunctionTypes": true,
 		"sourceMap": true,
 		"jsx": "react",
+		"skipLibCheck": true,
 	},
     "include": [
         "ReactNativeClient/**/*",