center the colour picker

src/css/exceptions/color-scheme-picker.css

@@ -1,7 +1,15 @@
+header > * {
+	flex-grow: 1;
+}
+
 .color-scheme {
 	border: 0;
+	padding: 0;
 	display: flex;
 	gap: var(--space-size-xs);
+	flex-grow: 1;
+	justify-content: center;
+	justify-self: flex-end;
 
 	legend {
 		position:absolute;
@@ -13,16 +21,21 @@
 		clip:rect(0 0 0 0);
 	}
 
-	label:has(:not(:checked)) {
-		color: var(--color-subtle);
+	label {
+		cursor: pointer;
+
+		&:has(:not(:checked)) {
+			color: var(--color-disabled);
 		}
 
-	label:has(:focus-visible) {
+		&:has(:focus-visible) {
 			outline: 1px solid var(--color-primary);
 			outline-offset: 2px;
 		}
 
-	label:has([name="color-scheme"])::before {
+		&:has([name="color-scheme"]) {
+
+			&::before {
 				font-family: "font awesome 6 free";
 				font-style: normal;
 				font-variant: normal;
@@ -32,11 +45,17 @@
 				font-size: var(--text-size-s);
 			}
 
-	label:has([name="color-scheme"][value="dark"])::before {
+			&:has([value="dark"]) {
+				&::before {
 					content: "\f186";
 				}
+			}
 
-	label:has([name="color-scheme"][value="light"])::before {
+			&:has([value="light"]) {
+				&::before {
 					content: "\f185";
 				}
 			}
+		}	
+	}
+}

src/css/globals.css

@@ -3,6 +3,7 @@
     --color-secondary: var(--color-neutral-800);
     --color-decoration: var(--color-amber-200);
     --color-subtle: var(--color-zinc-400);
+    --color-disabled: var(--color-zinc-600);
 }
 
 @media (prefers-color-scheme: light) {
@@ -11,6 +12,7 @@
         --color-primary: var(--color-neutral-800);
         --color-decoration: var(--color-amber-800);
         --color-subtle: var(--color-zinc-500);
+        --color-disabled: var(--color-zinc-400);
     }
 }
 
@@ -19,6 +21,7 @@ body[data-color-scheme="light"] {
     --color-primary: var(--color-neutral-800);
     --color-decoration: var(--color-amber-800);
     --color-subtle: var(--color-zinc-500);
+    --color-disabled: var(--color-zinc-400);
 }
 
 body[data-color-scheme="dark"] {
@@ -26,6 +29,7 @@ body[data-color-scheme="dark"] {
     --color-secondary: var(--color-neutral-800);
     --color-decoration: var(--color-amber-200);
     --color-subtle: var(--color-zinc-400);
+    --color-disabled: var(--color-zinc-600);
 }
 
 body {