Any Progress on Dark Mode?

7

Any Progress on Dark Mode? ☶ ask meta
authored by nikivi 3 years ago | 13 comments

13

Ideally with automatic switching using prefers-color-scheme media feature.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

1. 2
  
  jvo 3 years ago | link
  
  Dark mode was briefly merged and deployed but it was reverted because of bad dev support in Firefox. I don’t think the issues in the commit message have improved since then.
  1. 2
    
    mort 3 years ago | link
    
    Well, now that Mozilla fired their Firefox DevTools people, I’m sure it’ll be fixed in no time…
2. 1
  
  nikivi 3 years ago | link
  
  I see this PR was merged but don’t see the setting exposed anywhere.
  
  I am willing to implement the dark mode myself together with the automatic switching based of OS setting if lobsters developers are okay to accept it?
  1. 4
    
    brocooks 3 years ago | link
    
    If you look at the bottom of that PR you can see it was reverted later that day:
    
    Firefox support is half-baked. There’s no user or devtool UI to toggle between states, inspecting an element always shows the style for ::selection instead of the element, and it lists the name of a color variable with no way to see the value of the variable or where it is set. Punting until it’s debuggable.
    1. 1
      
      skyfaller 3 years ago | link
      
      There is a devtools toggle that is not enabled by default. Relevant bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1550804
      
      When I asked about it in the DevTools Matrix channel recently, they said:
      
      The plan is to replace the multi-state button with a drop-down menu with three explicit options, like in Chrome: 1. no preference (uses current system), 2. prefers dark, 3. prefers light. We’ll work on this soon. Hoping to enable it on the next Firefox Beta.
      1. 1
        
        pushcx 3 years ago | link
        
        Thanks for the link, I’m following what seems to be the relevant issue. In the meantime, there are personal approaches linked from the about page.
  2. 1
    
    singpolyma 3 years ago | link
    
    You need to activate dark mode in your browser to get that PR turned on :)
    1. 1
      
      nikivi 3 years ago | link
      
      Can you link to documentation how to do that for Safari please?
      
      I thought browsers themselves don’t have concept of dark mode or light mode but OS does.
      1. 1
        
        singpolyma 3 years ago | link
        
        Hmm. Documentation I find seems to indicate Safari should follow OS dark mode setting, yeah. But on my work laptop safari loads lobste.rs with not dark mode, so must be missing something…
3. 1
  
  hwj e-mailed 3 years ago | link
  
  With stylus[1] you can make the whole web dark, not just lobste.rs.
  
  [1] https://add0n.com/stylus.html
  1. 1
    
    nikivi 3 years ago | link
    
    Yes but running the extension will slow the load of pages loading as it has to inject css. I don’t want to run unnecessary extensions that sacrifice performance.
  2. 1
    
    singpolyma 3 years ago | link
    
    Or even better: dark reader!
    1. 1
      
      nikivi 3 years ago | link
      
      Don’t want to run dark reader all the time as it slows down page load.