I'm using Dark Reader extension but still I'm whiteflashed when loading pages.

all 10 comments

sorted by: hot top controversial new old
[–] 6 points 1 year ago (2 children)

Are you using Firefox 144 or later? That's when they added support for CSS view-transition which might reduce this (on websites that use view-transition).

  • source
  • hideshow 2 child comments
  • [–] [S] 4 points 1 year ago* (1 child)

    I'm trying with both Firefox 145 and LibreWolf 144 on ArchLinux KDE Plasma. For example, when I reload this page I get the withflash: https://boardgamegeek.com/browse/boardgame

  • source
  • parent
  • hideshow 1 child comment
  • [–] 5 points 1 year ago* (last edited 1 year ago) (4 children)

    Some websites are really cursed in how hard they make overriding their styles.

    Some things I usually do to handle these are using Stylus with Instant inject mode and some !important rules for a global dark theme.

    If that also fails, I have an anti-Flash-of-Unstyled-Content userscript ready to toggle per-website as needed:

    ;(function() {
    
      const css = `
        html, body {
          background: #222 !important;
          min-height: 100vh !important;
        }
    
        body > * {
          visibility: hidden !important;
        }
      `
    
      const style = document.createElement('style')
      style.id = 'antiFOUC-block'
      style.textContent = css
    
      const container = document.head || document.documentElement
      container.prepend(style)
    
      window.addEventListener('DOMContentLoaded', () => {
        const block = document.getElementById('antiFOUC-block')
        if (block) block.remove()
    
        document.body.childNodes.forEach(n => {
          if (n.nodeType === 1) {
            n.style.visibility = ''
          }
        })
      })
    })()
    

    It works by preventing display of content before it's fully loaded. This won't make websites dark on its own, just prevent the flash.

    (I have tested this with Violentmonkey on boardgamegeek.com plus a Stylus dark theme and it did solve it. With Dark Reader though it will still flash)

    If even that fails I have a second one that will strip all inline and !important styles, but it rarely ever comes to that.

    I hope this is helpful because being flashed with a fully white page makes me want to cry and punch my computer.

  • source
  • hideshow 4 child comments
  • [–] 2 points 1 year ago (2 children)

    By the way,

    const block = document.getElementById('antiFOUC-block')
    

    Is this necessary? Isn't there a reference to this node already via the style identifier?

  • source
  • parent
  • hideshow 2 child comments
  • [–] 3 points 1 year ago

    Easy. Preferences > Contrast control > Manage colors and set the background color to black or whatever.

    You will never be whiteflashed again. Some websites will be ugly, a few will be unusable (you'll have to unset it temporarily for them, or use a different profile). But many will be just as good as with Dark Reader.

    In any case, this is literally the only way to banish whiteflash definitively. It also has no speed penalty because it's native.

  • source
  • clicking star to favorite this thread in case anyone provides a good answer

  • source