5 ms·

CSS Only dark mode without JS

33 points by dulvui 3y ago

sigg3 3y ago
> It was pretty sure, that dark mode can only be implemented using JS I used this in the 90's: `<body bgcolor="#000000">` You needed it to really appreciate the sparks from animated fire gifs.
- dulvui 3y ago
  Yes you are right you can get dark mode by setting the background to black. But with this media query you get an automated switch between light and dark mode, depending on you browser settings.
  - EugeneOZ 3y ago
    Dark mode is much more than just bg color. Font, shadows, borders, selection, navbar, placeholders...
- tempodox 3y ago
  … which creates the kind of “dark mode” that ends up being unbearable. Dark mode does not mean pitch-black background, nor does it mean squeaky-white text color.
  - butz 3y ago
    Most websites on geocities IIRC were "dark mode" :)
  - hypertele-Xii 3y ago
    If white on black is unbearable, your screen contrast is miscalibrated. Lower it until comfortable.
    - FireInsight 3y ago
      If your screen shows pitch black and white both as a nice gray, your screen contrast is miscalibrated and you shouldn't be doing any work involving colors on it.
deleted 3y ago
[deleted]
lloydatkinson 3y ago
It’s ironic it says that the user should set the theme themselves via their OS because the author doesn’t like to use buttons on sites to do it. The vast majority of users don’t know how to do that. I’m sure the vast majority of that group couldn’t really explain themes as a concept.
- dulvui 3y ago
  Original author here. I don't like the idea of using JS on my website and I don't think that it is possible to create a light/dark mode switch with only CSS. But you are right, most users don't know how to do that.
  - jiggywiggy 3y ago
    Would be perfectly reasonable to use js over this feature.
    - dulvui 3y ago
      Yes for sure, but my personal policy is not using JS. Anyway my site doesn't have so many visitors ;-) People come, stay for a few seconds and then leave forever.
      - jiggywiggy 3y ago
        Hahah old school hate for js. Very good.
  - FireInsight 3y ago
    However, it would probably be possible with very minimal JS a la how Tailwind does it, toggling a .dark class in the body element and setting the dark mode variables and colors there.
  - butz 3y ago
    But adding onclick and window.open() JS functions is somehow justifiable, over using simple <a> links? Of course, there might be some specific case you are solving here, so it would be very educational to hear this out.
butz 3y ago
I'm pretty sure with all new CSS features theme toggle could be implemented without JS, but in that case it probably wouldn't reflect your current setting.
maxiwer 3y ago
Thank you for sharing. But the problem could be, when some users don't want to the app to automatically switch to dark mode.
austin-cheney 3y ago
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...
jpc0 3y ago
Ain't there yet but soon we should be able to do this without CSS https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me...
- Springtime 3y ago
  That is different, it styles the browser chrome rather than page content (at least in existing implementations). On desktop for example one can see the effect by using Vivaldi browser with a theme that has accent color enabled. It also is detected by sites like Discord for their embed widget accent color.
skilled 3y ago
Sadly this isn't the best way to do it because you have no option to switch back to light scheme unless you manually do it in your System settings.
somishere 3y ago
Very simple CSS only example, including JS-free toggling: https://codepen.io/theprojectsomething/pen/oNQYqRw https://codepen.io/theprojectsomething/pen/oNQYqRw Note: Could be simplified with the :has selector but it isn't currently supported in Firefox.
jdthedisciple 3y ago
Uses SCSS which seems outdated. Why not simply use native CSS variables? Worth pointing out since this is a post about doing something in a simple way.
Springtime 3y ago
CSS only theme toggles are possible by utilizing a checkbox and placing the body content below the checkbox in a container element. Then adding a transparent label element that controls the checkbox state somewhere else on the page and styling a pseudo-button however one likes below the label. Then in CSS setting both the prefers-color-scheme media queries but also configuring how the colors should react when the checkbox state is changed. So if a user has prefers-color-scheme:light then when the theme switcher is clicked it styles the page the opposite (example selector: .theme-switch:checked ~ .pagebody). Can also add such styling as a default outside of media queries, too, for browsers that don't recognize prefers-color-scheme. Saving the state across pages however requires some JS but just wanted to comment that CSS-only toggles are possible.
Gualdrapo 3y ago
I just used CSS variables at my portfolio [0]. I just don't feel like adding a toggle in it to switch between light/dark mode adds something of special value in this case. [0] https://miler.codeberg.page/ https://miler.codeberg.page/
nicbou 3y ago
I implemented a dark mode on all of my websites. It has become so much easier with CSS variables. Just change the colour variables and the whole website goes dark. The biggest challenge is images. You have to mind images with transparent backgrounds, as well as SVG icons with a fixed colour.
garritfra 3y ago
There's also: `color-scheme: light dark` which automatically switches the color scheme of default html elements depending on the preferred color scheme. No theming required! https://garrit.xyz/posts/2023-04-12-instant-dark-theme https://garrit.xyz/posts/2023-04-12-instant-dark-theme

33 points by dulvui 3y ago

> It was pretty sure, that dark mode can only be implemented using JS I used this in the 90's: `<body bgcolor="#000000">` You needed it to really appreciate the sparks from animated fire gifs.

dulvui 3y ago
Yes you are right you can get dark mode by setting the background to black. But with this media query you get an automated switch between light and dark mode, depending on you browser settings.
- EugeneOZ 3y ago
  Dark mode is much more than just bg color. Font, shadows, borders, selection, navbar, placeholders...
tempodox 3y ago
… which creates the kind of “dark mode” that ends up being unbearable. Dark mode does not mean pitch-black background, nor does it mean squeaky-white text color.
- butz 3y ago
  Most websites on geocities IIRC were "dark mode" :)
- hypertele-Xii 3y ago
  If white on black is unbearable, your screen contrast is miscalibrated. Lower it until comfortable.
  - FireInsight 3y ago
    If your screen shows pitch black and white both as a nice gray, your screen contrast is miscalibrated and you shouldn't be doing any work involving colors on it.

deleted 3y ago

[deleted]

lloydatkinson 3y ago

It’s ironic it says that the user should set the theme themselves via their OS because the author doesn’t like to use buttons on sites to do it. The vast majority of users don’t know how to do that. I’m sure the vast majority of that group couldn’t really explain themes as a concept.

dulvui 3y ago
Original author here. I don't like the idea of using JS on my website and I don't think that it is possible to create a light/dark mode switch with only CSS. But you are right, most users don't know how to do that.
- jiggywiggy 3y ago
  Would be perfectly reasonable to use js over this feature.
  - dulvui 3y ago
    Yes for sure, but my personal policy is not using JS. Anyway my site doesn't have so many visitors ;-) People come, stay for a few seconds and then leave forever.
    - jiggywiggy 3y ago
      Hahah old school hate for js. Very good.
- FireInsight 3y ago
  However, it would probably be possible with very minimal JS a la how Tailwind does it, toggling a .dark class in the body element and setting the dark mode variables and colors there.
- butz 3y ago
  But adding onclick and window.open() JS functions is somehow justifiable, over using simple <a> links? Of course, there might be some specific case you are solving here, so it would be very educational to hear this out.

butz 3y ago

I'm pretty sure with all new CSS features theme toggle could be implemented without JS, but in that case it probably wouldn't reflect your current setting.

maxiwer 3y ago

Thank you for sharing. But the problem could be, when some users don't want to the app to automatically switch to dark mode.

austin-cheney 3y ago

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...

jpc0 3y ago

Ain't there yet but soon we should be able to do this without CSS https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color https://developer.mozilla.org/en-US/docs/Web/HTML/Element/me...

Springtime 3y ago
That is different, it styles the browser chrome rather than page content (at least in existing implementations). On desktop for example one can see the effect by using Vivaldi browser with a theme that has accent color enabled. It also is detected by sites like Discord for their embed widget accent color.

skilled 3y ago

Sadly this isn't the best way to do it because you have no option to switch back to light scheme unless you manually do it in your System settings.

somishere 3y ago

Very simple CSS only example, including JS-free toggling: https://codepen.io/theprojectsomething/pen/oNQYqRw https://codepen.io/theprojectsomething/pen/oNQYqRw Note: Could be simplified with the :has selector but it isn't currently supported in Firefox.

jdthedisciple 3y ago

Uses SCSS which seems outdated. Why not simply use native CSS variables? Worth pointing out since this is a post about doing something in a simple way.

Springtime 3y ago

CSS only theme toggles are possible by utilizing a checkbox and placing the body content below the checkbox in a container element. Then adding a transparent label element that controls the checkbox state somewhere else on the page and styling a pseudo-button however one likes below the label. Then in CSS setting both the prefers-color-scheme media queries but also configuring how the colors should react when the checkbox state is changed. So if a user has prefers-color-scheme:light then when the theme switcher is clicked it styles the page the opposite (example selector: .theme-switch:checked ~ .pagebody). Can also add such styling as a default outside of media queries, too, for browsers that don't recognize prefers-color-scheme. Saving the state across pages however requires some JS but just wanted to comment that CSS-only toggles are possible.

Gualdrapo 3y ago

I just used CSS variables at my portfolio [0]. I just don't feel like adding a toggle in it to switch between light/dark mode adds something of special value in this case. [0] https://miler.codeberg.page/ https://miler.codeberg.page/

nicbou 3y ago

I implemented a dark mode on all of my websites. It has become so much easier with CSS variables. Just change the colour variables and the whole website goes dark. The biggest challenge is images. You have to mind images with transparent backgrounds, as well as SVG icons with a fixed colour.

garritfra 3y ago

There's also: `color-scheme: light dark` which automatically switches the color scheme of default html elements depending on the preferred color scheme. No theming required! https://garrit.xyz/posts/2023-04-12-instant-dark-theme https://garrit.xyz/posts/2023-04-12-instant-dark-theme