v1.0.2支持知乎的夜间模式

no13bus · Dec 15, 2022 · 41dc2f9 · 41dc2f9
1 parent 08e5947
commit 41dc2f9
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/src/content-script/index.mjs b/src/content-script/index.mjs
@@ -1,13 +1,17 @@
 import Browser from "webextension-polyfill";
 
 async function run(question) {
+  const theme = document.documentElement.dataset.theme;
   let container = document.querySelector("div.chat-gpt-zhihu");
   if (container) {
     container.remove();
   }
   container = document.createElement("div");
+  container.classList.add("chat-gpt-zhihu");
+  if (theme === "dark") {
+    container.classList.add("dark");
+  }
 
-  container.className = "chat-gpt-zhihu";
   container.innerHTML =
     "<div class='chat-gpt-zhihu-header'>Waiting for ChatGPT response...</div>";
 

diff --git a/src/manifest.json b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "ChatGPT for zhihu",
   "description": "Display ChatGPT response alongside Zhihu Search results",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "manifest_version": 3,
   "icons": {
     "16": "logo.png",

diff --git a/src/manifest.v2.json b/src/manifest.v2.json
@@ -1,7 +1,7 @@
 {
   "name": "ChatGPT for Zhihu",
   "description": "Display ChatGPT response alongside Zhihu Search results",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "manifest_version": 2,
   "icons": {
     "16": "logo.png",

diff --git a/src/styles.css b/src/styles.css
@@ -1,5 +1,17 @@
 .chat-gpt-zhihu {
-  background: #fff;
+  --chat-gpt-zhihu-bg-color: #fff;
+  --chat-gpt-zhihu-border-color: #f6f6f6;
+  --chat-gpt-tooptip-color: #fff;
+}
+
+.chat-gpt-zhihu.dark {
+  --chat-gpt-zhihu-bg-color: #121212;
+  --chat-gpt-zhihu-border-color: #1b1b1b;
+  --chat-gpt-tooptip-color: #121212;
+}
+
+.chat-gpt-zhihu {
+  background: var(--chat-gpt-zhihu-bg-color);
   border-radius: 2px;
   -webkit-box-shadow: 0 1px 3px hsl(0deg 0% 7% / 10%);
   box-shadow: 0 1px 3px hsl(0deg 0% 7% / 10%);
@@ -13,7 +25,7 @@
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border-bottom: 1px solid #f6f6f6;
+  border-bottom: 1px solid var(--chat-gpt-zhihu-border-color);
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
@@ -62,7 +74,7 @@
   position: absolute;
   width: 120px;
   background-color: #555;
-  color: #fff;
+  color: var(--chat-gpt-tooptip-color);
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;