dynamically change theme

src/app/editor/editor.js

@@ -4,8 +4,6 @@ const yo = require('yo-yo')
 const csjs = require('csjs-inject')
 const ace = require('brace')
 
-require('brace/theme/tomorrow_night_blue')
-
 const globalRegistry = require('../../global/registry')
 const SourceHighlighters = require('./SourceHighlighters')
 
@@ -17,22 +15,12 @@ require('ace-mode-solidity/build/remix-ide/mode-solidity')
 require('brace/mode/javascript')
 require('brace/mode/python')
 require('brace/mode/json')
-const styleGuide = require('../ui/styles-guide/theme-chooser')
-const styles = styleGuide.chooser()
-
-function setTheme (cb) {
-  if (styles.appProperties.aceTheme) {
-    cb('brace/theme/', styles.appProperties.aceTheme)
-  }
-}
-
-setTheme((path, theme) => {
+const themeChooser = require('../ui/styles-guide/theme-chooser')
 require('brace/theme/tomorrow_night_blue')
-})
+require('brace/theme/solarized_light')
 
 const css = csjs`
   .ace-editor {
-    background-color  : ${styles.editor.backgroundColor_Editor};
     width     : 100%;
   }
 `
@@ -41,35 +29,29 @@ document.head.appendChild(yo`
     .ace-tm .ace_gutter,
     .ace-tm .ace_gutter-active-line,
     .ace-tm .ace_marker-layer .ace_active-line {
-        background-color: ${styles.editor.backgroundColor_Tabs_Highlights};
+        background-color: var(--secondary);
     }
     .ace_gutter-cell.ace_breakpoint{
-      background-color: ${styles.editor.backgroundColor_DebuggerMode};
+      background-color: var(--secondary);
     }
     .highlightreference {
       position:absolute;
       z-index:20;
-      background-color: ${
-        styles.editor.backgroundColor_Editor_Context_Highlights
-      };
+      background-color: var(--secondary);
       opacity: 0.7
     }
 
     .highlightreferenceline {
       position:absolute;
       z-index:20;
-      background-color: ${
-        styles.editor.backgroundColor_Editor_Context_Highlights
-      };
+      background-color: var(--secondary);
       opacity: 0.7
     }
 
     .highlightcode {
       position:absolute;
       z-index:20;
-      background-color: ${
-        styles.editor.backgroundColor_Editor_Context_Error_Highlights
-      };
+      background-color: var(--danger);
      }
   </style>
 `)
@@ -85,6 +67,14 @@ class Editor {
       config: this._components.registry.get('config').api
     }
 
+    this._themes = {
+      'light': 'solarized_light',
+      'dark': 'tomorrow_night_blue'
+    }
+    themeChooser.event.on('switchTheme', (type) => {
+      this.setTheme(type)
+    })
+
     // Init
     this.event = new EventManager()
     this.sessions = {}
@@ -114,9 +104,7 @@ class Editor {
     this.editor.setShowPrintMargin(false)
     this.editor.resize(true)
 
-    if (styles.appProperties.aceTheme) {
-      this.editor.setTheme('ace/theme/' + styles.appProperties.aceTheme)
-    }
+    this.setTheme()
 
     this.editor.setOptions({
       enableBasicAutocompletion: true,
@@ -170,6 +158,10 @@ class Editor {
     })
   }
 
+  setTheme (type) {
+    this.editor.setTheme('ace/theme/' + this._themes[type])
+  }
+
   _onChange () {
     const currentFile = this._deps.config.get('currentFile')
     if (!currentFile) {

src/app/tabs/settings-tab.js

@@ -148,19 +148,17 @@ module.exports = class SettingsTab {
     }
     function onswitch2darkTheme (event) {
       styleGuide.switchTheme('dark')
-      // window.location.reload()
     }
     function onswitch2lightTheme (event) {
       styleGuide.switchTheme('light')
-      // window.location.reload()
     }
     function onswitch2cleanTheme (event) {
       styleGuide.switchTheme('clean')
-      // window.location.reload()
     }
     function onchangePersonal (event) {
       self._deps.config.set('settings/personal-mode', !self._deps.config.get('settings/personal-mode'))
     }
+    styleGuide.switchTheme()
     return self._view.el
   }
 }

src/app/ui/styles-guide/theme-chooser.js

@@ -2,6 +2,7 @@ var styleGuideLight = require('./style-guide')
 var styleGuideDark = require('./styleGuideDark')
 var styleGuideClean = require('./styleGuideClean')
 var Storage = require('remix-lib').Storage
+var EventEmitter = require('events')
 
 // Boostrap themes
 // TODO : Put it somewhere else
@@ -17,7 +18,7 @@ const themeVariable = {
   clean: 'light'
 }
 module.exports = {
-
+  event: new EventEmitter(),
   chooser: function () {
     const themeStorage = new Storage('style:')
     if (themeStorage.exists('theme')) {
@@ -43,10 +44,14 @@ module.exports = {
 
   switchTheme: function (theme) {
     var themeStorage = new Storage('style:')
-    themeStorage.set('theme', theme)
+    if (theme) themeStorage.set('theme', theme)
+    else {
+      theme = themeStorage.get('theme')
+    }
     if (themes[theme]) {
       document.getElementById('theme-link').setAttribute('href', themes[theme])
       document.documentElement.style.setProperty('--theme', themeVariable[theme])
+      this.event.emit('switchTheme', themeVariable[theme])
     }
     // if (theme === 'dark') {
     //   return styleGuideDark()