Public
- Public
- Network
- Groups
- Popular
- People

Conversation

Notices

ayo (ayo@social.ayco.io)'s status on Thursday, 16-May-2024 21:56:36 JST ayo

what's the laziest dark mode implementation? is there a 3-liner code change? 😄 asking for a friend (not me)
#webdev

In conversation about 6 months ago from social.ayco.io permalink
- Chee Aun (cheeaun@mastodon.social)'s status on Thursday, 16-May-2024 21:56:33 JST Chee Aun
  in reply to
  
  @ayo I'm aware of these two:
  - 2019: https://chenhuijing.com/blog/friends-dont-let-friends-implement-dark-mode-alone/
  - 2023: https://meyerweb.com/eric/thoughts/2023/01/16/minimal-dark-mode-styling/
  In conversation about 6 months ago permalink
  Attachments
  1. Minimal Dark Mode Styling
    
    I set up a dirty-rough Dark Mode handler for my web site and am wondering what I might be overlooking.
  2. Friends don't let friends implement dark mode alone
    
    So I have this friend, Wei, who’s basically an expert with CSS blend modes, right? And she came up with a really interesting method to implement dark mode on her site with blend modes.
- Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 16-May-2024 21:56:33 JST Aral Balkan
  in reply to
  - Chee Aun
  @cheeaun @ayo Also: https://ar.al/2021/08/24/implementing-dark-mode-in-a-handful-of-lines-of-css-with-css-filters/
  In conversation about 6 months ago permalink
  Attachments
  1. Implementing dark mode in a handful of lines of CSS with CSS filters
    
    I finally got round to implementing dark mode for this site (the cobbler’s children have no shoes and all that…) Here’s all the CSS I had to add: @media (prefers-color-scheme: dark) { /* Invert all elements on the body while attempting to not alter the hue substantially. */ body { filter: invert(100%) hue-rotate(180deg); } /* Workarounds and optical adjustments. */ /* Firefox workaround: Set the background colour for the html element separately because, unlike other browsers, Firefox doesn’t apply the filter to the root element’s background.
- Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 16-May-2024 21:58:58 JST Aral Balkan
  in reply to
  - Chee Aun
  @ayo @cheeaun PS. There was an issue with full screen videos getting inverted by mistake on some browser, will look it up and send you a link to the fix
  
  In conversation about 6 months ago permalink
- ayo (ayo@social.ayco.io)'s status on Thursday, 16-May-2024 21:58:59 JST ayo
  in reply to
  - Aral Balkan
  - Chee Aun
  @aral @cheeaun Thanks Aral, I will play around!
  
  In conversation about 6 months ago permalink
- Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 16-May-2024 23:36:12 JST Aral Balkan
  in reply to
  - Chee Aun
  @ayo @cheeaun Ah, actually, I’d apparently updated the blog post with it so you should be fine :) (Go me, being organised and all.)
  
  In conversation about 6 months ago permalink
- ayo (ayo@social.ayco.io)'s status on Thursday, 16-May-2024 23:36:13 JST ayo
  in reply to
  - Aral Balkan
  - Chee Aun
  @aral @cheeaun that sounds like a fun bug to not fix 😄
  
  In conversation about 6 months ago permalink
- Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 17-May-2024 01:42:11 JST Aral Balkan
  in reply to
  - Chee Aun
  - sknob ⏚
  @sknob @cheeaun @ayo Ah, yes, you’d have to apply a span and a class to those to fix it. Which is not a bad idea as you will likely want to provide aria descriptions for them or hide them from screen readers if they’re purely cosmetic.
  
  In conversation about 6 months ago permalink
- sknob ⏚ (sknob@mamot.fr)'s status on Friday, 17-May-2024 01:42:13 JST sknob ⏚
  in reply to
  - Aral Balkan
  - Chee Aun
  @aral @cheeaun @ayo
  Nice, thanks! Only issue I have is with emoji inside the text, although they do look cool and spooky inverted :)
  
  In conversation about 6 months ago permalink

Public

Conversation

Notices

Feeds