Add editorTheme to editor.jsx and downstream

client/homebrew/editor/editor.jsx

@@ -34,12 +34,14 @@ const Editor = createClass({
 			onMetaChange  : ()=>{},
 			reportError   : ()=>{},
 
-			renderer : 'legacy'
+			editorTheme : 'default',
+			renderer    : 'legacy'
 		};
 	},
 	getInitialState : function() {
 		return {
-			view : 'text' //'text', 'style', 'meta'
+			editorTheme : this.props.editorTheme,
+			view        : 'text' //'text', 'style', 'meta'
 		};
 	},
 
@@ -255,25 +257,38 @@ const Editor = createClass({
 		this.refs.codeEditor?.updateSize();
 	},
 
+	updateEditorTheme : function(newTheme){
+		this.setState({
+			editorTheme : newTheme
+		});
+	},
+
 	//Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory
 	rerenderParent : function (){
 		this.forceUpdate();
 	},
 
+	renderEditorCSSLink : function(){
+		return <link href={`../homebrew/cm-themes/${this.state.editorTheme}.css`} rel='stylesheet' />;
+	},
+
 	renderEditor : function(){
 		if(this.isText()){
 			return <>
+				{this.renderEditorCSSLink()}
 				<CodeEditor key='codeEditor'
 					ref='codeEditor'
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.text}
 					onChange={this.props.onTextChange}
+					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent} />
 			</>;
 		}
 		if(this.isStyle()){
 			return <>
+				{this.renderEditorCSSLink()}
 				<CodeEditor key='codeEditor'
 					ref='codeEditor'
 					language='css'
@@ -281,6 +296,7 @@ const Editor = createClass({
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
 					onChange={this.props.onStyleChange}
 					enableFolding={false}
+					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent} />
 			</>;
 		}
@@ -323,7 +339,8 @@ const Editor = createClass({
 					theme={this.props.brew.theme}
 					undo={this.undo}
 					redo={this.redo}
-					historySize={this.historySize()} />
+					historySize={this.historySize()}
+					updateEditorTheme={this.updateEditorTheme} />
 
 				{this.renderEditor()}
 			</div>

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -24,16 +24,17 @@ const Snippetbar = createClass({
 	displayName     : 'SnippetBar',
 	getDefaultProps : function() {
 		return {
-			brew            : {},
+			brew              : {},
-			view            : 'text',
+			view              : 'text',
-			onViewChange    : ()=>{},
+			onViewChange      : ()=>{},
-			onInject        : ()=>{},
+			onInject          : ()=>{},
-			onToggle        : ()=>{},
+			onToggle          : ()=>{},
-			showEditButtons : true,
+			showEditButtons   : true,
-			renderer        : 'legacy',
+			renderer          : 'legacy',
-			undo            : ()=>{},
+			undo              : ()=>{},
-			redo            : ()=>{},
+			redo              : ()=>{},
-			historySize     : ()=>{}
+			historySize       : ()=>{},
+			updateEditorTheme : ()=>{}
 		};
 	},
 
@@ -94,6 +95,13 @@ const Snippetbar = createClass({
 		this.props.onInject(injectedText);
 	},
 
+	selectTheme : function(){
+		console.log('select theme');
+		const editorTheme = window.prompt('Enter theme name:', 'default');
+		if(!editorTheme) return;
+		this.props.updateEditorTheme(editorTheme);
+	},
+
 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 
@@ -122,6 +130,10 @@ const Snippetbar = createClass({
 				<i className='fas fa-redo' />
 			</div>
 			<div className='divider'></div>
+			<div className={'editorTool palette'}
+				onClick={this.selectTheme} >
+				<i className='fas fa-palette' />
+			</div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>
 				<i className='fa fa-beer' />

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -49,7 +49,8 @@ const CodeEditor = createClass({
 			value         : '',
 			wrap          : true,
 			onChange      : ()=>{},
-			enableFolding : true
+			enableFolding : true,
+			editorTheme   : 'default'
 		};
 	},
 
@@ -91,6 +92,10 @@ const CodeEditor = createClass({
 		} else {
 			this.codeMirror.setOption('foldOptions', false);
 		}
+
+		if(prevProps.editorTheme !== this.props.editorTheme){
+			this.codeMirror.setOption('theme', this.props.editorTheme);
+		}
 	},
 
 	buildEditor : function() {
@@ -156,6 +161,7 @@ const CodeEditor = createClass({
 			autoCloseTags     : true,
 			styleActiveLine   : true,
 			showTrailingSpace : false,
+			theme             : this.props.editorTheme
 			// specialChars           : / /,
 			// specialCharPlaceholder : function(char) {
 			// 	const el = document.createElement('span');