From b57900c55421f76e2579bbe30da2939f8eb0f611 Mon Sep 17 00:00:00 2001
From: Ian Meyer <k@imeyer.io>
Date: Fri, 13 Sep 2024 23:36:19 +0000
Subject: [PATCH] Automatic dark/light mode

Signed-off-by: Ian Meyer <k@imeyer.io>
---
 static/style.css | 78 ++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 62 insertions(+), 16 deletions(-)

diff --git a/static/style.css b/static/style.css
index 097bae6..5d64eca 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,11 +1,56 @@
 /* Variables */
 :root {
+    /* Common variables */
     --border: 1px solid grey;
     --primary-color: #B56484;
-    --background-color: #dfdfdf;
-    --even-row-color: #CCC;
-    --odd-row-color: #DDD;
-    --header-color: #efefef;
+
+    /* Light mode variables */
+    --background-color-light: #dfdfdf;
+    --even-row-color-light: #CCC;
+    --odd-row-color-light: #DDD;
+    --header-color-light: #efefef;
+    --text-color-light: #333;
+    --text-color-secondary-light: #555;
+    --form-bg-light: #ddd;
+    --content-bg-light: #f9f9f9;
+    --threadpost-bg-light: #fff;
+
+    /* Dark mode variables */
+    --background-color-dark: #222;
+    --even-row-color-dark: #444;
+    --odd-row-color-dark: #333;
+    --header-color-dark: #2c2c2c;
+    --text-color-dark: #e0e0e0;
+    --text-color-secondary-dark: #b0b0b0;
+    --form-bg-dark: #333;
+    --content-bg-dark: #2c2c2c;
+    --threadpost-bg-dark: #333;
+
+    /* Default to light mode */
+    --background-color: var(--background-color-light);
+    --even-row-color: var(--even-row-color-light);
+    --odd-row-color: var(--odd-row-color-light);
+    --header-color: var(--header-color-light);
+    --text-color: var(--text-color-light);
+    --text-color-secondary: var(--text-color-secondary-light);
+    --form-bg: var(--form-bg-light);
+    --content-bg: var(--content-bg-light);
+    --threadpost-bg: var(--threadpost-bg-light);
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: var(--background-color-dark);
+        --even-row-color: var(--even-row-color-dark);
+        --odd-row-color: var(--odd-row-color-dark);
+        --header-color: var(--header-color-dark);
+        --text-color: var(--text-color-dark);
+        --text-color-secondary: var(--text-color-secondary-dark);
+        --form-bg: var(--form-bg-dark);
+        --content-bg: var(--content-bg-dark);
+        --threadpost-bg: var(--threadpost-bg-dark);
+    }
 }
 
 /* Base styles */
@@ -13,6 +58,7 @@ body {
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     font-size: 100%;
     background-color: var(--background-color);
+    color: var(--text-color);
     margin: 0;
     padding: 20px;
 }
@@ -156,12 +202,12 @@ tbody>tr:nth-child(odd) {
 .version {
     font: x-small 'Courier New', Courier, monospace;
     padding: 5px;
-    color: rgb(46, 43, 43);
+    color: var(--text-color-secondary);
 }
 
 /* Thread post styles */
 .threadpost-bubble {
-    background-color: #fff;
+    background-color: var(--threadpost-bg);
     border-radius: 15px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
     margin: 10px 0;
@@ -171,23 +217,23 @@ tbody>tr:nth-child(odd) {
 }
 
 .threadpost-header {
-    border-bottom: 1px solid #e0e0e0;
+    border-bottom: 1px solid var(--text-color-secondary);
     width: 100%;
     padding-bottom: 5px;
     margin-bottom: 5px;
     font-size: 1em;
-    color: #555;
+    color: var(--text-color-secondary);
 }
 
 .threadpost-body {
     width: 100%;
     font-size: 1.1em;
-    color: #333;
+    color: var(--text-color);
 }
 
 /* Form styles */
 .form-container {
-    background-color: #ddd;
+    background-color: var(--form-bg);
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -202,18 +248,19 @@ tbody>tr:nth-child(odd) {
 .form-group label {
     display: block;
     margin-bottom: 5px;
-    color: #555;
+    color: var(--text-color-secondary);
 }
 
 .form-group textarea {
     box-sizing: border-box;
     width: 100%;
     padding: 10px;
-    border: 1px solid #ccc;
+    border: 1px solid var(--text-color-secondary);
     border-radius: 5px;
     font-size: 0.9em;
     resize: none;
-    color: #555;
+    color: var(--text-color);
+    background-color: var(--background-color);
 }
 
 .form-group textarea:focus {
@@ -237,7 +284,6 @@ tbody>tr:nth-child(odd) {
     background-color: #bb509b;
 }
 
-
 .info-column {
     padding: 10px;
 }
@@ -252,8 +298,8 @@ tbody>tr:nth-child(odd) {
 .content-row {
     margin-bottom: 10px;
     padding: 10px;
-    background-color: #f9f9f9;
-    border: 1px solid #eee;
+    background-color: var(--content-bg);
+    border: 1px solid var(--text-color-secondary);
 }
 
 .thread-content-row {