diff --git a/src/app.css b/src/app.css
index 31c8c79..db7924c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,18 +4,19 @@
   font-weight: 400;
 
   color: var(--fg-color);
-  background-color: #1c1c1c;
+  background-color: var(--bg-color);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   
-  --fg-color: #fff;
+  --fg-color: #eee;
+  --bg-color: #1c1c1c;
 
-  --dialog-color: #242424;
+  --tooltip-color: #242424bf;
   --button-color: #383838;
-  --field-color: #171717;
+  --field-color: #070707;
 
   --accent-color: #5b1bf0;
   --x-color: #ff1f1f;
@@ -26,13 +27,14 @@
 
 .light {
   color: var(--fg-color);
-  background-color: #ffffff;
+  background-color: var(--bg-color);
 
+  --bg-color: #fff;
   --fg-color: #1c1c1c;
 
-  --dialog-color: #eeeeee;
+  --tooltip-color: #eeeeeebf;
   --button-color: #ccc;
-  --field-color: #ddd;
+  --field-color: #efefef;
 
   --x-color-focus: #ff7f7f3f;
   --o-color-focus: #7fbfff3f;
diff --git a/src/lib/ui/Dialog.svelte b/src/lib/ui/Dialog.svelte
index 9708bce..2e3629a 100644
--- a/src/lib/ui/Dialog.svelte
+++ b/src/lib/ui/Dialog.svelte
@@ -57,7 +57,7 @@
         position: relative;
         padding: 2em;
         border-radius: 2em;
-        background-color: var(--dialog-color);
+        background-color: var(--bg-color);
         border: none;
         color: inherit;
     }
diff --git a/src/lib/ui/TooltipButton.svelte b/src/lib/ui/TooltipButton.svelte
index 6db7c35..b4476c6 100644
--- a/src/lib/ui/TooltipButton.svelte
+++ b/src/lib/ui/TooltipButton.svelte
@@ -37,7 +37,7 @@
     .tooltip {
         position: absolute;
         right: 0.5em;
-        background-color: var(--dialog-color);
+        background-color: var(--tooltip-color);
         padding: 0.5em 1em;
         border-radius: 0.5em;
         width: max-content;