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"