What I did: - used css-vars for all colors throught code - named those vars semantically after what their layout role is (e.g. --table-border-color, --link-co

What I did: - used css-vars for all colors throught code - named those vars semantically after what their layout role is (e.g. --table-border-color, --link-color, ...) - create 2 media-queries (or one default definition and one queried overwrite) with @media (prefers-color-scheme: light) at the root, in which I assigned those layout-role-named colors their dark-/light mode specific color (--link-color: #aa1100) - turned those colors that I assign into css-vars themselves, named after ... well, their color (e.g. --link-color: var(--brandname-red-light), ...) Works remarkebly well (almost didn't need another prefers-color-scheme* anywhere else). But in the end JS was needed to make it toggable and persistable within localstorage. But the only neccessary change in CSS was to turn the refers-color-scheme*-media queries into classnames.