Best practise to create a dark theme for a complex website.

[tvcat]

Many websites are using randomly generated classes (RGC). I do know the reason behind it.

I have no problem creating a dark theme by using the RGC.

However when the website updated and the RGC changed, it will take much time to determine which RGCs were changed. Unless I document all the RGC like doing a data dictionary or using CSS selector which is slower and harder to read.

Is there a better way? Thanks in advance.

[tophf]

No, unfortunately, there's no better way.

[tvcat]

I see, really hard to do big modification for modern complex website. Thanks for your input.

[Mottie]

One thing you could do is invert the entire page:

  body {
    filter: invert(0.9);
  }
  img {
    filter: invert(0.9) brightness(120%);
  }

I believe the dark reader extension does something similar to this.

[tvcat]

Tried this but it add some padding/margin on the top element and push down some fixed element under. Also this will not work with background-image.

I use DarkReader too but I have performance issue with complex website and this is the reason why I;m trying to do it my own.

Thanks for your input.