Tell the browser which colour scheme the page is in

The parts of a form control the browser draws itself -- a number input's
stepper, a date field's calendar button and popup, a select's dropdown,
scrollbars, the autofill tint -- were painted in the light appearance on
every theme. Bambuddy switches theme by swapping CSS variables under a
`dark` class, which the browser cannot see, so it assumed the page was
light and matched the steppers to a white background that was not there.

Declaring color-scheme alongside the variables fixes all of them at once,
in both directions. It goes on `.dark` rather than the per-palette
classes because the kiosk sets `dark` on the root element directly.

Three date and time fields had been pinned to dark by hand to work
around this and no longer need to be; being pinned, they were wrong
under the light theme anyway.
This commit is contained in:
maziggy
2026-08-11 12:16:31 +02:00
parent 0229d61cea
commit 4a65abe228
7 changed files with 26 additions and 8 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -26,8 +26,8 @@
<!-- Splash screens for iOS -->
<link rel="apple-touch-startup-image" href="/img/android-chrome-512x512.png" />
<script type="module" crossorigin src="/assets/index-BlVotyTj.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BkuH4t27.css">
<script type="module" crossorigin src="/assets/index-Bg0yeHsW.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D4EtyCBI.css">
</head>
<body>
<div id="root"></div>