Public
- Public
- Network
- Groups
- Featured
- Popular
- People

Conversation

Notices

Embed this notice
Chee Aun 🤔 (cheeaun@mastodon.social)'s status on Thursday, 16-May-2024 21:56:50 JST Chee Aun 🤔
- ayo
@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 from mastodon.social permalink
Attachments
1. Domain not in remote thumbnail source whitelist: chenhuijing.com
  
  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.
2. Domain not in remote thumbnail source whitelist: meyerweb.com
  
  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.
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 16-May-2024 21:56:50 JST Aral Balkan
  in reply to
  - ayo
  @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. Domain not in remote thumbnail source whitelist: ar.al
    
    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.
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 16-May-2024 21:59:12 JST Aral Balkan
  in reply to
  - ayo
  @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
- Embed this notice
  ayo (ayo@social.ayco.io)'s status on Thursday, 16-May-2024 21:59:13 JST ayo
  in reply to
  - Aral Balkan
  @aral @cheeaun Thanks Aral, I will play around!
  
  In conversation about 6 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Thursday, 16-May-2024 23:36:30 JST Aral Balkan
  in reply to
  - ayo
  @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
- Embed this notice
  ayo (ayo@social.ayco.io)'s status on Thursday, 16-May-2024 23:36:31 JST ayo
  in reply to
  - Aral Balkan
  @aral @cheeaun that sounds like a fun bug to not fix 😄
  
  In conversation about 6 months ago permalink
- Embed this notice
  Aral Balkan (aral@mastodon.ar.al)'s status on Friday, 17-May-2024 01:42:28 JST Aral Balkan
  in reply to
  - ayo
  - 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
- Embed this notice
  sknob ⏚ (sknob@mamot.fr)'s status on Friday, 17-May-2024 01:42:30 JST sknob ⏚
  in reply to
  - Aral Balkan
  - ayo
  @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