5 ms·

I am not sure why this qualifies as a front page article. To achieve color schemes in CSS only follow these steps. 1) Remove ALL color information from your CS

I am not sure why this qualifies as a front page article. To achieve color schemes in CSS only follow these steps. 1) Remove ALL color information from your CSS files and relocate that into a new CSS file only for color information. That is your default color scheme. 2) In that color scheme file prefix each rule with the same class name, possibly colorDefault. 3) Create a second color only CSS file with dark colors. This is your dark color scheme. Change the colorDefault class name to something else, possibly: colorDark. 4) Include those color files in your site using either media queries from the primary CSS or link tags in the HTML. 5) Finally add class name colorDefault to your HTML body tag. Use JavaScript to change that one class name as the user selects a different color scheme on user interaction. Here is an example: https://github.com/prettydiff/share-file-systems/tree/master/lib/css https://github.com/prettydiff/share-file-systems/tree/master...

muningis 3y ago
Your solution is more complicated, and requires JS to run. One in link, is done purely with CSS as it should be.
- Timon3 3y ago
  No, it's not as it should be - there should always be a toggle. You should respect the user setting as the default, but please, always include a toggle.
  - ignitionmonkey 3y ago
    It should not be the website's role to provide user controls over this. Having a website require JS to be acceptable is not acceptable. It's possible to use CSS only to check a input element's state, which feels like a workaround. But even then having each site provide its own way to toggle schemes in a pain. Searching for that toggle just adds to the list of settings we need to discover and configure for every notable website we visit. (Is it in the footer? Settings? User menu? Does it even exist or did I miss it?). The browser should allow per-site toggles for prefers-color-scheme. Just like how (some?) browsers ship with page style selectors using CSS alternate tags. e.g. on Firefox Alt > View > Page Styles. https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative...
    - Timon3 3y ago
      I would like proper browser toggles. But they are not here, and as long as they are not here, you should always include a toggle. Why is it not acceptable to require JS to be acceptable? You can always provide a pure CSS fallback for those who make the deliberately make the tradeoff of disabling JS. But don't force everybody else to change their whole system color preference just for your website when three lines of JS allow you to create a perfectly integrated toggle.
      - ignitionmonkey 3y ago
        I think saying "everybody else" is an exaggeration. It's a minority (possibly a major on HN, including me) who tweak colour schemes. Just like how people rarely used alternate stylesheets. And why it took so long to even get "prefers-color-scheme". Colour preferences are also not black and white, literally. There is a spectrum. Some websites' schemes are too dark or too bright. It's why sites like GitHub provide more than just two options. And why Dark Reader has sliders. In that sense, alternative stylesheets are a much better existing browser-level solution when user intervention is involved. After all, most applications provide a list of color schemes to choose from like in IDEs, terminals, word processors and so on. The only reason I personally switch from dark to light mode on some websites is because their dark mode isn't what I want and I'd rather put up with the light mode. It's not a preference, just a compromise between two extremes. Having an absolute stance on this is untenable since it's a complex situation depending on the site's audience, capacity, goal and so on. Let website owners decide, so they can focus on what's important to their audience. For example, for my blog, I suggest people use the RSS feed or Reader Mode to adjust colours and font sizes to their liking. I'm not going to spend time tweaking two colour schemes for some unknown audience, which would just put me off writing and publishing.
        Timon3 3y ago
        > I think saying "everybody else" is an exaggeration. It's a minority (possibly a major on HN, including me) who tweak colour schemes. Doesn't matter. "Everybody else" is the literal amount of people who have to change their system color scheme to change the color scheme of your website because you don't want to implement a toggle. You can't argue around that, it is per definition correct. Anyone who has JS enabled could use a toggle, but you don't implement it, so they have to change their system color scheme. > Colour preferences are also not black and white, literally. There is a spectrum. And because it's not black and white you force people to change their system color scheme to change your websites color scheme? This is a non-sequitur. > The only reason I personally switch from dark to light mode on some websites is because their dark mode isn't what I want and I'd rather put up with the light mode. It's not a preference, just a compromise between two extremes. And because of this you want to make it harder to change color schemes? How does that make any sense? > Having an absolute stance on this is untenable since it's a complex situation depending on the site's audience, capacity, goal and so on. Let website owners decide, so they can focus on what's important to their audience. No. Let the website owners give their users options. It's not that hard. > For example, for my blog, I suggest people use the RSS feed or Reader Mode to adjust colours and font sizes to their liking. I'm not going to spend time tweaking two colour schemes for some unknown audience, which would just put me off writing and publishing. And that's totally fine! If you don't have separate color schemes, it would make no sense to include a toggle. But if you have separate color schemes, add a toggle.
simonklitj 3y ago
“CSS only” and “Use JavaScript to change” seems to be contradictory.
- austin-cheney 3y ago
  The difference in color schemes is one class name on one tag. You can also make that change on the back end or anywhere else.
woodpanel 3y ago
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.
Cu3PO42 3y ago
This approach can be massively simplified by using CSS variables for your colors and only putting the color definitions in a separate file.
- austin-cheney 3y ago
  With consideration for accessibility this depends on the simplicity of the layout. In order to achieve WCAG 2.0 AA compliance color combinations must achieve at least a 4.5x luminosity ratio. That can mean different things may require color changes that were not required in the default scheme, as well as the opposite. As a result you really need files with different rules for that 20% that requires more than different color values.

muningis 3y ago

Your solution is more complicated, and requires JS to run. One in link, is done purely with CSS as it should be.

Timon3 3y ago
No, it's not as it should be - there should always be a toggle. You should respect the user setting as the default, but please, always include a toggle.
- ignitionmonkey 3y ago
  It should not be the website's role to provide user controls over this. Having a website require JS to be acceptable is not acceptable. It's possible to use CSS only to check a input element's state, which feels like a workaround. But even then having each site provide its own way to toggle schemes in a pain. Searching for that toggle just adds to the list of settings we need to discover and configure for every notable website we visit. (Is it in the footer? Settings? User menu? Does it even exist or did I miss it?). The browser should allow per-site toggles for prefers-color-scheme. Just like how (some?) browsers ship with page style selectors using CSS alternate tags. e.g. on Firefox Alt > View > Page Styles. https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative_style_sheets https://developer.mozilla.org/en-US/docs/Web/CSS/Alternative...
  - Timon3 3y ago
    I would like proper browser toggles. But they are not here, and as long as they are not here, you should always include a toggle. Why is it not acceptable to require JS to be acceptable? You can always provide a pure CSS fallback for those who make the deliberately make the tradeoff of disabling JS. But don't force everybody else to change their whole system color preference just for your website when three lines of JS allow you to create a perfectly integrated toggle.
    - ignitionmonkey 3y ago
      I think saying "everybody else" is an exaggeration. It's a minority (possibly a major on HN, including me) who tweak colour schemes. Just like how people rarely used alternate stylesheets. And why it took so long to even get "prefers-color-scheme". Colour preferences are also not black and white, literally. There is a spectrum. Some websites' schemes are too dark or too bright. It's why sites like GitHub provide more than just two options. And why Dark Reader has sliders. In that sense, alternative stylesheets are a much better existing browser-level solution when user intervention is involved. After all, most applications provide a list of color schemes to choose from like in IDEs, terminals, word processors and so on. The only reason I personally switch from dark to light mode on some websites is because their dark mode isn't what I want and I'd rather put up with the light mode. It's not a preference, just a compromise between two extremes. Having an absolute stance on this is untenable since it's a complex situation depending on the site's audience, capacity, goal and so on. Let website owners decide, so they can focus on what's important to their audience. For example, for my blog, I suggest people use the RSS feed or Reader Mode to adjust colours and font sizes to their liking. I'm not going to spend time tweaking two colour schemes for some unknown audience, which would just put me off writing and publishing.
      - Timon3 3y ago
        > I think saying "everybody else" is an exaggeration. It's a minority (possibly a major on HN, including me) who tweak colour schemes. Doesn't matter. "Everybody else" is the literal amount of people who have to change their system color scheme to change the color scheme of your website because you don't want to implement a toggle. You can't argue around that, it is per definition correct. Anyone who has JS enabled could use a toggle, but you don't implement it, so they have to change their system color scheme. > Colour preferences are also not black and white, literally. There is a spectrum. And because it's not black and white you force people to change their system color scheme to change your websites color scheme? This is a non-sequitur. > The only reason I personally switch from dark to light mode on some websites is because their dark mode isn't what I want and I'd rather put up with the light mode. It's not a preference, just a compromise between two extremes. And because of this you want to make it harder to change color schemes? How does that make any sense? > Having an absolute stance on this is untenable since it's a complex situation depending on the site's audience, capacity, goal and so on. Let website owners decide, so they can focus on what's important to their audience. No. Let the website owners give their users options. It's not that hard. > For example, for my blog, I suggest people use the RSS feed or Reader Mode to adjust colours and font sizes to their liking. I'm not going to spend time tweaking two colour schemes for some unknown audience, which would just put me off writing and publishing. And that's totally fine! If you don't have separate color schemes, it would make no sense to include a toggle. But if you have separate color schemes, add a toggle.

simonklitj 3y ago

“CSS only” and “Use JavaScript to change” seems to be contradictory.

austin-cheney 3y ago
The difference in color schemes is one class name on one tag. You can also make that change on the back end or anywhere else.

woodpanel 3y ago

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.

Cu3PO42 3y ago

This approach can be massively simplified by using CSS variables for your colors and only putting the color definitions in a separate file.

austin-cheney 3y ago
With consideration for accessibility this depends on the simplicity of the layout. In order to achieve WCAG 2.0 AA compliance color combinations must achieve at least a 4.5x luminosity ratio. That can mean different things may require color changes that were not required in the default scheme, as well as the opposite. As a result you really need files with different rules for that 20% that requires more than different color values.