Fix styles on dark mode

public/global.css

@@ -2,12 +2,16 @@
 :root {
     --c-bg: #101010;
     --c-on-bg: #dedede;
+
+    --c-bg-2: #18181b;
 }
 
 @media (prefers-color-scheme: light) {
     :root {
         --c-bg: #f5f5f5;
         --c-on-bg: #101010;
+        
+        --c-bg-2: white;
     }
 }
 

src/pages/index.astro

@@ -34,7 +34,7 @@ import Sidebar from "../components/Sidebar.astro";
             <div class="2xl:grid 2xl:grid-cols-2 2xl:gap-2">
                 <div
                     x-data="{open: true}"
-                    class="shadow-lg p-2 bg-white rounded-md max-w-[50rem] border border-slate-600"
+                    class="shadow-lg p-2 bg-c-bg-2 rounded-md max-w-[50rem] border border-slate-600 dark:border-transparent"
                 >
                     <h2
                         class="text-2xl font-bold py-2 pl-2 cursor-pointer hover:underline sticky top-0 border-b border-b-slate-600"

tailwind.config.mjs

@@ -6,6 +6,7 @@ export default {
 			colors: {
 				'c-bg': 'var(--c-bg)',
 				'c-on-bg': 'var(--c-on-bg)',
+				'c-bg-2': 'var(--c-bg-2)',
 			},
 		},
 	},