implement theme-system

ui/dist/index.html

@@ -6,7 +6,7 @@
 
         <link href='https://fonts.googleapis.com/css?family=Raleway:600,300' rel='stylesheet' type='text/css'>
         <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600italic,600' rel='stylesheet' type='text/css'>
-        <link href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
+        <link id="theme" href="./css/all.css" rel="stylesheet" type="text/css" media="screen,print" />
         <link rel="icon" type="image/png" href="./img/fav/favicon-32x32.png" sizes="32x32">
         <link rel="icon" type="image/png" href="./img/fav/favicon-194x194.png" sizes="194x194">
         <link rel="icon" type="image/png" href="./img/fav/favicon-96x96.png" sizes="96x96">

ui/js/lbry.js

@@ -19,6 +19,7 @@ let lbry = {
     customLighthouseServers: [],
     showDeveloperMenu: false,
     language: "en",
+    theme: "light",
   },
 };
 

ui/js/page/settings/view.jsx

@@ -3,9 +3,12 @@ import { FormField, FormRow } from "component/form.js";
 import SubHeader from "component/subHeader";
 import lbry from "lbry.js";
 import Link from "component/link";
-
+import getThemes from "util/getThemes";
 const { remote } = require("electron");
 
+const themes = getThemes();
+console.log(themes);
+
 class SettingsPage extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -18,6 +21,7 @@ class SettingsPage extends React.PureComponent {
       showUnavailable: lbry.getClientSetting("showUnavailable"),
       language: lbry.getClientSetting("language"),
       clearingCache: false,
+      theme: lbry.getClientSetting("theme"),
     };
   }
 
@@ -81,6 +85,13 @@ class SettingsPage extends React.PureComponent {
     this.setDaemonSetting("disable_max_key_fee", isDisabled);
   }
 
+  onThemeChange(event) {
+    const value = event.target.value;
+    const link = document.getElementById("theme");
+    link.href = `./themes/${value}.css`;
+    this.props.setClientSetting("theme", value);
+  }
+
   // onMaxUploadPrefChange(isLimited) {
   //   if (!isLimited) {
   //     this.setDaemonSetting("max_upload", 0.0);
@@ -251,6 +262,25 @@ class SettingsPage extends React.PureComponent {
           </div>
         </section>
 
+        <section className="card">
+          <div className="card__content">
+            <h3>{__("Theme")}</h3>
+          </div>
+          <div className="card__content">
+            <FormField
+              type="select"
+              onChange={this.onThemeChange.bind(this)}
+              defaultValue={"Light"}
+              className="form-field__input--inline"
+            >
+              {themes.map((i, k) =>
+                <option key={k} value={i}>{__(`${i} theme`)}</option>
+              )}
+            </FormField>
+
+          </div>
+        </section>
+
         <section className="card">
           <div className="card__content">
             <h3>{__("Application Cache")}</h3>

ui/js/util/getThemes.js

@@ -0,0 +1,20 @@
+const { readdirSync } = require("fs");
+const { extname } = require("path");
+const { remote } = require("electron");
+
+function getThemes() {
+  // Themes path
+  const themesPath = `${remote.app.getAppPath()}/dist/themes`;
+
+  // Get all themes / only .css
+  const themes = readdirSync(themesPath).filter(function(file) {
+    return extname(file) === ".css";
+  });
+
+  // Remove file extension (css)
+  return themes.map(function(theme) {
+    return theme.replace(".css", "");
+  });
+}
+
+export default getThemes;