Skip to content

fix #1497: Avoid White Background during initial load #1498

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CodFrm merged 4 commits into from
Jun 10, 2026
+38 −9
Merged

fix #1497: Avoid White Background during initial load #1498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ded1c0c
fix #1497: Avoid White Background during initial load
cyfung1031 Jun 10, 2026
cda1685
common.ts
cyfung1031 Jun 10, 2026
dd8940b
common.ts
cyfung1031 Jun 10, 2026
4231985
cleanup
cyfung1031 Jun 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions rspack.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const chunkExcludeSet = new Set([
"content",
"inject",
"scripting",
"common",
]);

export default {
Expand All @@ -53,6 +54,7 @@ export default {
content: `${src}/content.ts`,
scripting: `${src}/scripting.ts`,
inject: `${src}/inject.ts`,
common: `${src}/pages/common.ts`,
popup: `${src}/pages/popup/main.tsx`,
install: `${src}/pages/install/main.tsx`,
batchupdate: `${src}/pages/batchupdate/main.tsx`,
Expand Down
15 changes: 15 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,21 @@
scrollbar-color: inherit;
}

html {
--body-background-color: #fff;
--body-text-color: #1d2129;
}

html.dark {
--body-background-color: #232324;
--body-text-color: #ffffffe6;
}

html, body { /* lowest priority */
background-color: var(--color-bg-2, var(--body-background-color));
color: var(--color-text-1, var(--body-text-color));
Comment on lines +20 to +21

@cyfung1031 cyfung1031 Jun 10, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@CodFrm 应该问题出在这个吧

这个改成

  background-color: var(--body-background-color);
  color: var(--body-text-color);

就没事了

@cyfung1031 cyfung1031 Jun 10, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

或者你大刀阔斧把 body[arco-theme='dark'] 整合成 html.dark

}

body {
scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}
Expand Down
18 changes: 18 additions & 0 deletions src/pages/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// this is a standalone script to load as fast as possible in extension pages.
let inited = false;
if (!inited) {
inited = true;
try {
const lightMode = localStorage.getItem("lightMode") || "auto";
if (lightMode === "dark") {
document.documentElement.classList.add("dark");
} else if (lightMode === "auto") {
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");
if (darkTheme.matches) {
document.documentElement.classList.add("dark");
}
}
} catch (e) {
console.warn(e);
}
}
3 changes: 1 addition & 2 deletions src/pages/options.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="common.js"></script>
<title><%= htmlRspackPlugin.options.title %></title>
<% if isReactTools=="true" { %>
<script src="http://localhost:8097"></script>
Expand All @@ -11,8 +12,6 @@
body {
height: 100%;
overflow: hidden;
background-color: var(--color-bg-2);
color: var(--color-text-1);
}
</style>
</head>
Expand Down
4 changes: 1 addition & 3 deletions src/pages/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,11 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="common.js"></script>
<title><%= htmlRspackPlugin.options.title %></title>
<style>
html,
body {
background-color: var(--color-bg-2);
color: var(--color-text-1);
margin: 0;
padding: 0;
border: 0;
Expand Down
5 changes: 1 addition & 4 deletions src/pages/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="common.js"></script>
<title><%= htmlRspackPlugin.options.title %></title>
<style>
html,
Expand All @@ -12,10 +13,6 @@
border: 0;
height: 100%;
}
body {
background-color: var(--color-bg-2);
color: var(--color-text-1);
}
</style>
</head>

Expand Down
Loading