From 1eb181567c874343ba97c624228e4d3c2ac4c1bd Mon Sep 17 00:00:00 2001
From: June <june@jsts.xyz>
Date: Thu, 23 May 2024 23:23:16 +0200
Subject: [PATCH] Introduce a dark theme and color the links with new accent
 colors

The accent colors are based on the c3cat logos pink, but modified such
that they work nicely for links and for the light/dark theme.

Also make the light theme be lighter on the eyes.
---
 assets/css/style.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/assets/css/style.css b/assets/css/style.css
index 3f3e5c5..1a91953 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,7 +1,27 @@
+:root {
+  /* Use a shade of the c3cat logos pink, which works nicely as a link color. */
+  --accent-color-light: #DC049B;
+  /* A modified version of accent-color-light, which works nicely as a link color
+   * and with the dark theme */
+  --accent-color-dark: #dc49b0;
+}
+
 body {
   font-family: system-ui,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,Helvetica,Arial,"Helvetica Neue",sans-serif;
 
   text-align: left;
+
+  /* Use dark grey instead of black to be lighter on the eyes. But also a grey
+   * which still works with the link color nicely. */
+  background-color: #ffffff;
+  color: #2B2B2B;
+
+  @media (prefers-color-scheme: dark) {
+    /* Colors for dark theme, which have enough contrast, but also aren't too harsh on the eyes. */
+    /* See: https://seirdy.one/posts/2020/11/23/website-best-practices/#dark-themes */
+    background-color: #1b1b1b;
+    color: #ebebeb;
+  }
 }
 
 .container {
@@ -19,6 +39,14 @@ img {
 }
 
 
+a:link, a:visited {
+  color: var(--accent-color-light);
+  @media (prefers-color-scheme: dark) {
+    color: var(--accent-color-dark);
+  }
+}
+
+
 .title {
   text-align: center;
 }