Dark color theme is used for a couple of frames during page load in light-themed browser/OS

[tophf]

• Browser: Chrome 120.0.6099.110, Windows 10
• Screenshot: mp4 recording
• Additional context: OS and browser are using light theme, the site uses "follow system mode".

Seems to be caused by defer attribute on the main script:

userstyles.world/web/views/partials/head.tmpl

Line 32 in fee59d7

<script defer src="/js/main.js?v={{ config "appCommitSHA" }}"></script>

I've used local overrides in devtools to verify that removing this attribute fixes the issue. There seems to be no adverse effects either, apparently because you use a listener for readystatechange. The blocking mode of execution doesn't seem to slow down page load here, but if you are concerned, you can add a Link HTTP header with the URLs of scripts and stylesheets to ensure they're preloaded simultaneously with the html, e.g. greasyfork.org does it.

P.S. Chrome started to insert paint frames overly aggressively this year when the number of tags in body exceeds some arbitrary threshold, which is why in Stylus I've moved the entire contents of body to a template in head and then I just add it back into body at the start of the script. This behavior was terrible initially, now they've adjusted the thresholds, but I still use the trick just in case.

[astyled]

Can reproduce on Chromium 110.0.5481.100

Also want to mention that it's currently impossible to use light theme or to change theme setting without JS.
I think the theming system is planned to be reworked with data-flags which were introduced this year.

[tophf]

Also happens in Firefox. I'm using this userscript as a workaround:

// ==UserScript==
// @name        userstyles.world: force light theme
// @namespace   Violentmonkey Scripts
// @match       https://userstyles.world/*
// @run-at      document-start
// @grant       none
// ==/UserScript==
document.documentElement.dataset.colorScheme = 'light';