From 1b543427025d689bc9d3bcc495c2590be3ff953b Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Mon, 8 Aug 2022 20:14:57 +0000
Subject: [PATCH] Add red theme

---
 webclient/src/App.js        | 10 ++++-
 webclient/src/Style-red.css | 85 +++++++++++++++++++++++++++++++++++++
 2 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 webclient/src/Style-red.css

diff --git a/webclient/src/App.js b/webclient/src/App.js
index e70f085..3489093 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-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>
diff --git a/webclient/src/Style-red.css b/webclient/src/Style-red.css
new file mode 100644
index 0000000..42a15ca
--- /dev/null
+++ b/webclient/src/Style-red.css
@@ -0,0 +1,85 @@
+.red {
+	color: #b00;
+	scrollbar-color: #b00 #440000;
+}
+
+.red a {
+	color: #b00;
+}
+
+.red input {
+	color: #b00;
+	border: 1px solid #690000;
+}
+
+.red input::placeholder {
+	color: #690000;
+}
+
+.red hr {
+	background-color: #690000;
+}
+
+.red button {
+	background-color: #440000;
+	border-color: #b00;
+	color: #b00;
+}
+
+.red .item,
+.red .slogan {
+	color: #690000;
+}
+
+.red .item .source-logo {
+	display: none;
+}
+
+.red .item a {
+	color: #690000;
+}
+
+.red .item a.link {
+	color: #b00;
+}
+.red .item a.link:visited {
+	color: #690000;
+}
+
+.red .item .info a.hot {
+	color: #cc0000;
+}
+
+.red .article a {
+	border-bottom: 1px solid #aa0000;
+}
+
+.red .article u {
+	border-bottom: 1px solid #aa0000;
+	text-decoration: none;
+}
+
+.red .story-text img {
+	filter: grayscale(100%) brightness(20%) sepia(100%) hue-rotate(-50deg) saturate(600%) contrast(0.8);
+}
+
+.red .article .info {
+	color: #690000;
+}
+
+.red .article .info a {
+	border-bottom: none;
+	color: #690000;
+}
+
+.red .comment.lined {
+	border-left: 1px solid #440000;
+}
+
+.red .toggleDot {
+	background-color: #440000;
+}
+
+.red .forwardDot {
+	background-color: #440000;
+}