How to get rid of this effect?

Question

css

Let's say I change the color backround-color: #232323!important;
loading script

$('html').attr('style', 'background-color:#232323!important');
$('body').attr('style', 'background-color:#232323!important');

but when refreshing the page, first the color is white, and only then it changes

blinking is visible (at night it hits the eyes)

PS = the solution
is needed (I did this) - I wrote the rule in the userContent.css file of the browser profile

html{
color:#fefefe;
background-color:#232323; 
}

Answer 1

Initially, the page is white, and the script is not loaded and executed instantly. And while the script has not worked, the browser manages to draw a white background.
If you change it not with a script in the browser, but on the server side, then the delay can be reduced.
Enabling proper caching for css and js will also help, but even if it is inline css, it can still slip through on slow machines or with a bad connection.
In general, there are themes in chrome. Get yourself a dark one .

Answer 2

Why would you want to do it with a script? Just add with the right rules. If you need some condition, then with a guarantee only something like this:<style>

<script>
  if (true) {
    document.write(`<style>
      html, body {
        background-color:#232323 !important
      }
    </style>`);
  }
</script>

In both cases it should be in head.