update to settings and theme-chooser for default to light theme

src/app/tabs/settings-tab.js

@@ -43,6 +43,10 @@ var css = csjs`
   .heading {
     margin-bottom: 0;
   }
+  .explaination {
+    margin-top: 3px;
+    margin-bottom: 3px;
+  }
   input {
     margin-right: 5px;
     cursor: pointer;
@@ -56,6 +60,9 @@ var css = csjs`
   .pluginLoad {
     vertical-align: top;
   }
+  i.warnIt {
+    color: ${styles.appProperties.warningText_Color};
+  }
 }
 `
 module.exports = SettingsTab
@@ -89,6 +96,7 @@ function SettingsTab (container, appAPI, appEvents, opts) {
         <span class="${css.checkboxText}">Enable Optimization</span>
       </div>
       <h4 class="${css.heading}">Themes</h4>
+      <p class="${css.explaination}">If you select a new theme, the page will reload</p>
       <div class="${css.crow}">
         <input class="${css.col1}" name="theme" id="themeLight" type="radio">
         <label for="themeLight">Light Theme</label>
@@ -99,7 +107,7 @@ function SettingsTab (container, appAPI, appEvents, opts) {
       </div>
       <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>Plugin ( <i title="Do not use this feature yet" class="${css.warnIt} 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>
           <textarea rows="4" cols="70" id="plugininput" type="text" class="${css.pluginTextArea}" ></textarea>

src/app/theme/theme-chooser.js

@@ -6,10 +6,10 @@ module.exports = {
 
   chooser: function () {
     var themeStorage = new Storage('style:')
-    if (themeStorage.get('theme') === 'light') {
+    if (themeStorage.get('theme') === 'dark') {
-      return styleGuideLight()
-    } else {
       return styleGuideDark()
+    } else {
+      return styleGuideLight()
     }
   },