assets/css/default: HSL the dark theme

1 files changed, 30 insertions, 28 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 85c0873..d0bcfd3 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -51,7 +51,7 @@
   --border-darker: hsl(var(--primary), 35%, 80%);
   --border-darkest: hsl(var(--primary), 35%, 70%);
   --border-lighter: hsl(var(--primary), 35%, 92%);
-  --button-background: #fff;
+  --button-background: hsl(var(--primary), 0%, 100%);
   --danger-background-lighter: #fff5f5;
   --danger-background: #fcd2cf;
   --danger: #8f0000;
@@ -64,11 +64,12 @@
   --icon-hover-background: hsl(var(--accent), 100%, 90%);
   --link: hsl(var(--accent), 99%, 37%);
   --shadow: #00000060;
-  --spoiler: #444;
+  --spoiler: hsl(var(--primary), 0%, 27%);
   --success-background: #d5f3c4;
   --success: #1d3c0c;
   --table-even-background: hsl(var(--secondary), 25%, 99%);
   --table-odd-background: hsl(var(--secondary), 25%, 97%);
+  --text-background: var(--background);
   --warning-background: #ffe699;
   --warning: #332600;
   --widget-background: hsl(var(--secondary), 25%, 97%);
@@ -77,34 +78,36 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background-rgb: 17, 17, 17;
-    --foreground-rgb: 221, 221, 221;
-    --background-bolder: #0d0d0d;
-    --background: rgba(var(--background-rgb), 1);
-    --border-darker: #555;
-    --border-darkest: #999;
-    --border-lighter: #262626;
-    --button-background: #333;
+    --primary: 0;
+    --secondary: 0;
+    --accent: 219;
+    --background-bolder: hsl(var(--secondary), 0%, 5%);
+    --background: hsl(var(--secondary), 0%, 7%);
+    --border-darker: hsl(var(--secondary), 0%, 33%);
+    --border-darkest: hsl(var(--secondary), 0%, 60%);
+    --border-lighter: hsl(var(--secondary), 0%, 15%);
+    --button-background: hsl(var(--secondary), 0%, 20%);
     --danger-background-lighter: #1b0404;
     --danger-background: #4f1c1c;
     --danger: #ff9494;
-    --fade: rgba(var(--foreground-rgb), 0.75);
+    --fade: hsl(var(--secondary), 0%, 66%);
     --focus-within-background: #291933;
-    --foreground: rgba(var(--foreground-rgb), 1);
+    --foreground: hsl(var(--secondary), 0%, 87%);
     --hover-background-alternate: #1c263a;
-    --hover-background: rgba(var(--foreground-rgb), 0.08);
+    --hover-background: hsl(var(--secondary), 0%, 14%);
     --icon-focus-background: #88aefb;
-    --icon-hover-background: #425a8a;
-    --link: #a3c3ff;
-    --shadow: #000;
-    --spoiler: #aaa;
+    --icon-hover-background: hsl(var(--accent), 35%, 25%);
+    --link: hsl(var(--accent), 100%, 82%);
+    --shadow: hsl(var(--secondary), 0%, 0%);
+    --spoiler: hsl(var(--secondary), 0%, 67%);
     --success-background: #2d3e0f;
     --success: #d5f3c4;
-    --table-even-background: rgba(var(--foreground-rgb), 0.06);
-    --table-odd-background: rgba(var(--foreground-rgb), 0.02);
+    --table-even-background: hsl(var(--secondary), 0%, 12%);
+    --table-odd-background: hsl(var(--secondary), 0%, 9%);
+    --text-background: hsl(var(--secondary), 0%, 17%);
     --warning-background: #a89700;
     --warning: #000;
-    --widget-background: rgba(var(--foreground-rgb), 0.02);
+    --widget-background: hsl(var(--secondary), 0%, 9%);
   }
   img,
   video,
@@ -1862,8 +1865,6 @@ search-entry form button {
 
 search-entry form input {
   -webkit-appearance: none;
-  background-color: #fefefe;
-  background-color: var(--background);
   border-bottom-left-radius: 0.5rem;
   border-top-left-radius: 0.5rem;
   border: none;
@@ -1875,15 +1876,16 @@ search-entry form input {
   color: inherit;
 }
 
-search-entry form button svg {
-  stroke-width: 0.1rem;
-  width: 100%;
-}
-
+search-entry form input,
 search-entry form input:focus {
   outline: none;
   background-color: #fefefe;
-  background-color: var(--background);
+  background-color: var(--text-background);
+}
+
+search-entry form button svg {
+  stroke-width: 0.1rem;
+  width: 100%;
 }
 
 search-entry ul {