Refactoring themes, increase contrast

1 files changed, 72 insertions, 28 deletions

diff --git a/app.css b/app.css
index 24a500e..e37fe17 100644
--- a/app.css
+++ b/app.css
@@ -1,10 +1,37 @@
+/* :root {
+  --fg-rgb: 0,0,0;
+  --selection: royalblue;
+  --selection-rgb: 65,105,225;
+} */
 :root {
-  --bg: white;
-  --bg-rgb: 255,255,255;
-  --fg: black;
-  --dialog-bg: white;
-	--dark-red: #910e0e;
-	--dark-blue: #6d99c6;
+  --theme-light-bg-rgb: 250,250,250;
+  --theme-light-bg: rgb(var(--theme-light-bg-rgb));
+  --theme-light-fg: black;
+  --theme-light-dialog-bg: rgb(245,245,245);
+  --theme-light-dialog-bg-rgb: 245,245,245;
+  --theme-light-key-bg-rgb: 233,233,237;
+  --theme-light-key-bg-base: rgb(var(--theme-light-key-bg-rgb));
+  --theme-light-key-color-rgb: 50,50,50;
+  --theme-light-key-color-base: rgb(var(--theme-light-key-color-rgb));
+  --theme-light-key-color-extreme: #313131;
+  --theme-light-key-color-hover: white;
+  --theme-light-code-bg: rgba(0, 0, 0, 0.1);
+
+  --theme-dark-fg: rgb(230,230,230);
+  --theme-dark-fg-rgb: 230,230,230;
+  --theme-dark-bg: hsl(211, 20%, 12%);
+  --theme-dark-bg-rgb: 17,34,51;
+  --theme-dark-dialog-bg: hsl(210, 10%, 12%);
+  --theme-dark-dialog-bg-rgb: 28, 31, 34;
+  --theme-dark-key-bg-base: hsl(208.2, 23%, 18%);
+  --theme-dark-key-bg-rgb: 49, 65, 78;
+  --theme-dark-key-color-base: hsl(0, 0%, 75%);
+  --theme-dark-key-color-rgb: 230,230,230;
+  --theme-dark-key-color-extreme: #e7e7e7;
+  --theme-dark-code-bg: rgba(255, 255, 255, 0.1);
+
+  --dark-red: #910e0e;
+  --dark-blue: #6d99c6;
   --error-highlight: rgb(179, 60, 60);
   --selection: rgb(60, 179, 113);
   --hover-selection: rgba(60, 179, 113, 0.85);
@@ -12,13 +39,21 @@
   --delete-faint: rgba(179, 60, 72, 0.6);
   --link: royalblue;
   --link-hover: #6d99c6;
-  --key-bg-base: #f2f2f2;
-  --key-bg-hover: white;
-  --key-bg-highlight: sandybrown;
-  --key-color-base: hsl(0, 0%, 30%);
-  --key-color-extreme: #313131;
-  --key-color-hover: white;
-  --code-bg: rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="light"], body:not([data-theme="dark"]) {
+  --bg-rgb: var(--theme-light-bg-rgb);
+  --bg: var(--theme-light-bg);
+  --fg: var(--theme-light-fg);
+  --dialog-bg: var(--theme-light-dialog-bg);
+  --dialog-bg-rgb: var(--theme-light-dialog-bg-rgb);
+  --key-bg-rgb: var(--theme-light-key-bg-rgb);
+  --key-bg-base: var(--theme-light-key-bg-base);
+  --key-color-rgb: var(--theme-light-key-color-rgb);
+  --key-color-base: var(--theme-light-key-color-base);
+  --key-color-extreme: var(--theme-light-key-color-extreme);
+  --key-color-hover: var(--theme-light-key-color-hover);
+  --code-bg: var(--theme-light-code-bg);
 }
 html {
   font-family: sans-serif;
@@ -37,26 +72,35 @@ h1, h2, h3, h4, h5, h6 {
   font-family: Quicksand, avenir, sans-serif;
 }
 
-body[data-theme="dark"] {
+[data-theme="dark"] {
   color-scheme: dark;
-  --fg: white;
-  --bg: hsl(211, 31.9%, 13%);
-  --bg-rgb: 17,34,51;
-  --dialog-bg: hsl(210, 30%, 17%);
-  --key-bg-base: hsl(208.2, 23%, 25%);
-  --key-color-base: hsl(0, 0%, 90%);
-  --key-color-extreme: #e7e7e7;
+  --fg: var(--theme-dark-fg);
+  --fg-rgb: var(--theme-dark-fg-rgb);
+  --bg: var(--theme-dark-bg);
+  --bg-rgb: var(--theme-dark-bg-rgb);
+  --dialog-bg: var(--theme-dark-dialog-bg);
+  --dialog-bg-rgb: var(--theme-dark-dialog-bg-rgb);
+  --key-bg-base: var(--theme-dark-key-bg-base);
+  --key-bg-rgb: var(--theme-dark-key-bg-rgb);
+  --key-color-base: var(--theme-dark-key-color-base);
+  --key-color-rgb: var(--theme-dark-key-color-rgb);
+  --key-color-extreme: var(--theme-dark-key-color-extreme);
+  --code-bg: var(--theme-dark-code-bg);
 }
 @media (prefers-color-scheme: dark) {
   body[data-theme="system"] {
     color-scheme: dark;
-    --fg: white;
-    --bg: hsl(211, 31.9%, 13%);
-    --bg-rgb: 17,34,51;
-    --dialog-bg: hsl(210, 30%, 17%);
-    --key-bg-base: hsl(208.2, 23%, 25%);
-    --key-color-base: hsl(0, 0%, 90%);
-    --key-color-extreme: #e7e7e7;
+    --fg: var(--theme-dark-fg);
+    --fg-rgb: var(--theme-dark-fg-rgb);
+    --bg: var(--theme-dark-bg);
+    --bg-rgb: var(--theme-dark-bg-rgb);
+    --dialog-bg: var(--theme-dark-dialog-bg);
+    --key-bg-base: var(--theme-dark-key-bg-base);
+    --key-bg-rgb: var(--theme-dark-key-bg-rgb);
+    --key-color-base: var(--theme-dark-key-color-base);
+    --key-color-rgb: var(--theme-dark-key-color-rgb);
+    --key-color-extreme: var(--theme-dark-key-color-extreme);
+    --code-bg: var(--theme-dark-code-bg);
   }
 }