Use theme module

src/app.js

@@ -56,6 +56,7 @@ import { LandingPage } from './app/ui/landing-page/landing-page'
 import framingService from './framingService'
 import { ApiFactory } from 'remix-plugin'
 import { TxListenerModule } from './app/tabs/txlistener-module'
+import { ThemeModule } from './app/tabs/theme-module'
 
 var css = csjs`
   html { box-sizing: border-box; }
@@ -413,7 +414,10 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   const mainPanelApi = new SwapPanelApi(mainPanelComponent, verticalIconsComponent) // eslint-disable-line
   const verticalIconsApi = new VerticalIconsApi(verticalIconsComponent) // eslint-disable-line
   registry.put({api: verticalIconsApi, name: 'verticalicon'})
+  const themeModule = new ThemeModule()
+
   registry.put({api: appManager.proxy(), name: 'pluginmanager'})
+  registry.put({api: themeModule, name: 'themeModule'})
 
   pluginManagerComponent.setApp(appManager)
   pluginManagerComponent.setStore(appStore)
@@ -472,7 +476,8 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
     filePanel.api(),
     // { profile: support.profile(), api: support },
     settings.api(),
-    pluginManagerComponent.api()
+    pluginManagerComponent.api(),
+    themeModule.api()
   ])
 
   appManager.registerMany([

src/app/editor/editor.js

@@ -15,7 +15,6 @@ require('ace-mode-solidity/build/remix-ide/mode-solidity')
 require('brace/mode/javascript')
 require('brace/mode/python')
 require('brace/mode/json')
-const themeChooser = require('../ui/styles-guide/theme-chooser')
 require('brace/theme/chaos')
 require('brace/theme/chrome')
 
@@ -63,6 +62,7 @@ class Editor {
     this._components = {}
     this._components.registry = localRegistry || globalRegistry
     this._deps = {
+      themeModule: this._components.registry.get('themeModule').api,
       fileManager: this._components.registry.get('filemanager').api,
       config: this._components.registry.get('config').api
     }
@@ -71,7 +71,7 @@ class Editor {
       'light': 'chrome',
       'dark': 'chaos'
     }
-    themeChooser.event.on('switchTheme', (type) => {
+    this._deps.themeModule.events.on('switchTheme', (type) => {
       this.setTheme(type)
     })
 

src/app/tabs/settings-tab.js

@@ -1,7 +1,7 @@
 var yo = require('yo-yo')
+const globalRegistry = require('../../global/registry')
 var tooltip = require('../ui/tooltip')
 var copyToClipboard = require('../ui/copy-to-clipboard')
-var styleGuide = require('../ui/styles-guide/theme-chooser')
 var EventManager = require('../../lib/events')
 var css = require('./styles/settings-tab-styles')
 import { ApiFactory } from 'remix-plugin'
@@ -13,6 +13,9 @@ module.exports = class SettingsTab extends ApiFactory {
     this.editor = editor
     this.appManager = appManager
     this._components = {}
+    this._deps = {
+      themeModule: globalRegistry.get('themeModule').api
+    }
     this._view = { /* eslint-disable */
       el: null,
       optionVM: null, personal: null, warnPersonalMode: null, generateContractMetadata: null,
@@ -25,7 +28,7 @@ module.exports = class SettingsTab extends ApiFactory {
   }
 
   initTheme () {
-    this.currentTheme = styleGuide.currentTheme()
+    this.currentTheme = this._deps.themeModule.currentTheme()
   }
   get profile () {
     return {
@@ -40,9 +43,9 @@ module.exports = class SettingsTab extends ApiFactory {
     }
   }
   createThemeCheckies () {
-    let themes = styleGuide.getThemes()
+    let themes = this._deps.themeModule.getThemes()
     function onswitchTheme (event, name) {
-      styleGuide.switchTheme(name)
+      this._deps.themeModule.switchTheme(name)
     }
     if (themes) {
       return yo`<div class="card-text themes-container">
@@ -85,7 +88,7 @@ module.exports = class SettingsTab extends ApiFactory {
 
     this._view.pluginInput = yo`<textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>`
 
-    this._view.themes = styleGuide.getThemes()
+    this._view.themes = this._deps.themeModule.getThemes()
     this._view.themesCheckBoxes = this.createThemeCheckies()
     this._view.config.homePage = yo`
 
@@ -156,7 +159,7 @@ module.exports = class SettingsTab extends ApiFactory {
       self.config.set('settings/personal-mode', !self.config.get('settings/personal-mode'))
     }
 
-    styleGuide.switchTheme()
+    this._deps.themeModule.switchTheme()
     return this._view.el
   }
 }