implement initial fallback for missing theme

load last theme selected

ui/js/main.js

@@ -8,6 +8,7 @@ import store from "store.js";
 import SplashScreen from "component/splash";
 import { doChangePath, doNavigate, doDaemonReady } from "actions/app";
 import { toQueryString } from "util/query_params";
+import setTheme from "util/setTheme";
 import * as types from "constants/action_types";
 
 const env = ENV;
@@ -71,6 +72,9 @@ document.addEventListener("click", event => {
   }
 });
 
+// Load initial theme
+setTheme(lbry.getClientSetting("theme"));
+
 const application = remote.app;
 const dock = application.dock;
 const win = remote.getCurrentWindow();

ui/js/page/settings/view.jsx

@@ -6,6 +6,7 @@ import lbry from "lbry.js";
 import Link from "component/link";
 import FormFieldPrice from "component/formFieldPrice";
 import { remote } from "electron";
+import setTheme from "util/setTheme";
 
 class SettingsPage extends React.PureComponent {
   constructor(props) {
@@ -38,7 +39,7 @@ class SettingsPage extends React.PureComponent {
   }
 
   getThemes() {
-    const themes = this.props.getThemes().data.themes;
+    const { themes } = this.props.getThemes().data;
     this.setState({ themes });
   }
 
@@ -51,6 +52,11 @@ class SettingsPage extends React.PureComponent {
     this._onSettingSaveSuccess();
   }
 
+  setTheme(value) {
+    setTheme(value);
+    this.props.setClientSetting("theme", value);
+  }
+
   onRunOnStartChange(event) {
     this.setDaemonSetting("run_on_startup", event.target.checked);
   }
@@ -72,11 +78,8 @@ class SettingsPage extends React.PureComponent {
   }
 
   onThemeChange(event) {
-    // Todo: Add better way to handle this
-    const value = event.target.value;
-    const link = document.getElementById("theme");
-    link.href = `./themes/${value}.css`;
-    this.props.setClientSetting("theme", value);
+    const { value } = event.target;
+    this.setTheme(value);
   }
 
   // onMaxUploadPrefChange(isLimited) {

ui/js/util/setTheme.js

@@ -0,0 +1,18 @@
+import lbry from "lbry";
+import { existsSync } from "fs";
+import { remote } from "electron";
+
+function setTheme(name) {
+  const link = document.getElementById("theme");
+  const file = `${name}.css`;
+  const path = `${remote.app.getAppPath()}/dist/themes/${file}`;
+
+  if (existsSync(path)) {
+    link.href = `./themes/${file}`;
+    lbry.setClientSetting("theme", name);
+  } else {
+    lbry.setClientSetting("theme", "light");
+  }
+}
+
+export default setTheme;