successful 1st part of implementing the theme switch

src/app/panels/terminal.js

@@ -17,10 +17,10 @@ var csjs = require('csjs-inject')
 // var styles = styleGuide()
 
 var styleGuide = require('../theme/theme-chooser')
-console.log(styleGuide)
+// console.log(styleGuide)
 // var styleGuide = remixLib.ui.styleGuide
 // var styles = styleGuide('fred')
-var styles = styleGuide()
+var styles = styleGuide.chooser()
 
 var css = csjs`
   .panel              {

src/app/tabs/settings-tab.js

@@ -2,12 +2,12 @@
 var $ = require('jquery')
 var yo = require('yo-yo')
 var QueryParams = require('../../lib/query-params')
+var Storage = require('../../storage')
+var styleGuide = require('../theme/theme-chooser')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
-var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
-var styles = styleGuide()
+var styles = styleGuide.chooser()
 var helper = require('../../lib/helper')
 var modal = require('../ui/modal-dialog-custom')
 
@@ -37,6 +37,9 @@ var css = csjs`
   .select {
     ${styles.rightPanel.settingsTab.dropdown_SelectCompiler}
   }
+  .heading {
+    margin-bottom: 0;
+  }
   input {
     margin-right: 3px;
   }
@@ -81,11 +84,20 @@ function SettingsTab (container, appAPI, appEvents, opts) {
       <hr>
       <div class="${css.crowNoFlex}">
         <div>Plugin (<i title="Do not use this feature yet" class="fa fa-exclamation-triangle" aria-hidden="true"></i><span> Do not use this alpha feature if you are not sure what you are doing!</span>)</div>
-         <div>
+        <div>
           <textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>
           <input onclick=${loadPlugin} type="button" value="Load" class="${css.pluginLoad}">
-         </div>
         </div>
+      </div>
+      <h4 class="${css.heading}">Themes</h4>
+      <div class="${css.crow}">
+        <div><input class="${css.col1}" name="theme" id="themeLight" type="radio"></div>
+        <span class="${css.radioText}">Light Theme</span>
+      </div>
+      <div class="${css.crow}">
+        <div><input class="${css.col1}" name="theme" id="themeDark" type="radio"></div>
+        <span class="${css.radioText}">Dark Theme</span>
+      </div>
     </div>
   `
 
@@ -124,6 +136,29 @@ function SettingsTab (container, appAPI, appEvents, opts) {
     appAPI.setOptimize(optimize, true)
   })
 
+  var themeStorage = new Storage('style:')
+  var currTheme = themeStorage.get('theme')
+  var themeDark = el.querySelector('#themeDark')
+  var themeLight = el.querySelector('#themeLight')
+
+  if (currTheme === 'dark') {
+    themeDark.setAttribute('checked', 'checked')
+  } else {
+    themeLight.setAttribute('checked', 'checked')
+  }
+
+  themeDark.addEventListener('change', function () {
+    console.log('change dark theme')
+    styleGuide.switchTheme('dark')
+    window.location.reload()
+  })
+
+  themeLight.addEventListener('change', function () {
+    console.log('change to light theme')
+    styleGuide.switchTheme('light')
+    window.location.reload()
+  })
+
   // ----------------- version selector-------------
 
   // clear and disable the version selector

src/app/theme/theme-chooser.js

@@ -1,18 +1,27 @@
 var remixLib = require('remix-lib')
-var styleGuide = remixLib.ui.styleGuide
+var styleGuideLight = remixLib.ui.styleGuide
 var styleGuideDark = remixLib.ui.styleGuideDark
-module.exports = function () {
-   // if (storage.get('theme') === 'light' ) {
-   //    return styleGuide
-   // } else {
-   //    return styleGuideDark
-   // }
-  return styleGuideDark()
-  //errors cannot find styleGuideDark
+var Storage = require('../../storage')
+module.exports = {
 
-  //return styleGuide()
-  //works
+  chooser: function () {
+    var themeStorage = new Storage('style:')
+    if (themeStorage.get('theme') === 'light') {
+      return styleGuideLight()
+    } else {
+      return styleGuideDark()
+    }
+  },
 
-  //return styleGuide
-  // does not work - it needs the prenthesies - to make it return the function
+  switchTheme: function (theme) {
+    var themeStorage = new Storage('style:')
+    themeStorage.set('theme', theme)
+    if (theme === 'dark') {
+      return styleGuideDark()
+    } else if (theme === 'light') {
+      return styleGuideLight()
+    } else {
+      return styleGuideLight()
+    }
+  }
 }