From 08683fa5a6ef6c9a4eb4727d1723dbc5b6c2cdc8 Mon Sep 17 00:00:00 2001
From: spikecodes <19519553+spikecodes@users.noreply.github.com>
Date: Sun, 10 Jan 2021 18:15:34 -0800
Subject: [PATCH] Light theme

---
 src/settings.rs          |  5 +++--
 src/utils.rs             | 11 ++++++++++-
 static/style.css         | 27 ++++++++++++++++++++++-----
 templates/base.html      |  5 ++++-
 templates/post.html      |  2 --
 templates/search.html    |  2 --
 templates/settings.html  | 11 +++++++++--
 templates/subreddit.html |  2 --
 templates/user.html      |  2 --
 templates/wiki.html      |  2 --
 10 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/settings.rs b/src/settings.rs
index 5ce566f..2fdb72f 100644
--- a/src/settings.rs
+++ b/src/settings.rs
@@ -13,6 +13,7 @@ struct SettingsTemplate {
 
 #[derive(serde::Deserialize)]
 pub struct SettingsForm {
+	theme: Option<String>,
 	front_page: Option<String>,
 	layout: Option<String>,
 	wide: Option<String>,
@@ -32,8 +33,8 @@ pub async fn get(req: HttpRequest) -> HttpResponse {
 pub async fn set(req: HttpRequest, form: Form<SettingsForm>) -> HttpResponse {
 	let mut res = HttpResponse::Found();
 
-	let names = vec!["front_page", "layout", "wide", "comment_sort", "hide_nsfw"];
-	let values = vec![&form.front_page, &form.layout, &form.wide, &form.comment_sort, &form.hide_nsfw];
+	let names = vec!["theme", "front_page", "layout", "wide", "comment_sort", "hide_nsfw"];
+	let values = vec![&form.theme, &form.front_page, &form.layout, &form.wide, &form.comment_sort, &form.hide_nsfw];
 
 	for (i, name) in names.iter().enumerate() {
 		match values[i] {
diff --git a/src/utils.rs b/src/utils.rs
index 1ddf171..b493a61 100644
--- a/src/utils.rs
+++ b/src/utils.rs
@@ -91,9 +91,12 @@ pub struct Params {
 #[template(path = "error.html", escape = "none")]
 pub struct ErrorTemplate {
 	pub message: String,
+	pub prefs: Preferences,
 }
 
+#[derive(Default)]
 pub struct Preferences {
+	pub theme: String,
 	pub front_page: String,
 	pub layout: String,
 	pub wide: String,
@@ -108,6 +111,7 @@ pub struct Preferences {
 // Build preferences from cookies
 pub fn prefs(req: HttpRequest) -> Preferences {
 	Preferences {
+		theme: cookie(&req, "theme"),
 		front_page: cookie(&req, "front_page"),
 		layout: cookie(&req, "layout"),
 		wide: cookie(&req, "wide"),
@@ -262,7 +266,12 @@ pub async fn fetch_posts(path: &str, fallback_title: String) -> Result<(Vec<Post
 //
 
 pub async fn error(msg: String) -> HttpResponse {
-	let body = ErrorTemplate { message: msg }.render().unwrap_or_default();
+	let body = ErrorTemplate {
+		message: msg,
+		prefs: Preferences::default(),
+	}
+	.render()
+	.unwrap_or_default();
 	HttpResponse::NotFound().content_type("text/html").body(body)
 }
 
diff --git a/static/style.css b/static/style.css
index 43df3c7..8077c8e 100644
--- a/static/style.css
+++ b/static/style.css
@@ -3,6 +3,7 @@
 :root {
 	--accent: aqua;
 	--green: #5cff85;
+	--nsfw: #FF5C5D;
 	--text: white;
 	--foreground: #222;
 	--background: #0F0F0F;
@@ -13,7 +14,7 @@
 }
 
 ::selection {
-	color: var(--background);
+	color: var(--foreground);
 	background: var(--accent);
 }
 
@@ -127,6 +128,20 @@ aside {
 	opacity: 0.5;
 }
 
+/* Light Theme */
+
+.light {
+	--accent: #009a9a;
+	--green: #00a229;
+	--text: black;
+	--foreground: #f5f5f5;
+	--background: #DDD;
+	--outside: #ECECEC;
+	--post: #eee;
+	--highlighted: white;
+	--shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
 /* User & Subreddit */
 
 #user, #subreddit, #sidebar {
@@ -225,6 +240,7 @@ select, #search {
 #searchbox {
 	display: flex;
 	box-shadow: var(--shadow);
+	border-radius: 5px;
 }
 
 #searchbox > *, #sort_submit {
@@ -308,7 +324,7 @@ input[type="submit"]:hover { color: var(--accent); }
 }
 
 #sort_options > a, footer > a {
-	color: lightgrey;
+	color: var(--text);
 	padding: 10px 20px;
 	text-align: center;
 	cursor: pointer;
@@ -317,7 +333,7 @@ input[type="submit"]:hover { color: var(--accent); }
 
 #sort_options > a.selected {
 	background: var(--accent);
-	color: var(--background);
+	color: var(--foreground);
 }
 
 #sort_options > a:not(.selected):hover {
@@ -454,9 +470,9 @@ input[type="submit"]:hover { color: var(--accent); }
 }
 
 .nsfw {
-	color: #FF5C5D;
+	color: var(--nsfw);
 	margin-top: 20px;
-	border: 1px solid #FF5C5D;
+	border: 1px solid var(--nsfw);
 	padding: 5px;
 	font-size: 12px;
 	border-radius: 5px;
@@ -676,6 +692,7 @@ input[type="submit"]:hover { color: var(--accent); }
 	border-radius: 5px;
 	box-shadow: var(--shadow);
 	margin-left: 20px;
+	background: var(--foreground);
 }
 
 #save {
diff --git a/templates/base.html b/templates/base.html
index 6f8649a..4ac0cb1 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -11,7 +11,10 @@
 		<link rel="stylesheet" href="/style.css">
 		{% endblock %}
 		</head>
-	<body class="{% block ui %}{% endblock %}">
+	<body class="
+		{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}
+		{% if prefs.wide == "on" %} wide{% endif %}
+		{% if prefs.theme == "light" %} light{% endif %}">
 		<!-- NAVIGATION BAR -->
 		<nav>
 			<p id="logo">
diff --git a/templates/post.html b/templates/post.html
index f0e25da..f5f92fe 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -7,8 +7,6 @@
 	{% call utils::search(["/r/", post.community.as_str()].concat(), "") %}
 {% endblock %}
 
-{% block ui %}{% if prefs.wide == "on" %} wide{% endif %}{% endblock %}
-
 {% block root %}/r/{{ post.community }}{% endblock %}{% block location %}r/{{ post.community }}{% endblock %}
 {% block head %}
 	{% call super() %}
diff --git a/templates/search.html b/templates/search.html
index a3ab57b..7aeca0f 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -3,8 +3,6 @@
 
 {% block title %}Libreddit: search results - {{ params.q }}{% endblock %}
 
-{% block ui %}{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}{% if prefs.wide == "on" %} wide{% endif %}{% endblock %}
-
 {% block content %}
 	<div id="column_one">
 		<form id="search_sort">
diff --git a/templates/settings.html b/templates/settings.html
index a5fe024..2eeb953 100644
--- a/templates/settings.html
+++ b/templates/settings.html
@@ -10,13 +10,20 @@
 {% block content %}
 <form id="settings" action="/settings" method="POST">
 	<div id="prefs">
+		<p>Appearance</p>
+		<div id="theme">
+			<label for="theme">Theme:</label>
+			<select name="theme"> 
+				{% call utils::options(prefs.theme, ["dark", "light"], "dark") %}
+			</select>
+		</div>
 		<p>Interface</p>
 		<div id="front_page">
 			<label for="front_page">Front page:</label>
 			<select name="front_page"> 
 				{% call utils::options(prefs.front_page, ["popular", "all"], "popular") %}
 			</select>
-		</div>			
+		</div>
 		<div id="layout">
 			<label for="layout">Layout:</label>
 			<select name="layout"> 
@@ -27,7 +34,7 @@
 			<label for="wide">Wide UI:</label>
 			<input type="checkbox" name="wide" {% if prefs.wide == "on" %}checked{% endif %}>
 		</div>
-		<p>Sorting / Filtering</p>
+		<p>Content</p>
 		<div id="comment_sort">
 			<label for="comment_sort">Default comment sort:</label>
 			<select name="comment_sort"> 
diff --git a/templates/subreddit.html b/templates/subreddit.html
index cec1a89..a246b8d 100644
--- a/templates/subreddit.html
+++ b/templates/subreddit.html
@@ -11,8 +11,6 @@
 	{% call utils::search(["/r/", sub.name.as_str()].concat(), "") %}
 {% endblock %}
 
-{% block ui %}{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}{% if prefs.wide == "on" %} wide{% endif %}{% endblock %}
-
 {% block body %}
 	<main>
 		<div id="column_one">
diff --git a/templates/user.html b/templates/user.html
index e41233b..e4e5f53 100644
--- a/templates/user.html
+++ b/templates/user.html
@@ -7,8 +7,6 @@
 
 {% block title %}{{ user.name.replace("u/", "") }} (u/{{ user.name }}) - Libreddit{% endblock %}
 
-{% block ui %}{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}{% if prefs.wide == "on" %} wide{% endif %}{% endblock %}
-
 {% block body %}
 	<main>
 		<div id="column_one">
diff --git a/templates/wiki.html b/templates/wiki.html
index fe9f2c0..2bf1da1 100644
--- a/templates/wiki.html
+++ b/templates/wiki.html
@@ -6,8 +6,6 @@
 	{% else %}Libreddit{% endif %}
 {% endblock %}
 
-{% block ui %}{% if prefs.wide == "on" %} wide{% endif %}{% endblock %}
-
 {% block search %}
 	{% call utils::search(["/r/", sub.as_str()].concat(), "") %}
 {% endblock %}