Add color themes.

9 files changed, 210 insertions, 3 deletions

diff --git a/public/themes/gray.css b/public/themes/gray.css
new file mode 100644
index 0000000..1382d81
--- /dev/null
+++ b/public/themes/gray.css
@@ -0,0 +1,46 @@
+/* light gray */
+:root {
+	--color-head: hsl(0, 0%, 85%);
+	--color-body: hsl(0, 0%, 95%);
+	--color-text: hsl(0, 0%, 100%);
+
+	--color-post-head: hsl(0, 0%, 85%);
+	--color-post-body: hsl(0, 0%, 98%);
+
+	--color-table-head: hsl(0, 0%, 85%);
+	--color-table-foot: hsl(0, 0%, 90%);
+	--color-table-body: hsl(0, 0%, 98%);
+	--color-table-stripe: hsl(0, 0%, 96%);
+
+	--color-focus: hsl(210, 40%, 65%);
+
+	--color-blue: hsl(240, 100%, 50%);
+	--color-red: hsl(0, 100%, 35%);
+	--color-green: hsl(120, 100%, 30%);
+
+	--color-accent: hsl(0, 60%, 40%);
+}
+
+/* dark gray */
+@media (prefers-color-scheme: dark) {
+:root {
+	--color-head: hsl(0, 0%, 75%);
+	--color-body: hsl(0, 0%, 85%);
+	--color-text: hsl(0, 0%, 95%);
+
+	--color-post-head: hsl(0, 0%, 75%);
+	--color-post-body: hsl(0, 0%, 90%);
+
+	--color-table-head: hsl(0, 0%, 75%);
+	--color-table-foot: hsl(0, 0%, 80%);
+	--color-table-body: hsl(0, 0%, 90%);
+	--color-table-stripe: hsl(0, 0%, 88%);
+
+	--color-focus: hsl(210, 40%, 60%);
+
+	--color-blue: hsl(240, 100%, 40%);
+	--color-red: hsl(0, 100%, 35%);
+	--color-green: hsl(120, 100%, 30%);
+
+	--color-accent: hsl(0, 60%, 35%);
+}}
diff --git a/public/themes/pink.css b/public/themes/pink.css
new file mode 100644
index 0000000..9f57650
--- /dev/null
+++ b/public/themes/pink.css
@@ -0,0 +1,35 @@
+/* light tan */
+:root {
+	--color-head: hsl(5, 35%, 85%);
+	--color-body: hsl(5, 35%, 95%);
+	--color-text: hsl(5, 35%, 100%);
+
+	--color-post-head: hsl(5, 35%, 85%);
+	--color-post-body: hsl(5, 35%, 98%);
+
+	--color-table-head: hsl(5, 35%, 85%);
+	--color-table-foot: hsl(5, 35%, 90%);
+	--color-table-body: hsl(5, 35%, 98%);
+	--color-table-stripe: hsl(5, 20%, 95%);
+
+	--color-accent: hsl(340, 60%, 40%);
+}
+
+/* dark tan */
+@media (prefers-color-scheme: dark) {
+:root {
+	--color-head: hsl(5, 35%, 75%);
+	--color-body: hsl(5, 35%, 85%);
+	--color-text: hsl(5, 35%, 95%);
+
+	--color-post-head: hsl(5, 35%, 75%);
+	--color-post-body: hsl(5, 35%, 90%);
+
+	--color-table-head: hsl(5, 35%, 75%);
+	--color-table-foot: hsl(5, 35%, 80%);
+	--color-table-body: hsl(5, 35%, 90%);
+	--color-table-stripe: hsl(5, 35%, 87%);
+
+	--color-accent: hsl(340, 60%, 35%);
+}}
+
diff --git a/public/themes/steel.css b/public/themes/steel.css
new file mode 100644
index 0000000..d491583
--- /dev/null
+++ b/public/themes/steel.css
@@ -0,0 +1,35 @@
+/* light tan */
+:root {
+	--color-head: hsl(220, 15%, 85%);
+	--color-body: hsl(220, 15%, 95%);
+	--color-text: hsl(220, 15%, 100%);
+
+	--color-post-head: hsl(220, 15%, 85%);
+	--color-post-body: hsl(220, 15%, 98%);
+
+	--color-table-head: hsl(220, 15%, 85%);
+	--color-table-foot: hsl(220, 15%, 90%);
+	--color-table-body: hsl(220, 15%, 98%);
+	--color-table-stripe: hsl(220, 20%, 95%);
+
+	--color-accent: hsl(340, 60%, 40%);
+}
+
+/* dark tan */
+@media (prefers-color-scheme: dark) {
+:root {
+	--color-head: hsl(220, 15%, 75%);
+	--color-body: hsl(220, 15%, 85%);
+	--color-text: hsl(220, 15%, 95%);
+
+	--color-post-head: hsl(220, 15%, 75%);
+	--color-post-body: hsl(220, 15%, 90%);
+
+	--color-table-head: hsl(220, 15%, 75%);
+	--color-table-foot: hsl(220, 15%, 80%);
+	--color-table-body: hsl(220, 15%, 90%);
+	--color-table-stripe: hsl(220, 15%, 87%);
+
+	--color-accent: hsl(340, 60%, 35%);
+}}
+
diff --git a/public/themes/tan.css b/public/themes/tan.css
new file mode 100644
index 0000000..6a06c49
--- /dev/null
+++ b/public/themes/tan.css
@@ -0,0 +1,35 @@
+/* light tan */
+:root {
+	--color-head: hsl(35, 15%, 85%);
+	--color-body: hsl(35, 15%, 95%);
+	--color-text: hsl(35, 15%, 100%);
+
+	--color-post-head: hsl(35, 15%, 85%);
+	--color-post-body: hsl(35, 15%, 98%);
+
+	--color-table-head: hsl(35, 15%, 85%);
+	--color-table-foot: hsl(35, 15%, 90%);
+	--color-table-body: hsl(35, 15%, 98%);
+	--color-table-stripe: hsl(35, 20%, 95%);
+
+	--color-accent: hsl(340, 60%, 40%);
+}
+
+/* dark tan */
+@media (prefers-color-scheme: dark) {
+:root {
+	--color-head: hsl(35, 15%, 75%);
+	--color-body: hsl(35, 15%, 85%);
+	--color-text: hsl(35, 15%, 95%);
+
+	--color-post-head: hsl(35, 15%, 75%);
+	--color-post-body: hsl(35, 15%, 90%);
+
+	--color-table-head: hsl(35, 15%, 75%);
+	--color-table-foot: hsl(35, 15%, 80%);
+	--color-table-body: hsl(35, 15%, 90%);
+	--color-table-stripe: hsl(35, 15%, 87%);
+
+	--color-accent: hsl(340, 60%, 35%);
+}}
+
diff --git a/public/themes/yellow.css b/public/themes/yellow.css
new file mode 100644
index 0000000..62a7603
--- /dev/null
+++ b/public/themes/yellow.css
@@ -0,0 +1,46 @@
+/* light yellow */
+:root {
+	--color-head: hsl(48, 50%, 85%);
+	--color-body: hsl(48, 50%, 95%);
+	--color-text: hsl(48, 50%, 100%);
+
+	--color-post-head: hsl(48, 50%, 85%);
+	--color-post-body: hsl(48, 50%, 98%);
+
+	--color-table-head: hsl(48, 50%, 85%);
+	--color-table-foot: hsl(48, 50%, 90%);
+	--color-table-body: hsl(48, 50%, 98%);
+	--color-table-stripe: hsl(48, 50%, 96%);
+
+	--color-focus: hsl(210, 40%, 65%);
+
+	--color-blue: hsl(240, 100%, 50%);
+	--color-red: hsl(0, 100%, 35%);
+	--color-green: hsl(120, 100%, 30%);
+
+	--color-accent: hsl(0, 60%, 40%);
+}
+
+/* dark yellow */
+@media (prefers-color-scheme: dark) {
+:root {
+	--color-head: hsl(0, 0%, 75%);
+	--color-body: hsl(0, 0%, 85%);
+	--color-text: hsl(0, 0%, 95%);
+
+	--color-post-head: hsl(0, 0%, 75%);
+	--color-post-body: hsl(0, 0%, 90%);
+
+	--color-table-head: hsl(0, 0%, 75%);
+	--color-table-foot: hsl(0, 0%, 80%);
+	--color-table-body: hsl(0, 0%, 90%);
+	--color-table-stripe: hsl(0, 0%, 88%);
+
+	--color-focus: hsl(210, 40%, 60%);
+
+	--color-blue: hsl(240, 100%, 40%);
+	--color-red: hsl(0, 100%, 35%);
+	--color-green: hsl(120, 100%, 30%);
+
+	--color-accent: hsl(0, 60%, 35%);
+}}
diff --git a/schema.sql b/schema.sql
index 85e5ba4..e25c5b6 100644
--- a/schema.sql
+++ b/schema.sql
@@ -35,7 +35,7 @@ create table if not exists users (
 
 insert or ignore into
 	users (user_id, name, mail, ctime)
-	values (0, 'Deleted', 'deleted@rally-the-troops.com', null)
+	values (0, 'Deleted', 'deleted@nowhere', null)
 ;
 
 create table if not exists user_last_seen (
diff --git a/server.js b/server.js
index be8a64c..23228ed 100644
--- a/server.js
+++ b/server.js
@@ -167,6 +167,8 @@ let app = express()
 
 app.locals.SITE_NAME = SITE_NAME
 app.locals.SITE_URL = SITE_URL
+app.locals.SITE_THEME = process.env.SITE_THEME
+app.locals.SITE_ICON = process.env.SITE_ICON
 app.locals.ENABLE_MAIL = !!mailer
 app.locals.ENABLE_WEBHOOKS = !!WEBHOOKS
 app.locals.ENABLE_FORUM = process.env.FORUM | 0
diff --git a/views/head.pug b/views/head.pug
index b10c3ce..8b3f25b 100644
--- a/views/head.pug
+++ b/views/head.pug
@@ -4,6 +4,8 @@ meta(name="viewport" content="width=device-width,initial-scale=1")
 link(rel="icon" type="image/svg+xml" href="/favicon.svg")
 link(rel="stylesheet" href="/fonts/fonts.css")
 link(rel="stylesheet" href="/style.css")
+if SITE_THEME
+	link(rel="stylesheet" href="/themes/"+SITE_THEME)
 
 mixin social(title,description,game)
 	meta(property="og:title" content=title)
@@ -11,7 +13,10 @@ mixin social(title,description,game)
 	if game
 		meta(property="og:image" content=SITE_URL+"/"+game+"/cover.2x.jpg")
 	else
-		meta(property="og:image" content=SITE_URL+"/images/rally-the-troops.png")
+		if SITE_ICON
+			meta(property="og:image" content=SITE_URL+"/images/"+SITE_ICON)
+		else
+			meta(property="og:image" content=SITE_URL+"/images/rally-the-troops.png")
 	meta(property="og:description" content=description)
 
 mixin gamecover(title_id)
diff --git a/views/header.pug b/views/header.pug
index 454c35a..d386969 100644
--- a/views/header.pug
+++ b/views/header.pug
@@ -1,6 +1,9 @@
 header
 	a(href="/")
-		img(src="/images/rally-the-troops.svg" width=48 height=48)
+		if SITE_ICON
+			img(src="/images/"+SITE_ICON width=48 height=48)
+		else
+			img(src="/images/rally-the-troops.svg" width=48 height=48)
 	nav
 		a(href="/about") About
 		if user