Make "dark" theme grey, add "black" theme

This commit is contained in:
Tanner Collin 2023-09-13 01:19:47 +00:00
parent 494d89ac30
commit 4435f49e17
3 changed files with 86 additions and 6 deletions

View File

@ -3,6 +3,7 @@ import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import localForage from 'localforage'; import localForage from 'localforage';
import './Style-light.css'; import './Style-light.css';
import './Style-dark.css'; import './Style-dark.css';
import './Style-black.css';
import './Style-red.css'; import './Style-red.css';
import './fonts/Fonts.css'; import './fonts/Fonts.css';
import { BackwardDot, ForwardDot } from './utils.js'; import { BackwardDot, ForwardDot } from './utils.js';
@ -39,6 +40,11 @@ class App extends React.Component {
localStorage.setItem('theme', 'dark'); localStorage.setItem('theme', 'dark');
} }
black() {
this.setState({ theme: 'black' });
localStorage.setItem('theme', 'black');
}
red() { red() {
this.setState({ theme: 'red' }); this.setState({ theme: 'red' });
localStorage.setItem('theme', 'red'); localStorage.setItem('theme', 'red');
@ -72,7 +78,17 @@ class App extends React.Component {
render() { render() {
const theme = this.state.theme; const theme = this.state.theme;
document.body.style.backgroundColor = theme ? '#000' : '#eeeeee';
if (theme === 'dark') {
document.body.style.backgroundColor = '#1a1a1a';
} else if (theme === 'black') {
document.body.style.backgroundColor = '#000';
} else if (theme === 'red') {
document.body.style.backgroundColor = '#000';
} else {
document.body.style.backgroundColor = '#eeeeee';
}
const fullScreenAvailable = document.fullscreenEnabled || const fullScreenAvailable = document.fullscreenEnabled ||
document.mozFullscreenEnabled || document.mozFullscreenEnabled ||
document.webkitFullscreenEnabled || document.webkitFullscreenEnabled ||
@ -85,7 +101,7 @@ class App extends React.Component {
<p> <p>
<Link to='/'>QotNews</Link> <Link to='/'>QotNews</Link>
<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> <span className='theme'><a href='#' onClick={() => this.light()}>Light</a> - <a href='#' onClick={() => this.dark()}>Dark</a> - <a href='#' onClick={() => this.black()}>Black</a> - <a href='#' onClick={() => this.red()}>Red</a></span>
<br /> <br />
<span className='slogan'>Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span> <span className='slogan'>Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
</p> </p>

View File

@ -0,0 +1,68 @@
.black {
color: #ddd;
}
.black a {
color: #ddd;
}
.black input {
color: #ddd;
border: 1px solid #828282;
}
.black button {
background-color: #444444;
border-color: #bbb;
color: #ddd;
}
.black .item {
color: #828282;
}
.black .item .source-logo {
filter: grayscale(1);
}
.black .item a {
color: #828282;
}
.black .item a.link {
color: #ddd;
}
.black .item a.link:visited {
color: #828282;
}
.black .item .info a.hot {
color: #cccccc;
}
.black .article a {
border-bottom: 1px solid #aaaaaa;
}
.black .article u {
border-bottom: 1px solid #aaaaaa;
text-decoration: none;
}
.black .story-text video,
.black .story-text img {
filter: brightness(50%);
}
.black .article .info {
color: #828282;
}
.black .article .info a {
border-bottom: none;
color: #828282;
}
.black .comment.lined {
border-left: 1px solid #444444;
}

View File

@ -21,10 +21,6 @@
color: #828282; color: #828282;
} }
.dark .item .source-logo {
filter: grayscale(1);
}
.dark .item a { .dark .item a {
color: #828282; color: #828282;
} }