diff --git a/src/app.js b/src/app.js
index 4a1a9f50ee..a0e6475f79 100644
--- a/src/app.js
+++ b/src/app.js
@@ -388,6 +388,10 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   var fileManager = self._components.fileManager
   registry.put({api: fileManager, name: 'filemanager'})
 
+  // ----------------- theme module ----------------------------
+  const themeModule = new ThemeModule()
+  registry.put({api: themeModule, name: 'themeModule'})
+
   // ----------------- editor panel ----------------------
   self._components.editorpanel = new EditorPanel(appStore, appManager, mainPanelComponent)
   registry.put({ api: self._components.editorpanel, name: 'editorpanel' })
@@ -413,11 +417,9 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
   const swapPanelApi = new SwapPanelApi(swapPanelComponent, verticalIconsComponent) // eslint-disable-line
   const mainPanelApi = new SwapPanelApi(mainPanelComponent, verticalIconsComponent) // eslint-disable-line
   const verticalIconsApi = new VerticalIconsApi(verticalIconsComponent) // eslint-disable-line
-  const themeModule = new ThemeModule()
 
   registry.put({api: appManager.proxy(), name: 'pluginmanager'})
   registry.put({api: verticalIconsApi, name: 'verticalicon'})
-  registry.put({api: themeModule, name: 'themeModule'})
 
   pluginManagerComponent.setApp(appManager)
   pluginManagerComponent.setStore(appStore)
diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js
index 350035bbc9..748fd2b096 100644
--- a/src/app/editor/editor.js
+++ b/src/app/editor/editor.js
@@ -71,7 +71,7 @@ class Editor {
       'light': 'chrome',
       'dark': 'chaos'
     }
-    this._deps.themeModule.events.on('switchTheme', (type) => {
+    this._deps.themeModule.events.on('themeChanged', (type) => {
       this.setTheme(type)
     })
 
diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js
index f75693da1c..a3a7c31fea 100644
--- a/src/app/tabs/settings-tab.js
+++ b/src/app/tabs/settings-tab.js
@@ -44,7 +44,7 @@ module.exports = class SettingsTab extends ApiFactory {
   }
   createThemeCheckies () {
     let themes = this._deps.themeModule.getThemes()
-    function onswitchTheme (event, name) {
+    const onswitchTheme = (event, name) => {
       this._deps.themeModule.switchTheme(name)
     }
     if (themes) {
diff --git a/src/app/tabs/theme-module.js b/src/app/tabs/theme-module.js
index b6a77210a1..a334a35d95 100644
--- a/src/app/tabs/theme-module.js
+++ b/src/app/tabs/theme-module.js
@@ -23,7 +23,7 @@ export class ThemeModule extends ApiFactory {
     super()
     this.events = new EventEmitter()
     this.storage = new Storage('style:')
-    this.themes = themes.reduce(theme => ({ [theme.name]: theme }), {})
+    this.themes = themes.reduce((acc, theme) => ({ ...acc, [theme.name]: theme }), {})
     this.active = this.storage.exists('theme') ? this.storage.get('theme') : 'Cerulean'
   }
 
@@ -37,17 +37,17 @@ export class ThemeModule extends ApiFactory {
 
   /** Return the active theme */
   currentTheme () {
-    return this.theme[this.active]
+    return this.themes[this.active]
   }
 
   /** Returns all themes as an array */
   getThemes () {
-    return Object.keys(this.themes).map(key => this.themes(key))
+    return Object.keys(this.themes).map(key => this.themes[key])
   }
 
   /**
    * Change the current theme
-   * @param {string} [themeName] - The name of the theme 
+   * @param {string} [themeName] - The name of the theme
    */
   switchTheme (themeName) {
     if (themeName && !Object.keys(this.themes).includes(themeName)) {
@@ -58,6 +58,6 @@ export class ThemeModule extends ApiFactory {
     this.storage.set('theme', next)
     document.getElementById('theme-link').setAttribute('href', nextTheme.url)
     document.documentElement.style.setProperty('--theme', nextTheme.quality)
-    this.event.emit('switchTheme', nextTheme.quality)
+    this.events.emit('themeChanged', nextTheme.quality)
   }
 }