From 1b543427025d689bc9d3bcc495c2590be3ff953b Mon Sep 17 00:00:00 2001 From: Tanner Collin 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 (
@@ -58,7 +64,7 @@ class App extends React.Component {

QotNews - this.light()}>Light - this.dark()}>Dark + this.light()}>Light - this.dark()}>Dark - this.red()}>Red
Hacker News, Reddit, Lobsters, and Tildes articles rendered in reader mode.

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; +}