From a1e194861a63457f889bfdbff8a21ed6e519cf44 Mon Sep 17 00:00:00 2001
From: speedie <speedie@duck.com>
Date: Tue, 25 Jul 2023 21:43:31 +0200
Subject: [PATCH] Add WIP light theme

---
 css/index.css | 312 +++++++++++++++++++++++++++++++++++---------------
 1 file changed, 221 insertions(+), 91 deletions(-)

diff --git a/css/index.css b/css/index.css
index 87e4519..fc07aec 100755
--- a/css/index.css
+++ b/css/index.css
@@ -280,123 +280,253 @@ input.search {
 }
 
 /* Actual colors */
-body {
-    background-color: #363636;
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #363636;
+    }
+
+    blockquote {
+        background-color: #0f070f;
+    }
+
+    hr {
+        border-top: 1px solid #363636;
+    }
+
+    pre {
+        background: #212121;
+    }
+
+    code {
+        background: #212121;
+        color: #bbbbbb;
+    }
+
+    table {
+        background-color: #212121;
+        color: #dddddd;
+    }
+
+    td, th {
+      background: #212121;
+    }
+
+    thead {
+      border-bottom: 1px solid black;
+    }
+
+    tr:nth-child(even) {
+      background: #e4e4e4;
+    }
+
+    tr:nth-child(odd) {
+      background: #eeeeee;
+    }
+
+    .footer {
+        color: #f0eee4;
+    }
+
+    textarea {
+        background-color: #212121;
+        color: #f0eee4;
+    }
+
+    .main {
+        background-color: #212121;
+        color: #f0eee4;
+    }
+
+    .main a {
+        color: #89bfff;
+    }
+
+    .footer a {
+        color: #89bfff;
+    }
+
+    .main a:hover {
+        color: #ccccff;
+    }
+
+    .footer a:hover {
+        color: #ccccff;
+    }
+
+    .main a.literalMatch {
+        color: #6666ff;
+    }
+
+    .main a.noexist {
+        color: #f34000 !important;
+    }
+
+    .titlebar {
+        background-color: #262626;
+        color: #89bfff;
+    }
+
+    .titledate {
+        color: #777777;
+    }
+
+    .toolbar {
+        background-color: #363636;
+    }
+
+    .toolbar > a, .titlebar > a {
+        color: #eeeeee;
+    }
+
+    .sidebar {
+        border: solid 1px #666644;
+    }
+
+    input.search {
+        border-color: #363636;
+        background-color: #363636;
+        color: #f0eee4;
+    }
+
+    .sidebar {
+        color: #aaaaaa;
+        border-color: #aaaaaa;
+        background-color: #262626;
+    }
+
+    .sidebar a {
+        color: #19bfff;
+    }
+
+    .sidebar a:hover {
+        color: #bbbbff;
+    }
 }
 
-blockquote {
-    background-color: #0f070f;
-}
+@media (prefers-color-scheme: light) {
+    body {
+        background-color: #fffffe;
+    }
 
-hr {
-    border-top: 1px solid #363636;
-}
+    blockquote {
+        background-color: #ffffff;
+    }
 
-pre {
-    background: #212121;
-}
+    hr {
+        border-top: 1px solid #fffff0;
+    }
 
-code {
-    background: #212121;
-    color: #bbbbbb;
-}
+    pre {
+        background: #fdfff5;
+    }
 
-table {
-    background-color: #212121;
-    color: #dddddd;
-}
+    code {
+        background: #fdfff5;
+        color: #111111;
+    }
 
-td, th {
-  background: #212121;
-}
+    table {
+        background-color: #fdfff5;
+        color: #333333;
+    }
 
-thead {
-  border-bottom: 1px solid black;
-}
+    td, th {
+      background: #fdfff5;
+    }
 
-tr:nth-child(even) {
-  background: #e4e4e4;
-}
+    thead {
+      border-bottom: 1px solid black;
+    }
 
-tr:nth-child(odd) {
-  background: #eeeeee;
-}
+    tr:nth-child(even) {
+      background: #e4e4e4;
+    }
 
-.footer {
-    color: #f0eee4;
-}
+    tr:nth-child(odd) {
+      background: #eeeeee;
+    }
 
-textarea {
-    background-color: #212121;
-    color: #f0eee4;
-}
+    .footer {
+        color: #222222;
+    }
 
-.main {
-    background-color: #212121;
-    color: #f0eee4;
-}
+    textarea {
+        background-color: #fdfff5;
+        color: #222222;
+    }
 
-.main a {
-    color: #89bfff;
-}
+    .main {
+        background-color: #fdfff5;
+        color: #222222;
+    }
 
-.footer a {
-    color: #89bfff;
-}
+    .main a {
+        color: #89a0f0;
+    }
 
-.main a:hover {
-    color: #ccccff;
-}
+    .footer a {
+        color: #89a0f0;
+    }
 
-.footer a:hover {
-    color: #ccccff;
-}
+    .main a:hover {
+        color: #ccc0ff;
+    }
 
-.main a.literalMatch {
-    color: #6666ff;
-}
+    .footer a:hover {
+        color: #ccc0ff;
+    }
 
-.main a.noexist {
-    color: #f34000 !important;
-}
+    .main a.literalMatch {
+        color: #6666ff;
+    }
 
-.titlebar {
-    background-color: #262626;
-    color: #89bfff;
-}
+    .main a.noexist {
+        color: #f34000 !important;
+    }
 
-.titledate {
-    color: #777777;
-}
+    .titlebar {
+        background-color: #ffffee;
+        color: #89bfff;
+    }
 
-.toolbar {
-    background-color: #363636;
-}
+    .titledate {
+        color: #777777;
+    }
 
-.toolbar > a, .titlebar > a {
-    color: #eeeeee;
-}
+    .toolbar {
+        background-color: #fffff0;
+    }
 
-.sidebar {
-    border: solid 1px #666644;
-}
+    .toolbar a {
+        -webkit-filter: invert(100%);
+        filter: invert(100%);
+    }
 
-input.search {
-    border-color: #363636;
-    background-color: #363636;
-    color: #f0eee4;
-}
+    .toolbar > a, .titlebar > a {
+        color: #eeeeee;
+    }
 
-.sidebar {
-    color: #aaaaaa;
-    border-color: #aaaaaa;
-    background-color: #262626;
-}
+    .sidebar {
+        border: solid 1px #666644;
+    }
 
-.sidebar a {
-    color: #19bfff;
-}
+    input.search {
+        border-color: #fffff0;
+        background-color: #fffff0;
+        color: #222222;
+    }
 
-.sidebar a:hover {
-    color: #bbbbff;
+    .sidebar {
+        color: #aaaaaa;
+        border-color: #aaaaaa;
+        background-color: #fffffe;
+    }
+
+    .sidebar a {
+        color: #19a0ff;
+    }
+
+    .sidebar a:hover {
+        color: #bbbbff;
+    }
 }