4 ms·

+10000 for the "lazy" Dark mode - it's excellent. Now if only I could find a use for #rebeccapurple again... a:hover, maybe??

eimrine 4y ago
Are you sure that this color is supported in every browser your website is going to be visited? Why not write "#639" instead?
- chownie 4y ago
  If the browser doesn't support rebeccapurple then there's a whole bunch of other features that also won't work.
- chrisfinazzo 4y ago
  You could use the shorthand, but it's really not necessary at this point. The spec is (unsurprisingly) quite [specific][1] that this color value is exactly "#663399". All browsers which implement CSS Colors have had support for years now and the Color Module itself is now a CR as of a year and a half ago. Incompatibility isn't exactly a rounding error yet, but we're close. [1]: https://lists.w3.org/Archives/Public/www-style/2014Jun/0312.html https://lists.w3.org/Archives/Public/www-style/2014Jun/0312....
hanniabu 4y ago
My lazy dark mode solution: html.dark-mode { filter: grayscale(100%) invert(100%); }
- rawling 4y ago
  I had some fun inverting and then rotating the hue back around.
- cubefox 4y ago
  This would also create negatives of pictures, right?
  - hanniabu 4y ago
    Correct. It's great for mostly text content or as a nice quick and dirty fix until you get around to creating a proper dark theme. Alternatively you can target elements individually, omitting images.
    - cubefox 4y ago
      Perhaps there is some fancy selector which excludes images?
      - extra88 4y ago
        If you use just invert(100%), no grayscale, on the body, you can add img { filter: invert(100%) } to reverse images back to their original color. However, if an image has any transparency or translucency, it may be harder to see with what the background color has become.
- tomxor 4y ago
  I've used something to this effect before, and you can use child selectors on e.g images to effectively exclude elements. Note that the cost of this lazy method is very poor performance (css filter over the entire document), and lack of control over dark colours (inverted colours don't necessarily work best, shifting hue can help but you probably don't want the same as uninverted colours because they tend to be too dark and lack sufficient contrast).

eimrine 4y ago

Are you sure that this color is supported in every browser your website is going to be visited? Why not write "#639" instead?

chownie 4y ago
If the browser doesn't support rebeccapurple then there's a whole bunch of other features that also won't work.
chrisfinazzo 4y ago
You could use the shorthand, but it's really not necessary at this point. The spec is (unsurprisingly) quite [specific][1] that this color value is exactly "#663399". All browsers which implement CSS Colors have had support for years now and the Color Module itself is now a CR as of a year and a half ago. Incompatibility isn't exactly a rounding error yet, but we're close. [1]: https://lists.w3.org/Archives/Public/www-style/2014Jun/0312.html https://lists.w3.org/Archives/Public/www-style/2014Jun/0312....

hanniabu 4y ago

My lazy dark mode solution: html.dark-mode { filter: grayscale(100%) invert(100%); }

rawling 4y ago
I had some fun inverting and then rotating the hue back around.
cubefox 4y ago
This would also create negatives of pictures, right?
- hanniabu 4y ago
  Correct. It's great for mostly text content or as a nice quick and dirty fix until you get around to creating a proper dark theme. Alternatively you can target elements individually, omitting images.
  - cubefox 4y ago
    Perhaps there is some fancy selector which excludes images?
    - extra88 4y ago
      If you use just invert(100%), no grayscale, on the body, you can add img { filter: invert(100%) } to reverse images back to their original color. However, if an image has any transparency or translucency, it may be harder to see with what the background color has become.
tomxor 4y ago
I've used something to this effect before, and you can use child selectors on e.g images to effectively exclude elements. Note that the cost of this lazy method is very poor performance (css filter over the entire document), and lack of control over dark colours (inverted colours don't necessarily work best, shifting hue can help but you probably don't want the same as uninverted colours because they tend to be too dark and lack sufficient contrast).