Better styling for the aside

src/css/globals.css

@@ -6,6 +6,14 @@
     --color-disabled: var(--color-neutral-400);
 }
 
+.inverse {
+    --color-secondary: var(--color-neutral-100);
+    --color-primary: var(--color-neutral-800);
+    --color-decoration: var(--color-yellow-400);
+    --color-subtle: var(--color-zinc-600);
+    --color-disabled: var(--color-neutral-600);
+}
+
 @media (prefers-color-scheme: light) {
     :root {
         --color-secondary: var(--color-neutral-100);
@@ -14,9 +22,17 @@
         --color-subtle: var(--color-zinc-600);
         --color-disabled: var(--color-neutral-600);
     }
+
+    .inverse {
+        --color-primary: var(--color-neutral-200);
+        --color-secondary: var(--color-neutral-800);
+        --color-decoration: var(--color-amber-200);
+        --color-subtle: var(--color-zinc-400);
+        --color-disabled: var(--color-neutral-400);
+    }
 }
 
-body[data-color-scheme="light"] {
+[data-color-scheme="light"] {
     --color-secondary: var(--color-neutral-100);
     --color-primary: var(--color-neutral-800);
     --color-decoration: var(--color-yellow-400);
@@ -24,7 +40,15 @@ body[data-color-scheme="light"] {
     --color-disabled: var(--color-neutral-600);
 }
 
-body[data-color-scheme="dark"] {
+[data-color-scheme="light"] .inverse {
+    --color-primary: var(--color-neutral-200);
+    --color-secondary: var(--color-neutral-800);
+    --color-decoration: var(--color-amber-200);
+    --color-subtle: var(--color-zinc-400);
+    --color-disabled: var(--color-neutral-400);
+}
+
+[data-color-scheme="dark"] {
     --color-primary: var(--color-neutral-200);
     --color-secondary: var(--color-neutral-800);
     --color-decoration: var(--color-amber-200);
@@ -137,7 +161,7 @@ footer {
 
 aside {
     width: 100%;
-    background-color: var(--color-primary);
-    color: var(--color-secondary);
     padding: var(--space-size-s);
+    background-color: var(--color-secondary);
+    color: var(--color-primary);
 }