Ability to use high-contrast theme for editor

closes #136
mjmlio · May 26, 2017 · a7f4d53 · a7f4d53
1 parent 19a8e64
commit a7f4d53
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 2 deletions.
diff --git a/app/actions/settings.js b/app/actions/settings.js
@@ -15,6 +15,7 @@ export function loadSettings () {
         autoFold: false,
         foldLevel: 1,
         highlightTag: false,
+        lightTheme: false,
       },
       mjml: {
         minify: false,

diff --git a/app/components/FileEditor/index.js b/app/components/FileEditor/index.js
@@ -36,6 +36,7 @@ import './styles.scss'
     autoFold: settings.getIn(['editor', 'autoFold']),
     foldLevel: settings.getIn(['editor', 'foldLevel']),
     highlightTag: settings.getIn(['editor', 'highlightTag']),
+    lightTheme: settings.getIn(['editor', 'lightTheme'], false),
   }
 }, {
   setPreview,
@@ -86,6 +87,9 @@ class FileEditor extends Component {
     ) {
       foldByLevel(this._codeMirror, this.props.foldLevel)
     }
+    if (prevProps.lightTheme !== this.props.lightTheme) {
+      this._codeMirror.setOption('theme', this.props.lightTheme ? 'neo' : 'one-dark')
+    }
   }
 
   componentWillUnmount () {
@@ -135,6 +139,7 @@ class FileEditor extends Component {
     const {
       wrapLines,
       highlightTag,
+      lightTheme,
     } = this.props
 
     if (this._codeMirror) {
@@ -148,7 +153,7 @@ class FileEditor extends Component {
       indentWithTabs: false,
       mode: 'xml',
       lineNumbers: true,
-      theme: 'one-dark',
+      theme: lightTheme ? 'neo' : 'one-dark',
       autoCloseTags: true,
       foldGutter: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],

diff --git a/app/components/FileEditor/styles.scss b/app/components/FileEditor/styles.scss
@@ -1,4 +1,5 @@
 @import "~codemirror/lib/codemirror.css";
+@import "~codemirror/theme/neo.css";
 @import "~codemirror/addon/hint/show-hint.css";
 @import "../../styles/one-dark.scss";
 @import "../../styles/vars.scss";

diff --git a/app/components/SettingsModal.js b/app/components/SettingsModal.js
@@ -84,6 +84,7 @@ class SettingsModal extends Component {
     const editorHightlightTag = settings.getIn(['editor', 'highlightTag'], false)
     const autoFold = settings.getIn(['editor', 'autoFold'], false)
     const foldLevel = settings.getIn(['editor', 'foldLevel'], 1)
+    const editorLightTheme = settings.getIn(['editor', 'lightTheme'], false)
     const minifyOutput = settings.getIn(['mjml', 'minify'], false)
     const beautifyOutput = settings.getIn(['mjml', 'beautify'], false)
 
@@ -122,7 +123,10 @@ class SettingsModal extends Component {
           <div className='settings-group'>
             <h2 className='secondary mb-10'>{'Editor'}</h2>
 
-            <div className='flow-v-10'>
+            <div>
+              <CheckBox value={editorLightTheme} onChange={this.changeEditorSetting('lightTheme')}>
+                {'Use high-contrast theme'}
+              </CheckBox>
               <CheckBox value={editorWrapLines} onChange={this.changeEditorSetting('wrapLines')}>
                 {'Wrap lines'}
               </CheckBox>