Handle dark mode

app/assets/stylesheets/buttons.css

@@ -2,6 +2,7 @@
   .btn {
     --icon-size: var(--btn-icon-size, 1.3em);
     --btn-border-radius: 99rem;
+    --btn-hover-brightness: 0.9;
 
     align-items: center;
     background-color: var(--btn-background, var(--color-canvas));
@@ -22,10 +23,14 @@
 
     @media (any-hover: hover) {
       &:hover {
-        filter: brightness(0.85);
+        filter: brightness(var(--btn-hover-brightness));
       }
     }
 
+    @media (prefers-color-scheme: dark) {
+      --btn-hover-brightness: 1.5;
+    }
+
     &[disabled],
     &:has([disabled]),
     [disabled] &[type=submit],
@@ -114,7 +119,12 @@
     --btn-background: var(--color-ink);
     --btn-border-color: var(--color-canvas);
     --btn-color: var(--color-canvas);
+    --btn-hover-brightness: 2;
     --outline-color: var(--color-ink);
+
+    @media (prefers-color-scheme: dark) {
+      --btn-hover-brightness: 0.8;
+    }
   }
 
   /* Toggleable buttons

app/assets/stylesheets/card-perma.css

@@ -48,10 +48,10 @@
 
     .collection-picker__button {
       --btn-border-size: 0;
-    
+
       font-size: 0.5em;
       margin-inline-start: 1ch;
-  
+
       + .panel {
         --panel-size: 18ch;
       }
@@ -152,6 +152,7 @@
 
       &:has(input:checked)  {
         --btn-background: var(--card-color);
+        --btn-border-color: var(--card-color);
         --btn-color: var(--color-ink-inverted);
       }
     }