描述
Problem
If you change body class on client-side with JS, to determine theme automatically, you'll get flickering.
Something like this, as an example:
Which means: white by default, dark only when page will let JS do its work.
Instead of JS, it should be done with CSS media queries. This will remove flickering forever.
Solution
Good example how it's done is Github Primer CSS, look here:
https://primer.style/css/support/theming
They have options: dark, light, and auto, – first two forcing the style, say, when you need to set it from user preferences. The last one will let browser determine it automatically... FROM CSS, using media queries, – that's important one again, because it will save you from getting flickering bug when browser tries to automatically set proper theme. Automatic theming shouldn't be done JS-way. Should be done CSS-way.
Similar issues
Another similar issue (solving this one will solve his use-case too):