diff --git a/rspack.config.ts b/rspack.config.ts
index fff70db2a..1a97c36da 100644
--- a/rspack.config.ts
+++ b/rspack.config.ts
@@ -28,6 +28,7 @@ const chunkExcludeSet = new Set([
"content",
"inject",
"scripting",
+ "common",
]);
export default {
@@ -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`,
diff --git a/src/index.css b/src/index.css
index 6b2ef8509..266ec04a7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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));
+}
+
body {
scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}
diff --git a/src/pages/common.ts b/src/pages/common.ts
new file mode 100644
index 000000000..c8183b7a0
--- /dev/null
+++ b/src/pages/common.ts
@@ -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);
+ }
+}
diff --git a/src/pages/options.html b/src/pages/options.html
index 3e3c3840a..ac8219a89 100644
--- a/src/pages/options.html
+++ b/src/pages/options.html
@@ -3,6 +3,7 @@
+
<%= htmlRspackPlugin.options.title %>
<% if isReactTools=="true" { %>
@@ -11,8 +12,6 @@
body {
height: 100%;
overflow: hidden;
- background-color: var(--color-bg-2);
- color: var(--color-text-1);
}
diff --git a/src/pages/popup.html b/src/pages/popup.html
index dfccc4a64..ad12fe28c 100644
--- a/src/pages/popup.html
+++ b/src/pages/popup.html
@@ -3,13 +3,11 @@
-
+
<%= htmlRspackPlugin.options.title %>