Update Dark Mode Color Palette

src/app/components/dropdown/dropdown.scss

@@ -40,7 +40,7 @@ $default_animation_duration: 0.2s;
   max-width: 100%;
 
   &:has(.dropdown-input.focus-mode:focus-visible) {
-    outline: 2px solid list.nth(library.$brand_palette, 5);
+    outline: 2px solid var(--selection-outline-color);
     outline-offset: 2px;
   }
 }
@@ -195,7 +195,7 @@ $default_animation_duration: 0.2s;
       light-dark($hover_bg, $hover_dark_bg)
       calc(var(--hover-state) * 100%)
     ),
-    light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 11))
+    light-dark(list.nth(library.$brand_palette, 1), list.nth(library.$brand_palette, 12))
     calc(var(--selected-state) * 100%)
   );
 
@@ -209,7 +209,7 @@ $default_animation_duration: 0.2s;
 
   &.selected {
     --selected-state: 1;
-    color: list.nth(library.$brand_palette, 5);
+    color: light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 6));
     font-weight: 600;
   }
 }

src/app/components/switch/switch.scss

@@ -30,14 +30,14 @@ $default_animation_duration: 0.2s;
   background-color: color-mix(
     in oklch,
     light-dark($off_bg, $off_dark_bg),
-    light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 8))
+    light-dark(list.nth(library.$brand_palette, 5), list.nth(library.$brand_palette, 6))
     calc(var(--animation-state) * 100%)
   );
 
   box-shadow: 0 0 0 1px color-mix(
     in oklch,
     light-dark($border_color, $border_dark_color),
-    light-dark($border_color, list.nth(library.$brand_palette, 10))
+    light-dark($border_color, list.nth(library.$brand_palette, 9))
     calc(var(--animation-state) * 100%)
   ) inset;
 

src/styles.scss

@@ -118,7 +118,11 @@ section.feature-block {
   margin: 0 auto;
 }
 
+* {
+  --selection-outline-color: light-dark(#{list.nth(library.$brand_palette, 5)}, #{list.nth(library.$brand_palette, 6)});
+}
+
 *:focus-visible {
-  outline: 2px solid list.nth(library.$brand_palette, 5);
+  outline: 2px solid var(--selection-outline-color);
   outline-offset: 2px;
 }

src/styles/_library.scss

@@ -12,5 +12,21 @@ $brand_palette: [
   oklch(0.4509 0.1688 29.86), // #9E190E
   oklch(0.3897 0.1391 29.75), // #7F180F
   oklch(0.2547 0.0913 29.02), // #450805
+  oklch(0.1752 0.0717 29.02), // #280000
 ];
 
+/*
+$brand_palette: [
+  oklch(0.9999 0.2237 35.33),
+  oklch(0.9090 0.2237 35.33),
+  oklch(0.8181 0.2237 35.33),
+  oklch(0.7272 0.2237 35.33),
+  oklch(0.6363 0.2237 35.33),
+  oklch(0.5454 0.2237 35.33),
+  oklch(0.4545 0.2237 35.33),
+  oklch(0.3636 0.2237 35.33),
+  oklch(0.2727 0.2237 35.33),
+  oklch(0.1818 0.2237 35.33),
+  oklch(0.0909 0.2237 35.33),
+];
+*/