Skip to content

Commit 4671c96

Browse files
tima101tima101
committed
darkTheme #1 
1 parent 30720e8 commit 4671c96

File tree

4 files changed

+154
-17
lines changed

4 files changed

+154
-17
lines changed

‎components/customer/Bookmark.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,18 @@ export default class Bookmark extends React.PureComponent {
5050
NProgress.start();
5151

5252
try {
53-
await addBookmark(Object.assign({ chapterId: chapter._id, chapterSlug: chapter.slug, chapterOrder: chapter.order }, activeSection));
53+
await addBookmark(
54+
Object.assign(
55+
{ chapterId: chapter._id, chapterSlug: chapter.slug, chapterOrder: chapter.order },
56+
activeSection,
57+
),
58+
);
5459
NProgress.done();
55-
notify(`You successfully bookmarked Chapter ${chapter.order - 1}, Section "${
56-
activeSection.text
57-
}".`);
60+
notify(
61+
`You successfully bookmarked Chapter ${chapter.order - 1}, Section "${
62+
activeSection.text
63+
}".`,
64+
);
5865
this.props.changeBookmark(activeSection);
5966
} catch (err) {
6067
NProgress.done();
@@ -100,7 +107,9 @@ export default class Bookmark extends React.PureComponent {
100107
{bookmark ? (
101108
<a href={`#${bookmark.hash}`}>
102109
<MenuItem onClick={this.handleClose}>
103-
Go to section &quot;{bookmark.text}&quot;
110+
Go to section &quot;
111+
{bookmark.text}
112+
&quot;
104113
</MenuItem>
105114
</a>
106115
) : null}

‎pages/_document.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ class MyDocument extends Document {
107107

108108
MyDocument.getInitialProps = (ctx) => {
109109
const pageContext = getContext();
110-
const page = ctx.renderPage(Component => props => (
110+
const page = ctx.renderPage((Component) => (props) => (
111111
<JssProvider
112112
registry={pageContext.sheetsRegistry}
113113
generateClassName={pageContext.generateClassName}

‎pages/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ const Index = ({ user }) => (
5353
<p style={{ textAlign: 'center' }}>
5454
<Link
5555
prefetch
56-
as="/books/builder-book/introduction"
57-
href="/public/read-chapter?bookSlug=builder-book&chapterSlug=introduction"
56+
as="/books/demo-book/introduction"
57+
href="/public/read-chapter?bookSlug=demo-book&chapterSlug=introduction"
5858
>
5959
<Button variant="contained" color="primary" style={styleRaisedButton}>
6060
Live App

‎pages/public/read-chapter.js‎

Lines changed: 137 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ class ReadChapter extends React.Component {
7272
htmlContent,
7373
isMobile: false,
7474
hideHeader: false,
75+
darkTheme: true,
7576
};
7677
}
7778

@@ -83,6 +84,16 @@ class ReadChapter extends React.Component {
8384
if (this.state.isMobile !== isMobile) {
8485
this.setState({ isMobile }); // eslint-disable-line
8586
}
87+
88+
if (typeof localStorage !== 'undefined') {
89+
if (localStorage.getItem('darkTheme') === 'true') {
90+
this.loadDarkTheme();
91+
this.setState({ darkTheme: true });
92+
} else if (localStorage.getItem('darkTheme') === 'false') {
93+
this.loadLightTheme();
94+
this.setState({ darkTheme: false });
95+
}
96+
}
8697
}
8798

8899
componentWillReceiveProps(nextProps) {
@@ -175,13 +186,107 @@ class ReadChapter extends React.Component {
175186
});
176187
};
177188

189+
changeThemeType = () => {
190+
const { darkTheme } = this.state;
191+
192+
if (darkTheme === true) {
193+
this.loadLightTheme();
194+
localStorage.setItem('darkTheme', false);
195+
this.setState({ darkTheme: false });
196+
} else if (darkTheme === false) {
197+
this.loadDarkTheme();
198+
localStorage.setItem('darkTheme', true);
199+
this.setState({ darkTheme: true });
200+
}
201+
};
202+
203+
loadLightTheme = () => {
204+
const $ = document.querySelectorAll.bind(document);
205+
206+
const changeColors = (color, background) => (e) => {
207+
e.style.backgroundColor = background;
208+
e.style.color = color;
209+
};
210+
211+
const elements = [
212+
$('body'),
213+
$('ol li a'),
214+
$('h1'),
215+
$('h2'),
216+
$('h3'),
217+
$('h4'),
218+
$('h5'),
219+
$('h6'),
220+
$('i.material-icons'),
221+
$('p code'),
222+
$('#__next div'),
223+
];
224+
225+
const black = 'black';
226+
const white = 'white';
227+
const blue = '#2289d1';
228+
229+
elements.forEach((e) => e.forEach(changeColors(black, white)));
230+
$('p a').forEach(changeColors(blue, white));
231+
232+
const style = document.createElement('style');
233+
const link = document.createElement('link');
234+
235+
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i');
236+
link.setAttribute('rel', 'stylesheet');
237+
238+
document.head.appendChild(style);
239+
document.head.appendChild(link);
240+
};
241+
242+
loadDarkTheme = () => {
243+
const $ = document.querySelectorAll.bind(document);
244+
245+
const changeColors = (color, background) => (e) => {
246+
e.style.backgroundColor = background;
247+
e.style.color = color;
248+
};
249+
250+
const elements = [
251+
$('body'),
252+
$('ol li a'),
253+
$('h1'),
254+
$('h2'),
255+
$('h3'),
256+
$('h4'),
257+
$('h5'),
258+
$('h6'),
259+
$('i.material-icons'),
260+
$('p code'),
261+
$('#__next div'),
262+
];
263+
264+
const black = 'black';
265+
const white = 'white';
266+
const blue = '#2289d1';
267+
268+
elements.forEach((e) => e.forEach(changeColors(white, black)));
269+
$('p a').forEach(changeColors(blue, white));
270+
271+
const style = document.createElement('style');
272+
const link = document.createElement('link');
273+
274+
link.setAttribute('href', 'https://fonts.googleapis.com/css?family=Roboto+Mono:400,400i');
275+
link.setAttribute('rel', 'stylesheet');
276+
277+
document.head.appendChild(style);
278+
document.head.appendChild(link);
279+
};
280+
178281
closeTocWhenMobile = () => {
179282
this.setState({ showTOC: !this.state.isMobile });
180283
};
181284

182285
renderMainContent() {
183286
const { user, showStripeModal } = this.props;
184-
const { chapter, htmlContent, isMobile, showTOC } = this.state;
287+
const { chapter, htmlContent, isMobile, showTOC, darkTheme } = this.state;
288+
289+
console.log('rendered', darkTheme);
185290

186291
let padding = '20px 20%';
187292
if (!isMobile && showTOC) {
@@ -343,15 +448,15 @@ class ReadChapter extends React.Component {
343448
left: '15px',
344449
}}
345450
>
346-
<i //eslint-disable-line
347-
className="material-icons"
348-
style={styleIcon}
349-
onClick={this.toggleChapterList}
350-
onKeyPress={this.toggleChapterList}
351-
role="button"
352-
>
451+
<i //eslint-disable-line
452+
className="material-icons"
453+
style={styleIcon}
454+
onClick={this.toggleChapterList}
455+
onKeyPress={this.toggleChapterList}
456+
role="button"
457+
>
353458
format_list_bulleted
354-
</i>
459+
</i>
355460

356461
{book.supportURL ? (
357462
<div>
@@ -376,6 +481,29 @@ class ReadChapter extends React.Component {
376481
activeSection={this.state.activeSection}
377482
/>
378483
) : null}
484+
<div>
485+
{this.state.darkTheme ? (
486+
<i
487+
className="material-icons"
488+
style={{ opacity: '0.75', fontSize: '24px', cursor: 'pointer', color: 'white' }}
489+
onClick={this.changeThemeType}
490+
onKeyPress={this.changeThemeType}
491+
role="none"
492+
>
493+
lens
494+
</i>
495+
) : (
496+
<i
497+
className="material-icons"
498+
style={{ opacity: '0.75', fontSize: '24px', cursor: 'pointer', color: 'black' }}
499+
onClick={this.changeThemeType}
500+
onKeyPress={this.changeThemeType}
501+
role="none"
502+
>
503+
lens
504+
</i>
505+
)}
506+
</div>
379507
</div>
380508
</div>
381509
);

0 commit comments

Comments
 (0)