diff --git a/src/App.js b/src/App.js index ea9e480..fb96a0b 100644 --- a/src/App.js +++ b/src/App.js @@ -6,6 +6,7 @@ var Settings = require('./Settings') var StoryStore = require('./stores/StoryStore') var UpdatesStore = require('./stores/UpdatesStore') var SettingsStore = require('./stores/SettingsStore') +var CurrentColor = require('./Darkmode') var App = React.createClass({ getInitialState() { @@ -26,7 +27,11 @@ var App = React.createClass({ componentDidMount() { // Empty the prebooted HTML and hydrate using live results from Firebase - this.setState({ prebootHTML: '', showChildren: true }) + this.setState({ + prebootHTML: '', + showChildren: true, + darkMode: SettingsStore.darkMode + }) }, componentWillUnmount() { @@ -48,6 +53,10 @@ var App = React.createClass({ this.setState({showSettings: !this.state.showSettings}) }, + toggleDarkMode() { + this.setState({darkMode: !this.state.darkMode}) + }, + render() { return
@@ -62,7 +71,7 @@ var App = React.createClass({ {this.state.showSettings ? 'hide settings' : 'settings'} - {this.state.showSettings && } + {this.state.showSettings && }
@@ -71,6 +80,7 @@ var App = React.createClass({
insin/react-hn
+
} diff --git a/src/Darkmode.js b/src/Darkmode.js new file mode 100644 index 0000000..1cd1c90 --- /dev/null +++ b/src/Darkmode.js @@ -0,0 +1,27 @@ +var React = require('react') +var SettingsStore = require('./stores/SettingsStore') + +var CurrentColor = React.createClass({ + propTypes: { + darkMode: React.PropTypes.bool + }, + getDefaultProps() { + return { + darkMode: SettingsStore.darkMode + } + }, + componentDidMount() { + document.documentElement.classList.toggle('App--dark', this.props.darkMode) + }, + componentWillReceiveProps(nextProps) { + document.documentElement.classList.toggle('App--dark', nextProps.darkMode) + }, + componentWillUnmount() { + document.documentElement.classList.remove('App--dark') + }, + render() { + return
+ } +}) + +module.exports = CurrentColor