load initial theme

ui/js/actions/settings.js

@@ -45,16 +45,18 @@ export function doSetClientSetting(key, value) {
   };
 }
 
-export function doSetTheme(name) {
+export function doSetTheme(themeName) {
+  const name = themeName || "light";
   const link = document.getElementById("theme");
 
   return function(dispatch, getState) {
     const { themes } = getState().settings.clientSettings;
     const theme = themes.find(theme => theme.name === name);
 
-    link.href = theme.path;
-
-    dispatch(doSetClientSetting("theme", theme));
+    if (theme) {
+      link.href = theme.path;
+      dispatch(doSetClientSetting("theme", theme));
+    }
   };
 }
 
@@ -64,14 +66,13 @@ export function doGetThemes() {
   // Get all .css files
   const files = readdirSync(path).filter(file => extname(file) === ".css");
 
-  // Get theme name
-  const themes = files.map(file => ({
-    name: file.replace(".css", ""),
-    path: `./themes/${file}`,
-    fullPath: `${path}/${file}`,
-  }));
-
   return function(dispatch, getState) {
+    // Find themes
+    const themes = files.map(file => ({
+      name: file.replace(".css", ""),
+      path: `./themes/${file}`,
+    }));
+
     dispatch(doSetClientSetting("themes", themes));
   };
 }

ui/js/component/app/index.js

@@ -7,9 +7,10 @@ import {
   doAlertError,
   doRecordScroll,
 } from "actions/app";
-import { doFetchRewardedContent } from "actions/content";
 
+import { doFetchRewardedContent } from "actions/content";
 import { doUpdateBalance } from "actions/wallet";
+import { doSetTheme } from "actions/settings";
 import { selectWelcomeModalAcknowledged } from "selectors/app";
 import { selectUser } from "selectors/user";
 import App from "./view";
@@ -28,6 +29,7 @@ const perform = dispatch => ({
   updateBalance: balance => dispatch(doUpdateBalance(balance)),
   fetchRewardedContent: () => dispatch(doFetchRewardedContent()),
   recordScroll: scrollPosition => dispatch(doRecordScroll(scrollPosition)),
+  setTheme: name => dispatch(doSetTheme(name)),
 });
 
 export default connect(select, perform)(App);

ui/js/component/app/view.jsx

@@ -11,6 +11,7 @@ class App extends React.PureComponent {
       checkUpgradeAvailable,
       updateBalance,
       fetchRewardedContent,
+      setTheme,
     } = this.props;
 
     document.addEventListener("unhandledError", event => {
@@ -30,6 +31,8 @@ class App extends React.PureComponent {
     this.scrollListener = () => this.props.recordScroll(window.scrollY);
 
     window.addEventListener("scroll", this.scrollListener);
+
+    setTheme();
   }
 
   componentWillUnmount() {