Use a checkbox, d. Define vars for light mode. Override when checked for dark mode with body:has(#d:checked) and can include the dark mode media query too

See https://lyra.horse/blog/2025/08/you-dont-need-js/, via https://news.ycombinator.com/item?id=45056878 (which discussion contains some deeper explanation).

Why would you build a switch instead of relying on the user’s system settings? The only reason I can imagine is that your dark/light mode is not usable/readable so it forces the user to switch

Checkbox and :checked are your friends.