#ffffff

@neineon77@transfem.social you can achieve this with pure CSS, assuming u merely want it use the browser's preference, i.e, instead of: background: #FFFFFF;you can do: background: light-dark(#FFFFFF, #000000);first argument to the function is the color to use in light mode, and second is the color to use in dark mode, this works in most modern browsers these days if ur using CSS variables you can also merely do a media query and adjust them, i.e: :root { --background: #FFFFFF; } @media (prefers-color-scheme: dark) { :root { --background: #000000; } }and if it's because you want a manual toggle, you can use CSS queries and simply have an somewhere, and apply the dark colors like so (assuming the input has a dark-mode class on it): :root:has(.dark-mode:checked) { --background: #000000; }though keep in mind the toggle's state isn't remembered between refreshes... unless absolutely desired, i would recommend merely following what the browser says it wants, as that's what most users expect

For those who have any use for it: Trans Rights Are Human Rights! :root { color-scheme: light dark; div[popover] { background-image: linear-gradient( #5BCEFA calc(0 * 100% / 5) calc(1 * 100% / 5), #F5A9B8 calc(1 * 100% / 5) calc(2 * 100% / 5), #ffffff calc(2 * 100% / 5) calc(3 * 100% / 5), #F5A9B8 calc(3 * 100% / 5) calc(4 * 100% / 5), #5BCEFA calc(4 * 100% / 5) calc(5 * 100% / 5)); color: black; border: 0.2em solid light-dark(black, white); border-radius: 1em; padding: 1em; p { background: oklch(from white l c h / 0.5); padding: 0.2em; border-radius: 0.2em; box-shadow: 0 0 0.2em white; } div.popover-control-buttons { display:flex; width: 100%; justify-content: center; gap: 1em; box-sizing: border-box; } a[role="button"], button, a[role="button"]:visited { color: black; background: white; text-decoration: none; border: solid black 0.05em; display: inline-block; padding: 0.1em 0.3em; font-size: 1rem; font-family: sans-serif; border-radius: 0.1em; user-select: none; cursor: default; &:hover { background: #5BCEFA; } &:active{ background: #F5A9B8; } } } } Show Dialog