From 4435f49e17e6c35d08a57d2217eb04dee777df3c Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Wed, 13 Sep 2023 01:19:47 +0000
Subject: [PATCH] Make "dark" theme grey, add "black" theme

---
 webclient/src/App.js          | 20 +++++++++--
 webclient/src/Style-black.css | 68 +++++++++++++++++++++++++++++++++++
 webclient/src/Style-dark.css  |  4 ---
 3 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 webclient/src/Style-black.css

diff --git a/webclient/src/App.js b/webclient/src/App.js
index 3ec3e45..4495d6c 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -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-black.css';
 import './Style-red.css';
 import './fonts/Fonts.css';
 import { BackwardDot, ForwardDot } from './utils.js';
@@ -39,6 +40,11 @@ class App extends React.Component {
 		localStorage.setItem('theme', 'dark');
 	}
 
+	black() {
+		this.setState({ theme: 'black' });
+		localStorage.setItem('theme', 'black');
+	}
+
 	red() {
 		this.setState({ theme: 'red' });
 		localStorage.setItem('theme', 'red');
@@ -72,7 +78,17 @@ class App extends React.Component {
 
 	render() {
 		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 ||
 			document.mozFullscreenEnabled ||
 			document.webkitFullscreenEnabled ||
@@ -85,7 +101,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> - <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 />
 							<span className='slogan'>Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.</span>
 						</p>
diff --git a/webclient/src/Style-black.css b/webclient/src/Style-black.css
new file mode 100644
index 0000000..97bc065
--- /dev/null
+++ b/webclient/src/Style-black.css
@@ -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;
+}
diff --git a/webclient/src/Style-dark.css b/webclient/src/Style-dark.css
index ec9ac45..40a4c3e 100644
--- a/webclient/src/Style-dark.css
+++ b/webclient/src/Style-dark.css
@@ -21,10 +21,6 @@
 	color: #828282;
 }
 
-.dark .item .source-logo {
-	filter: grayscale(1);
-}
-
 .dark .item a {
 	color: #828282;
 }