fix dark mode

Author: LinuxJava7

src/components/Navigation/AccentButton.astro

@@ -123,7 +123,7 @@
         inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
 
       @media (prefers-color-scheme: dark) {
-        background-color: oklch(from var(--accent-color) 0.24 0.017 h / 90%);
+        background-color: oklch(from var(--accent-color) 0.25 0.02 h / 90%);
         box-shadow:
           0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
           0 0 1rem rgba(0, 0, 0, 0.05),

src/components/Navigation/BackButton.astro

@@ -27,7 +27,7 @@
       inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
 
     @media (prefers-color-scheme: dark) {
-      background-color: oklch(from var(--accent-color) 0.24 0.017 h / 90%);
+      background-color: oklch(from var(--accent-color) 0.25 0.02 h / 90%);
       box-shadow:
         0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
         0 0 1rem rgba(0, 0, 0, 0.05),

src/components/Navigation/Headerbar.astro

@@ -44,6 +44,7 @@ const showBackButton = Astro.url.pathname !== "/";
       font-weight: 590;
       text-align: center;
       background-color: oklch(from var(--accent-color) 0.98 0.03 h / 90%);
+
       padding: 4px 16px;
       border-radius: 100px;
       backdrop-filter: blur(2px);
@@ -58,6 +59,15 @@ const showBackButton = Astro.url.pathname !== "/";
         0 0 1rem rgba(0, 0, 0, 0.05),
         inset 0 1px 1px rgba(255, 255, 255, 0.5),
         inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(from var(--accent-color) 0.25 0.02 h / 90%);
+        box-shadow:
+          0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
+          0 0 1rem rgba(0, 0, 0, 0.05),
+          inset 0 1px 1px oklch(1 0 0 / 0.1),
+          inset 0 0 0.27rem rgba(255, 255, 255, 0.1);
+      }
     }
 
     .headerbar-title {

src/components/Navigation/TabBarLarge.astro

@@ -17,7 +17,7 @@ import { icons } from "./icons.js";
       inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
 
     @media (prefers-color-scheme: dark) {
-      background-color: oklch(from var(--accent-color) 0.24 0.017 h / 90%);
+      background-color: oklch(from var(--accent-color) 0.25 0.02 h / 90%);
       box-shadow:
         0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
         0 0 1rem rgba(0, 0, 0, 0.05),

src/components/Navigation/TabBarSmall.astro

@@ -21,7 +21,7 @@ import { icons } from "./icons.js";
       inset 0 0 0.27rem rgba(255, 255, 255, 0.5);
 
     @media (prefers-color-scheme: dark) {
-      background-color: oklch(from var(--accent-color) 0.24 0.017 h / 90%);
+      background-color: oklch(from var(--accent-color) 0.25 0.02 h / 90%);
       box-shadow:
         0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
         0 0 1rem rgba(0, 0, 0, 0.05),

src/styles/global.css

@@ -164,7 +164,7 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg)):not(
   @media (prefers-color-scheme: dark) {
     html,
     body {
-      background: oklch(from var(--accent-color) 0.25 0.03 h);
+      background: oklch(from var(--accent-color) 0.25 0.02 h);
     }
   }
   transparent html,