Skip to content

Commit 9e0ab5b

Browse files
arnaudjarnaudj
committed
Add dark theme
port and revamp insin/react-hn#96
1 parent c90f035 commit 9e0ab5b

File tree

4 files changed

+64
-23
lines changed

4 files changed

+64
-23
lines changed

‎public/css/style.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@ span.control:hover {
6262
font-size: 13.3333px;
6363
font-family: Verdana, Geneva, sans-serif;
6464
}
65+
66+
.Dark__app__wrap {
67+
background-color: #222;
68+
color: #e3e3e3;
69+
}
70+
6571
.App__header {
6672
color: #00d8ff;
6773
background-color: #222;
@@ -70,6 +76,11 @@ span.control:hover {
7076
vertical-align: middle;
7177
position: relative;
7278
}
79+
.Dark__app__wrap .App__header {
80+
background: #333;
81+
color: #fff;
82+
}
83+
7384
.App__settings {
7485
position: absolute;
7586
top: 6px;
@@ -106,6 +117,11 @@ span.control:hover {
106117
.App__header a.active {
107118
color: #fff;
108119
}
120+
121+
.Dark__app__wrap .App__header a.active {
122+
color: #00d8ff;
123+
}
124+
109125
.App__homelink {
110126
text-decoration: none;
111127
font-weight: bold;
@@ -126,6 +142,9 @@ span.control:hover {
126142
color: #333;
127143
padding: 6px 0;
128144
}
145+
.Dark__app__wrap .App__footer {
146+
color: #d3d3d3;
147+
}
129148
.App__footer a {
130149
color: inherit;
131150
text-decoration: underline;
@@ -137,6 +156,9 @@ span.control:hover {
137156
margin-top: 1em;
138157
margin-bottom: .5em;
139158
}
159+
.Dark__app__wrap .Items__list {
160+
color: #d3d3d3;
161+
}
140162
.ListItem {
141163
margin-bottom: 16px;
142164
}
@@ -164,6 +186,9 @@ span.control:hover {
164186
color: #000;
165187
text-decoration: none;
166188
}
189+
.Dark__app__wrap .Paginator a {
190+
color: #e3e3e3;
191+
}
167192
.Paginator a:hover {
168193
text-decoration: underline;
169194
}
@@ -181,6 +206,11 @@ span.control:hover {
181206
text-decoration: none;
182207
color: #000;
183208
}
209+
210+
.Dark__app__wrap .Item__title a {
211+
color: #e3e3e3;
212+
}
213+
184214
.Item__title a:hover {
185215
text-decoration: underline;
186216
}
@@ -288,6 +318,9 @@ span.control:hover {
288318
.Comment__text a {
289319
color: #000;
290320
}
321+
.Dark__app__wrap .Comment__text a {
322+
color: #e3e3e3;
323+
}
291324
.Comment__text a:visited {
292325
color: #666;
293326
}

‎src/App.js‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -37,32 +37,32 @@ var App = React.createClass({
3737

3838
toggleSettings(e) {
3939
e.preventDefault()
40-
this.setState({showSettings: !this.state.showSettings})
40+
this.setState({ showSettings: !this.state.showSettings })
4141
},
4242

4343
render() {
44-
return <div className="App" onClick={this.state.showSettings && this.toggleSettings}>
45-
<div className="App__wrap">
46-
<div className="App__header">
47-
<Link to="/news" className="App__homelinkicon"><img src="img/logo.png" width="16" height="16" alt="" /></Link>{' '}
48-
<Link to="/news" activeClassName="active" className="App__homelink">React HN</Link>{' '}
49-
<Link to="/newest" activeClassName="active">new</Link>{' | '}
50-
<Link to="/newcomments" activeClassName="active">comments</Link> {' | '}
51-
<Link to="/show" activeClassName="active">show</Link>{' | '}
52-
<Link to="/ask" activeClassName="active">ask</Link>{' | '}
53-
<Link to="/jobs" activeClassName="active">jobs</Link>
54-
<a className="App__settings" tabIndex="0" onClick={this.toggleSettings} onKeyPress={this.toggleSettings}>
55-
{this.state.showSettings ? 'hide settings' : 'settings'}
56-
</a>
57-
{this.state.showSettings && <Settings key="settings"/>}
58-
</div>
59-
<div className="App__content">
60-
{this.props.children}
61-
</div>
62-
<div className="App__footer">
63-
{`react-hn v${__VERSION__} | `}
64-
<a href="https://github.com/insin/react-hn">insin/react-hn</a>
65-
</div>
44+
return <div className={SettingsStore.switchDarkTheme ? 'Dark__app__wrap App' : 'App'} onClick={this.state.showSettings && this.toggleSettings}>
45+
<div className={SettingsStore.switchDarkTheme ? 'Dark__app__wrap App__wrap' : 'App__wrap'}>
46+
<div className="App__header">
47+
<Link to="/news" className="App__homelinkicon"><img src="img/logo.png" width="16" height="16" alt="" /></Link>{' '}
48+
<Link to="/news" activeClassName="active" className="App__homelink">React HN</Link>{' '}
49+
<Link to="/newest" activeClassName="active">new</Link>{' | '}
50+
<Link to="/newcomments" activeClassName="active">comments</Link> {' | '}
51+
<Link to="/show" activeClassName="active">show</Link>{' | '}
52+
<Link to="/ask" activeClassName="active">ask</Link>{' | '}
53+
<Link to="/jobs" activeClassName="active">jobs</Link>
54+
<a className="App__settings" tabIndex="0" onClick={this.toggleSettings} onKeyPress={this.toggleSettings}>
55+
{this.state.showSettings ? 'hide settings' : 'settings'}
56+
</a>
57+
{this.state.showSettings && <Settings key="settings" />}
58+
</div>
59+
<div className="App__content">
60+
{this.props.children}
61+
</div>
62+
<div className="App__footer">
63+
{`react-hn v${__VERSION__} | `}
64+
<a href="https://github.com/insin/react-hn">insin/react-hn</a>
65+
</div>
6666
</div>
6767
</div>
6868
}

‎src/Settings.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,12 @@ var Settings = React.createClass({
5050
</label>
5151
<p>Show comments flagged as deleted in threads.</p>
5252
</div>
53+
<div className="Settings__setting Settings__setting--checkbox">
54+
<label htmlFor="switchDarkTheme">
55+
<input type="checkbox" name="switchDarkTheme" id="switchDarkTheme" checked={SettingsStore.switchDarkTheme}/> switch dark theme
56+
</label>
57+
<p>Switch to dark theme.</p>
58+
</div>
5359
<div className="Settings__setting">
5460
<table>
5561
<tbody>

‎src/stores/SettingsStore.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ var SettingsStore = {
88
replyLinks: true,
99
showDead: false,
1010
showDeleted: false,
11+
switchDarkTheme: false,
1112
titleFontSize: 18,
1213
listSpacing: 16,
1314

@@ -24,6 +25,7 @@ var SettingsStore = {
2425
replyLinks: this.replyLinks,
2526
showDead: this.showDead,
2627
showDeleted: this.showDeleted,
28+
switchDarkTheme: this.switchDarkTheme,
2729
titleFontSize: this.titleFontSize,
2830
listSpacing: this.listSpacing
2931
}))

0 commit comments

Comments
 (0)