Merge pull request #1919 from ethereum/fixConfig

src/app.js

@@ -123,10 +123,10 @@ class App {
     var fileStorage = new Storage('sol:')
     registry.put({api: fileStorage, name: 'fileStorage'})
 
-    var configStorage = new Storage('config:')
+    var configStorage = new Storage('config-v0.8:')
     registry.put({api: configStorage, name: 'configStorage'})
 
-    self._components.config = new Config(fileStorage)
+    self._components.config = new Config(configStorage)
     registry.put({api: self._components.config, name: 'config'})
 
     self._components.gistHandler = new GistHandler()
@@ -335,7 +335,7 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   registry.put({api: networkModule, name: 'network'})
 
   // ----------------- theme module ----------------------------
-  const themeModule = new ThemeModule()
+  const themeModule = new ThemeModule(registry)
   registry.put({api: themeModule, name: 'themeModule'})
 
   // ----------------- editor panel ----------------------

src/app/tabs/settings-tab.js

@@ -35,11 +35,6 @@ module.exports = class SettingsTab extends BaseApi {
       }
     } /* eslint-enable */
     this.event = new EventManager()
-    this.initTheme()
-  }
-
-  initTheme () {
-    this.currentTheme = this._deps.themeModule.currentTheme()
   }
 
   createThemeCheckies () {
@@ -54,7 +49,7 @@ module.exports = class SettingsTab extends BaseApi {
           <input type="radio" onchange=${event => { onswitchTheme(event, aTheme.name) }} class="align-middle form-check-input" name="theme" id="${aTheme.name}"   >
           <label class="form-check-label" for="${aTheme.name}">${aTheme.name} (${aTheme.quality})</label>
         </div>`
-          if (this.currentTheme === aTheme.name) el.querySelector('input').setAttribute('checked', 'checked')
+          if (this._deps.themeModule.active === aTheme.name) el.querySelector('input').setAttribute('checked', 'checked')
           return el
         })}
       </div>`

src/app/tabs/theme-module.js

 import { BaseApi } from 'remix-plugin'
 import { EventEmitter } from 'events'
-const Storage = require('remix-lib').Storage
 
 const themes = [
   {name: 'Cerulean', quality: 'light', url: 'https://bootswatch.com/4/cerulean/bootstrap.min.css'},
@@ -25,12 +24,14 @@ const profile = {
 
 export class ThemeModule extends BaseApi {
 
-  constructor () {
+  constructor (registry) {
     super(profile)
     this.events = new EventEmitter()
-    this.storage = new Storage('style:')
+    this._deps = {
+      config: registry.get('config').api
+    }
     this.themes = themes.reduce((acc, theme) => ({ ...acc, [theme.name]: theme }), {})
-    this.active = this.storage.exists('theme') ? this.storage.get('theme') : 'Cerulean'
+    this.active = this._deps.config.get('settings/theme') ? this._deps.config.get('settings/theme') : 'Flatly'
   }
 
   /** Return the active theme */
@@ -53,7 +54,7 @@ export class ThemeModule extends BaseApi {
     }
     const next = themeName || this.active   // Name
     const nextTheme = this.themes[next] // Theme
-    this.storage.set('theme', next)
+    this._deps.config.set('settings/theme', next)
     document.getElementById('theme-link').setAttribute('href', nextTheme.url)
     document.documentElement.style.setProperty('--theme', nextTheme.quality)
     if (themeName) this.active = themeName