Fix page flashes in dark mode by boomzero · Pull Request #802 · XMOJ-Script-dev/XMOJ-Script

boomzero · 2025-06-01T12:40:35Z

Emm 等一会写这个

What does this PR aim to accomplish?:

Fix page flashes in dark mode

How does this PR accomplish the above?:

Somehow

By submitting this pull request, I confirm the following:

I have read and understood the contributor's guide, as well as this entire template. I understand which branch to base my commits and Pull Requests against.
I have commented on my proposed changes within the code and I have tested my changes.
I am willing to help maintain this change if there are issues with it later.
It is compatible with the GNU General Public License v3.0
I have squashed any insignificant commits. (git rebase)
I have checked that another pull request for this purpose does not exist.
I have considered and confirmed that this submission will be valuable to others.
I accept that this submission may not be used, and the pull request can be closed at the will of the maintainer.
I give this submission freely and claim no ownership to its content.

I have read the above and my PR is ready for review. Check this box to confirm

- Applies dark theme immediately at `document-start` using `data-bs-theme` and critical preloader CSS to prevent flash of unstyled/light content. - Leverages localStorage via `UtilityEnabled` for reliable early theme detection. - Enhances user experience with smoother theme transition on page load.

Added a `color-scheme` meta tag to improve browser UI hints for dark/light modes and updated the dark mode preloader to temporarily hide the body, preventing visual flashes during Bootstrap transitions. Also streamlined style cleanup on DOMContentLoaded for better consistency.

boomzero · 2025-06-01T12:46:10Z

@langningchen this

Copilot

Pull Request Overview

This PR fixes page flashes in dark mode by applying a minimal dark-theme preload at document-start, then removing it once the page loads.

Bumps version to 1.6.1 and registers the release in Update.json.
Adds @run-at document-start, UtilityEnabled, and applyInitialTheme in XMOJ.user.js to inject and later remove dark-mode preload styles.
Adjusts error logging in RequestAPI from console.error to console.log.

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
package.json	Updated version to 1.6.1
XMOJ.user.js	Added `@run-at document-start`; implemented `UtilityEnabled` and `applyInitialTheme`; removed stale utility; adjusted logging and style removal on load.
Update.json	Added entry for version 1.6.1 with update metadata

Comments suppressed due to low confidence (3)

XMOJ.user.js:42

[nitpick] The function name UtilityEnabled is ambiguous and doesn’t follow common JS boolean naming conventions. Consider renaming it to isUtilityEnabled or hasUtilityEnabled to clarify that it returns a boolean.

let UtilityEnabled = (Name) => {

XMOJ.user.js:54

There’s no automated coverage for applyInitialTheme’s logic (injection/removal of preload styles). Consider adding unit tests or integration tests to verify both dark and light paths.

const applyInitialTheme = () => {

XMOJ.user.js:523

[nitpick] Swapping console.error for console.log downplays errors. It may be clearer to use console.warn (or leave console.error) so that parsing failures remain visible as errors.

console.log(Response.responseText);

Copilot · 2025-06-01T14:16:02Z

XMOJ.user.js

+let UtilityEnabled = (Name) => {
    try {
-        Input = new Date(Input);
-        let Now = new Date().getTime();
-        let Delta = Now - Input.getTime();
-        let RelativeName = "";
-        if (Delta < 0) {
-            RelativeName = "未来";
-        } else if (Delta <= 1000 * 60) {
-            RelativeName = "刚刚";
-        } else if (Delta <= 1000 * 60 * 60) {
-            RelativeName = Math.floor((Now - Input) / 1000 / 60) + "分钟前";
-        } else if (Delta <= 1000 * 60 * 60 * 24) {
-            RelativeName = Math.floor((Now - Input) / 1000 / 60 / 60) + "小时前";
-        } else if (Delta <= 1000 * 60 * 60 * 24 * 31) {
-            RelativeName = Math.floor((Now - Input) / 1000 / 60 / 60 / 24) + "天前";
-        } else if (Delta <= 1000 * 60 * 60 * 24 * 365) {
-            RelativeName = Math.floor((Now - Input) / 1000 / 60 / 60 / 24 / 31) + "个月前";
-        } else {
-            RelativeName = Math.floor((Now - Input) / 1000 / 60 / 60 / 24 / 365) + "年前";
+        if (localStorage.getItem("UserScript-Setting-" + Name) == null) {
+            const defaultOffItems = ["DebugMode", "SuperDebug", "ReplaceXM"];
+            localStorage.setItem("UserScript-Setting-" + Name, defaultOffItems.includes(Name) ? "false" : "true");
        }
-        return "<span title=\"" + Input.toLocaleString() + "\">" + RelativeName + "</span>";
+        return localStorage.getItem("UserScript-Setting-" + Name) == "true";


The string "UserScript-Setting-" is repeated in multiple places. Extract it into a constant (e.g. STORAGE_KEY_PREFIX) to avoid duplication and typos.

Suggested change

let UtilityEnabled = (Name) => {

try {

Input = new Date(Input);

let Now = new Date().getTime();

let Delta = Now - Input.getTime();

let RelativeName = "";

if (Delta < 0) {

RelativeName = "未来";

} else if (Delta <= 1000 * 60) {

RelativeName = "刚刚";

} else if (Delta <= 1000 * 60 * 60) {

RelativeName = Math.floor((Now - Input) / 1000 / 60) + "分钟前";

} else if (Delta <= 1000 * 60 * 60 * 24) {

RelativeName = Math.floor((Now - Input) / 1000 / 60 / 60) + "小时前";

} else if (Delta <= 1000 * 60 * 60 * 24 * 31) {

RelativeName = Math.floor((Now - Input) / 1000 / 60 / 60 / 24) + "天前";

} else if (Delta <= 1000 * 60 * 60 * 24 * 365) {

RelativeName = Math.floor((Now - Input) / 1000 / 60 / 60 / 24 / 31) + "个月前";

} else {

RelativeName = Math.floor((Now - Input) / 1000 / 60 / 60 / 24 / 365) + "年前";

if (localStorage.getItem("UserScript-Setting-" + Name) == null) {

const defaultOffItems = ["DebugMode", "SuperDebug", "ReplaceXM"];

localStorage.setItem("UserScript-Setting-" + Name, defaultOffItems.includes(Name) ? "false" : "true");

}

return "<span title=\"" + Input.toLocaleString() + "\">" + RelativeName + "</span>";

return localStorage.getItem("UserScript-Setting-" + Name) == "true";

const STORAGE_KEY_PREFIX = "UserScript-Setting-";

let UtilityEnabled = (Name) => {

try {

if (localStorage.getItem(STORAGE_KEY_PREFIX + Name) == null) {

const defaultOffItems = ["DebugMode", "SuperDebug", "ReplaceXM"];

localStorage.setItem(STORAGE_KEY_PREFIX + Name, defaultOffItems.includes(Name) ? "false" : "true");

}

return localStorage.getItem(STORAGE_KEY_PREFIX + Name) == "true";

Copilot · 2025-06-01T14:16:02Z

XMOJ.user.js

-    } catch (e) {
-        console.error(e);
+
+const applyInitialTheme = () => {


add a brief JSDoc or inline comment describing applyInitialTheme’s behavior, side effects, and when it should run, to improve readability and maintainability.

Copilot · 2025-06-01T14:16:03Z

XMOJ.user.js

+
+const applyInitialTheme = () => {
+    const isDarkMode = UtilityEnabled("DarkMode");
+    console.log("Initial DarkMode check (document-start):", isDarkMode);


[nitpick] This log runs on every page load and could clutter the console in production. Consider gate-ing it behind a debug flag or removing it once verified.

Suggested change

console.log("Initial DarkMode check (document-start):", isDarkMode);

if (UtilityEnabled("DebugMode")) {

console.log("Initial DarkMode check (document-start):", isDarkMode);

}

langningchen

还是会有闪烁问题，我似乎并没有发现变好 😮‍💨

boomzero · 2025-06-01T23:56:09Z

hhh this is hard

boomzero · 2025-06-01T23:59:35Z

The only thing we can control is when we remove these temporary styles

langningchen · 2025-06-02T00:02:05Z

所以我认为这个没有方法可以完美的修复它

…

________________________________ From: Zhu Chenrui ***@***.***> Sent: Monday, June 2, 2025 7:59 To: XMOJ-Script-dev/XMOJ-Script ***@***.***> Cc: Langning Chen ***@***.***>; Mention ***@***.***> Subject: Re: [XMOJ-Script-dev/XMOJ-Script] Fix page flashes in dark mode (PR #802) [https://avatars.githubusercontent.com/u/85378277?s=20&v=4]boomzero left a comment (XMOJ-Script-dev/XMOJ-Script#802)<#802 (comment)> The only thing we can control is when we remove these temporary styles ― Reply to this email directly, view it on GitHub<#802 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ATPDVNB4PUNX7IER7VFCIW33BOHX3AVCNFSM6AAAAAB6LBTAISVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSMRYGE2TGMJXHA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

boomzero · 2025-06-02T00:19:00Z

是的…

boomzero · 2025-06-02T00:21:02Z

How about first forcing dark mode in bootstrap 3?

boomzero · 2025-06-02T00:21:14Z

The browser has to remember this

boomzero · 2025-06-02T00:21:42Z

So when we open other pages, even the initial render would be dark

boomzero · 2025-06-02T00:55:21Z

Turns out bootstrap 3 doesn't even support dark mode...

boomzero · 2025-06-02T00:59:16Z

先 merge 了…

langningchen · 2025-06-02T04:43:02Z

……

boomzero · 2025-06-02T08:43:51Z

……

？

boomzero added 2 commits June 1, 2025 19:29

pull-request-size bot added the size/XXL label Jun 1, 2025

hendragon-bot bot added the user-script This issue or pull request is related to the main user script label Jun 1, 2025

boomzero linked an issue Jun 1, 2025 that may be closed by this pull request

[Bug] if dark mode is enabled, the page flashes when loading #343

Closed

2 tasks

github-actions bot added 2 commits June 1, 2025 12:40

1.6.1

18db82b

Update version info to 1.6.1

e124fcd

boomzero changed the title ~~Add color-scheme meta tag and refine dark mode preloader logic~~ Fix page flashes in dark mode Jun 1, 2025

github-actions bot added 3 commits June 1, 2025 12:42

Update time and description of 1.6.1

875da8b

Update time and description of 1.6.1

13886b2

Update time and description of 1.6.1

3cad8b4

github-actions bot force-pushed the boomzero/dark-mode-improvements branch from 8fff998 to 3cad8b4 Compare June 1, 2025 12:44

boomzero requested review from Copilot and langningchen June 1, 2025 14:14

Copilot AI reviewed Jun 1, 2025

View reviewed changes

langningchen approved these changes Jun 1, 2025

View reviewed changes

boomzero merged commit 4139bbd into dev Jun 2, 2025
2 of 3 checks passed

boomzero deleted the boomzero/dark-mode-improvements branch June 2, 2025 00:59

boomzero mentioned this pull request Jul 9, 2025

fix: reinfo.php shows no test results even if test results are available #817

Merged

1 task

Conversation

boomzero commented Jun 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

boomzero commented Jun 1, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jun 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 1, 2025

Choose a reason for hiding this comment

Uh oh!

langningchen left a comment

Choose a reason for hiding this comment

Uh oh!

boomzero commented Jun 1, 2025

Uh oh!

boomzero commented Jun 1, 2025 • edited by hendragon-bot bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

langningchen commented Jun 2, 2025 via email

Uh oh!

boomzero commented Jun 2, 2025

Uh oh!

boomzero commented Jun 2, 2025

Uh oh!

boomzero commented Jun 2, 2025

Uh oh!

boomzero commented Jun 2, 2025

Uh oh!

boomzero commented Jun 2, 2025

Uh oh!

boomzero commented Jun 2, 2025

Uh oh!

Uh oh!

langningchen commented Jun 2, 2025

Uh oh!

boomzero commented Jun 2, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

boomzero commented Jun 1, 2025 •

edited

Loading

boomzero commented Jun 1, 2025 •

edited by hendragon-bot bot

Loading