From 24771e794f12975b16785f21a5de881d2f6f8287 Mon Sep 17 00:00:00 2001 From: Viktor Date: Thu, 14 Jul 2016 15:06:39 +0200 Subject: [PATCH 1/4] Added darkmode component --- src/App.js | 14 ++++++++++++-- src/Darkmode.js | 27 +++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 src/Darkmode.js 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 From ce7bd883d608ca7a2c2143c47a58f8ccc4f985ac Mon Sep 17 00:00:00 2001 From: Viktor Date: Thu, 14 Jul 2016 15:07:25 +0200 Subject: [PATCH 2/4] Added darkmode to settings --- src/Settings.js | 6 ++++++ src/stores/SettingsStore.js | 4 +++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/Settings.js b/src/Settings.js index faa2603..79f7a2a 100644 --- a/src/Settings.js +++ b/src/Settings.js @@ -56,6 +56,12 @@ var Settings = React.createClass({

Show comments flagged as deleted in threads.

+
+ +

Use dark mode for better readability in low light

+
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js index ee4c861..95a0e6e 100644 --- a/src/stores/SettingsStore.js +++ b/src/stores/SettingsStore.js @@ -11,6 +11,7 @@ var SettingsStore = { titleFontSize: 18, listSpacing: 16, offlineMode: false, + darkMode: false, load() { var json = storage.get(STORAGE_KEY) @@ -27,7 +28,8 @@ var SettingsStore = { showDeleted: this.showDeleted, titleFontSize: this.titleFontSize, listSpacing: this.listSpacing, - offlineMode: this.offlineMode + offlineMode: this.offlineMode, + darkMode: this.darkMode })) } } From fb3c36aa3f14382816c7d8ae3766530004b21dd5 Mon Sep 17 00:00:00 2001 From: Viktor Date: Thu, 14 Jul 2016 15:08:56 +0200 Subject: [PATCH 3/4] Scratched darkmode component --- src/App.js | 4 +--- src/Darkmode.js | 27 --------------------------- 2 files changed, 1 insertion(+), 30 deletions(-) delete mode 100644 src/Darkmode.js diff --git a/src/App.js b/src/App.js index fb96a0b..66ea643 100644 --- a/src/App.js +++ b/src/App.js @@ -6,7 +6,6 @@ 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() { @@ -58,7 +57,7 @@ var App = React.createClass({ }, render() { - return
+ return
{' '} @@ -80,7 +79,6 @@ var App = React.createClass({ -
} diff --git a/src/Darkmode.js b/src/Darkmode.js deleted file mode 100644 index 1cd1c90..0000000 --- a/src/Darkmode.js +++ /dev/null @@ -1,27 +0,0 @@ -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 From 301ce522fb231596267bf9cc5514c57aea1ef2c2 Mon Sep 17 00:00:00 2001 From: Viktor Date: Thu, 14 Jul 2016 15:41:56 +0200 Subject: [PATCH 4/4] Added styling --- public/css/style.css | 48 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 47 insertions(+), 1 deletion(-) diff --git a/public/css/style.css b/public/css/style.css index 873d762..aacf136 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -1,5 +1,7 @@ +html { + background-color: #00d8ff; +} body { - background-color: #fff; margin: 0; } form { @@ -53,6 +55,14 @@ span.control:hover { } } +.App { + background: #fff; + overflow: auto; + min-height: 100vh; +} +.App--dark { + background: #000; +} .App__wrap { width: 90%; max-width: 1280px; @@ -62,6 +72,10 @@ span.control:hover { font-size: 13.3333px; font-family: Verdana, Geneva, sans-serif; } +.App--dark .App__wrap{ + background-color: #222; + color: #aaa; +} .App__header { color: #00d8ff; background-color: #222; @@ -70,6 +84,10 @@ span.control:hover { vertical-align: middle; position: relative; } +.App--dark .App__header{ + color: #eee; + background-color: #333; +} .App__settings { position: absolute; top: 6px; @@ -106,6 +124,9 @@ span.control:hover { .App__header a.active { color: #fff; } +.App--dark .App__header a.active{ + color: #00d8ff; +} .App__homelink { text-decoration: none; font-weight: bold; @@ -126,6 +147,10 @@ span.control:hover { color: #333; padding: 6px 0; } +.App--dark .App__footer{ + color: #eee; + border-top: 1px solid #000; +} .App__footer a { color: inherit; text-decoration: underline; @@ -164,6 +189,9 @@ span.control:hover { color: #000; text-decoration: none; } +.App--dark .Paginator a{ + color: #eee; +} .Paginator a:hover { text-decoration: underline; } @@ -177,16 +205,25 @@ span.control:hover { color: #666; font-size:18px; } +.App--dark .Item__title { + color: #aaa; +} .Item__title a { text-decoration: none; color: #000; } +.App--dark .Item__title a{ + color: #eee; +} .Item__title a:hover { text-decoration: underline; } .Item__title a:visited { color: #666; } +.App--dark .Item__title a:visited{ + color: #aaa; +} .Item__meta { color: #666; } @@ -231,6 +268,9 @@ span.control:hover { .Comment--new > .Comment__content { background-color: #ffffde; } +.App--dark .Comment--new > .Comment__content { + background-color: #333; +} /* Highlights a comment and its descendants on hover -- too distracting? .Comment:hover > .Comment__content { background-color: #fff; @@ -288,9 +328,15 @@ span.control:hover { .Comment__text a { color: #000; } +.App--dark .Comment__text a{ + color: #ccc; +} .Comment__text a:visited { color: #666; } +.App--dark .Comment__text a:visited{ + color: #ddd; +} .Comment__text p:last-child, .Comment__text pre:last-child { margin-bottom: 0; }