diff --git a/src/renderer/component/app/index.js b/src/renderer/component/app/index.js
index e68f66443..b5c8a2218 100644
--- a/src/renderer/component/app/index.js
+++ b/src/renderer/component/app/index.js
@@ -3,6 +3,7 @@ import { selectPageTitle, selectHistoryIndex, selectActiveHistoryEntry } from 'l
 import { doRecordScroll } from 'redux/actions/navigation';
 import { selectUser } from 'lbryinc';
 import { doAlertError } from 'redux/actions/app';
+import { selectThemePath } from 'redux/selectors/settings';
 import App from './view';
 
 const select = state => ({
@@ -10,6 +11,7 @@ const select = state => ({
   user: selectUser(state),
   currentStackIndex: selectHistoryIndex(state),
   currentPageAttributes: selectActiveHistoryEntry(state),
+  theme: selectThemePath(state),
 });
 
 const perform = dispatch => ({
diff --git a/src/renderer/component/app/view.jsx b/src/renderer/component/app/view.jsx
index 26c2cb6a9..c083ba695 100644
--- a/src/renderer/component/app/view.jsx
+++ b/src/renderer/component/app/view.jsx
@@ -6,7 +6,6 @@ import ReactModal from 'react-modal';
 import throttle from 'util/throttle';
 import SideBar from 'component/sideBar';
 import Header from 'component/header';
-import { whatIsTheTheme } from 'redux/selectors/settings';
 import { openContextMenu } from '../../util/contextMenu';
 
 type Props = {
@@ -15,6 +14,7 @@ type Props = {
   currentStackIndex: number,
   currentPageAttributes: { path: string, scrollY: number },
   pageTitle: ?string,
+  theme: string,
 };
 
 class App extends React.PureComponent<Props> {
@@ -25,7 +25,7 @@ class App extends React.PureComponent<Props> {
   }
 
   componentWillMount() {
-    const { alertError } = this.props;
+    const { alertError, theme } = this.props;
 
     // TODO: create type for this object
     // it lives in jsonrpc.js
@@ -34,7 +34,7 @@ class App extends React.PureComponent<Props> {
     });
 
     // $FlowFixMe
-    document.documentElement.setAttribute('data-theme', whatIsTheTheme());
+    document.documentElement.setAttribute('data-theme', theme);
   }
 
   componentDidMount() {
@@ -54,12 +54,17 @@ class App extends React.PureComponent<Props> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const { currentStackIndex: prevStackIndex } = prevProps;
-    const { currentStackIndex, currentPageAttributes } = this.props;
+    const { currentStackIndex: prevStackIndex, theme: prevTheme } = prevProps;
+    const { currentStackIndex, currentPageAttributes, theme } = this.props;
 
     if (this.mainContent && currentStackIndex !== prevStackIndex && currentPageAttributes) {
       this.mainContent.scrollTop = currentPageAttributes.scrollY || 0;
     }
+
+    if (prevTheme !== theme) {
+      // $FlowFixMe
+      document.documentElement.setAttribute('data-theme', theme);
+    }
   }
 
   componentWillUnmount() {
diff --git a/yarn.lock b/yarn.lock
index 60f05346b..0461d6aab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -101,6 +101,10 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@lbry/color@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@lbry/color/-/color-1.0.3.tgz#ec22b2c48b0e358759528fb3bbe7ba468d4e41ca"
+
 "@mapbox/hast-util-table-cell-style@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@mapbox/hast-util-table-cell-style/-/hast-util-table-cell-style-0.1.3.tgz#5b7166ae01297d72216932b245e4b2f0b642dca6"