From 5b17808569eea3efc556d71f5c8b37d44cf5a295 Mon Sep 17 00:00:00 2001 From: Wesley Hansen Date: Sun, 8 Oct 2017 23:56:15 -0400 Subject: [PATCH] Support for solarized dark and light themes CodeMirror seems to have the two solarized themes within the `node_modules/coemirror/theme/solarized.css`. So passing the string "solarized light" and "solarized dark" to the editor theme appropriately sets these themes. The Boostnote app appears to be dynamically determining themes based on the css files found within `node_modules/codemirror/theme/`. So that's why there was just a single option of 'solarized' before. The light and dark 'solarized' themes appear to be the *only* themes that share a css style, whereas all other light and dark variarnt themes get their own css file (ex: base16-dark.css and base16-light.css). Weird! --- browser/lib/consts.js | 1 + browser/main/modals/PreferencesModal/UiTab.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/browser/lib/consts.js b/browser/lib/consts.js index 253bc974..c6b2ea5b 100644 --- a/browser/lib/consts.js +++ b/browser/lib/consts.js @@ -10,6 +10,7 @@ const themes = fs.readdirSync(themePath) .map((themePath) => { return themePath.substring(0, themePath.lastIndexOf('.')) }) +themes.splice(themes.indexOf('solarized'), 1, 'solarized dark', 'solarized light') const consts = { FOLDER_COLORS: [ diff --git a/browser/main/modals/PreferencesModal/UiTab.js b/browser/main/modals/PreferencesModal/UiTab.js index 217306f6..d1f252e3 100644 --- a/browser/main/modals/PreferencesModal/UiTab.js +++ b/browser/main/modals/PreferencesModal/UiTab.js @@ -61,7 +61,7 @@ class UiTab extends React.Component { const newCodemirrorTheme = this.refs.editorTheme.value if (newCodemirrorTheme !== codemirrorTheme) { - checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme}.css`) + checkHighLight.setAttribute('href', `../node_modules/codemirror/theme/${newCodemirrorTheme.split(" ")[0]}.css`) } this.setState({ config: newConfig, codemirrorTheme: newCodemirrorTheme })