jason/qotnews
1
0
Fork 0
forked from tanner/qotnews
Code Issues Pull Requests Releases Wiki Activity

Add red theme

Browse Source
This commit is contained in:
Tanner Collin
2022-08-08 20:14:57 +00:00
parent 9e9571a3c0
commit 1b54342702
2 changed files with 93 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
webclient/src/App.js
View File

@@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import localForage from 'localforage';
import './Style-light.css';
import './Style-dark.css';
import './Style-red.css';
import './fonts/Fonts.css';
import { ForwardDot } from './utils.js';
import Feed from './Feed.js';
@@ -38,6 +39,11 @@ class App extends React.Component {
localStorage.setItem('theme', 'dark');
}
red() {
this.setState({ theme: 'red' });
localStorage.setItem('theme', 'red');
}
componentDidMount() {
if (!this.cache.length) {
localForage.iterate((value, key) => {
@@ -49,7 +55,7 @@ class App extends React.Component {
render() {
const theme = this.state.theme;
document.body.style.backgroundColor = theme === 'dark' ? '#000' : '#eeeeee';
document.body.style.backgroundColor = theme ? '#000' : '#eeeeee';
return (
<div className={theme}>
@@ -58,7 +64,7 @@ class App extends React.Component {
<p>
<Link to='/'>QotNews</Link>
<span className='theme'><a href='#' onClick={() => this.light()}>Light</a> - <a href='#' onClick={() => this.dark()}>Dark</a></span>
<span className='theme'><a href='#' onClick={() => this.light()}>Light</a> - <a href='#' onClick={() => this.dark()}>Dark</a> - <a href='#' onClick={() => this.red()}>Red</a></span>
<br />
<span className='slogan'>Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
</p>