diff --git a/ui/js/main.js b/ui/js/main.js index 48f838331..999a13c64 100644 --- a/ui/js/main.js +++ b/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(); diff --git a/ui/js/page/settings/view.jsx b/ui/js/page/settings/view.jsx index 33d9fb638..37b9e4a6a 100644 --- a/ui/js/page/settings/view.jsx +++ b/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) { diff --git a/ui/js/util/setTheme.js b/ui/js/util/setTheme.js new file mode 100644 index 000000000..3e7e94fd2 --- /dev/null +++ b/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;