From d6fc2b70976e203d94fec2c20d4bf53bf83b8e03 Mon Sep 17 00:00:00 2001
From: Heika <41552394+heikadog@users.noreply.github.com>
Date: Sat, 21 Feb 2026 03:01:05 +0100
Subject: [PATCH] Fix dark mode

merges #6
---
 src/components/AccountMenu.svelte       | 16 ++++++++++------
 src/components/AccountMenuButton.svelte | 16 ++++++++++++----
 src/components/DialogPanel.svelte       | 13 +++++++++----
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/components/AccountMenu.svelte b/src/components/AccountMenu.svelte
index e1f155a..d12c4af 100644
--- a/src/components/AccountMenu.svelte
+++ b/src/components/AccountMenu.svelte
@@ -100,7 +100,7 @@
       <AccountMenuButton onclick={logOut} label="Log out" />
     {/if}
 
-    <li class="link"><a href="{getBaseLocation()}">Home</a></li>
+    <li class="link"><a href={getBaseLocation()}>Home</a></li>
     <li class="link"><a href="?page=posting_stats">Posting stats</a></li>
     <li class="link"><a href="?page=like_stats">Like stats</a></li>
     <li class="link"><a href="?page=search">Timeline search</a></li>
@@ -172,13 +172,17 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    #account.active {
-      color: #333;
+    #account_menu {
+      background: hsl(210, 11.81%, 24.9%);
+      border-color: hsl(210, 19.61%, 40%);
     }
 
-    #account_menu {
-      background: hsl(210, 33.33%, 94.0%);
-      border-color: #ccc;
+    li.link a {
+      color: #ccc;
+    }
+
+    #account_menu :global(li:not(.link) + li.link) {
+      border-top-color: hsl(210, 19.61%, 40%);
     }
   }
 </style>
diff --git a/src/components/AccountMenuButton.svelte b/src/components/AccountMenuButton.svelte
index 4fc0112..838c42b 100644
--- a/src/components/AccountMenuButton.svelte
+++ b/src/components/AccountMenuButton.svelte
@@ -32,13 +32,21 @@
 
   @media (prefers-color-scheme: dark) {
     li .button {
-      color: #333;
-      border-color: #bbb;
-      background-color: hsla(210, 100%, 4%, 0.12);
+      color: #ccc;
+      border-color: hsl(210, 19.61%, 40%);
+      background-color: hsla(210, 100%, 80%, 0.08);
     }
 
     li .button:hover {
-      background-color: hsla(210, 100%, 4%, 0.2);
+      color: #fff;
+      border-color: hsl(210, 22.13%, 52.16%);
+      background-color: hsla(210, 100%, 80%, 0.15);
+    }
+
+    li .button:active {
+      color: #fff;
+      border-color: hsl(210, 28.4%, 31.76%);
+      background-color: hsla(210, 100%, 80%, 0.05);
     }
   }
 </style>
diff --git a/src/components/DialogPanel.svelte b/src/components/DialogPanel.svelte
index 1354fa5..6f80357 100644
--- a/src/components/DialogPanel.svelte
+++ b/src/components/DialogPanel.svelte
@@ -137,13 +137,18 @@
       }
 
       input[type="submit"] {
-        border-color: hsl(210, 15%, 40%);
-        background-color: hsl(210, 12%, 35%);
+        background-color: hsl(210, 53.33%, 35.29%);
+        border-color: hsl(210, 45.28%, 41.57%);
+      }
+
+      input[type="submit"]:hover {
+        background-color: hsl(210, 45.28%, 41.57%);
+        border-color: hsl(210, 39.34%, 47.84%);
       }
 
       input[type="submit"]:active {
-        border-color: hsl(210, 15%, 35%);
-        background-color: hsl(210, 12%, 30%);
+        border-color: hsl(210, 64.86%, 29.02%);
+        background-color: hsl(210, 53.33%, 35.29%);
       }
     }
   }
-- 
2.51.2