修复夜间模式的bug; #508

apps/options/index.css

@@ -1,5 +1,17 @@
 body{
     margin: 0;
+    transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* 深色模式基础样式 */
+.dark-mode {
+    background-color: #1a1a1a;
+    color: #e0e0e0;
+}
+
+.dark-mode body {
+    background-color: #1a1a1a;
+    color: #e0e0e0;
 }
 .market-container {
     padding: 20px;
@@ -7,6 +19,13 @@ body{
     background: #fff;
     border-radius: 4px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+/* 深色模式下的市场容器 */
+.dark-mode .market-container {
+    background: #1f1f1f;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
 }
 
 /* 顶部搜索和筛选区 */
@@ -1866,6 +1885,78 @@ body{
     color: #fff;
 }
 
+/* 暗黑模式下的代币提示区域样式 */
+.dark-mode .token-tips {
+    background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.dark-mode .token-content p {
+    color: #fff;
+}
+
+.dark-mode .token-link-inline {
+    color: #f1c40f;
+}
+
+.dark-mode .token-link-inline:hover {
+    color: #f39c12;
+}
+
+/* 深色模式下的文本样式 */
+.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
+    color: #e0e0e0;
+}
+
+.dark-mode p, .dark-mode span, .dark-mode div {
+    color: #c0c0c0;
+}
+
+/* 深色模式下的输入框样式 */
+.dark-mode input[type="text"], 
+.dark-mode input[type="email"], 
+.dark-mode input[type="password"], 
+.dark-mode textarea, 
+.dark-mode select {
+    background-color: #333;
+    border-color: #555;
+    color: #e0e0e0;
+}
+
+.dark-mode input[type="text"]:focus, 
+.dark-mode input[type="email"]:focus, 
+.dark-mode input[type="password"]:focus, 
+.dark-mode textarea:focus, 
+.dark-mode select:focus {
+    border-color: #4ca1af;
+    box-shadow: 0 0 0 2px rgba(76, 161, 175, 0.2);
+}
+
+/* 深色模式下的复选框样式 */
+.dark-mode input[type="checkbox"] {
+    background-color: #333;
+    border-color: #555;
+}
+
+.dark-mode input[type="checkbox"]:checked {
+    background-color: #4ca1af;
+    border-color: #4ca1af;
+}
+
+/* 深色模式下的标签样式 */
+.dark-mode label {
+    color: #e0e0e0;
+}
+
+/* 深色模式下的链接样式 */
+.dark-mode a {
+    color: #4ca1af;
+}
+
+.dark-mode a:hover {
+    color: #5cb3c1;
+}
+
 /* 工具排序样式 */
 .tool-sort-container {
     background: #f8f9fa;

apps/options/index.js

@@ -983,6 +983,13 @@ new Vue({
                     });
                     this.selectedOpts = selectedOpts;
                     
+                    // 同步localStorage设置，确保与其他工具兼容
+                    localStorage.setItem('AUTO_DARK_MODE', opts.AUTO_DARK_MODE);
+                    localStorage.setItem('ALWAYS_DARK_MODE', opts.ALWAYS_DARK_MODE);
+                    
+                    // 应用深色模式设置
+                    this.applyDarkModeSettings(opts);
+                    
                     // 加载右键菜单设置
                     this.menuDownloadCrx = await Awesome.menuMgr('download-crx', 'get') === '1';
                     this.menuFeHelperSeting = await Awesome.menuMgr('fehelper-setting', 'get') !== '0';
@@ -1010,6 +1017,51 @@ new Vue({
                 this.isFirefox = false;
             }
         },
+
+        // 应用深色模式设置
+        applyDarkModeSettings(opts) {
+            const body = document.body;
+            const shouldEnableDarkMode = this.shouldEnableDarkMode(opts);
+            
+            // 同时设置localStorage和chrome.storage.local，确保与其他工具兼容
+            localStorage.setItem('AUTO_DARK_MODE', opts.AUTO_DARK_MODE);
+            localStorage.setItem('ALWAYS_DARK_MODE', opts.ALWAYS_DARK_MODE);
+            
+            if (shouldEnableDarkMode) {
+                body.classList.add('dark-mode');
+                // 设置html属性，方便其他工具检测
+                document.documentElement.setAttribute('data-theme', 'dark');
+                document.documentElement.setAttribute('dark-mode', 'on');
+            } else {
+                body.classList.remove('dark-mode');
+                document.documentElement.setAttribute('data-theme', 'light');
+                document.documentElement.setAttribute('dark-mode', 'off');
+            }
+        },
+
+        // 判断是否应该启用深色模式
+        shouldEnableDarkMode(opts) {
+            // 如果始终开启深色模式，直接返回true
+            if (opts.ALWAYS_DARK_MODE === true || opts.ALWAYS_DARK_MODE === 'true') {
+                return true;
+            }
+            
+            // 如果自动开启深色模式，检查时间
+            if (opts.AUTO_DARK_MODE === true || opts.AUTO_DARK_MODE === 'true') {
+                return this.isNightTime();
+            }
+            
+            return false;
+        },
+
+        // 检查当前时间是否在夜间时段（19:00-06:00）
+        isNightTime() {
+            const now = new Date();
+            const hour = now.getHours();
+            
+            // 19:00-23:59 或 00:00-05:59
+            return hour >= 19 || hour < 6;
+        },
         
         // 显示设置模态框
         async showSettings() {
@@ -1106,6 +1158,9 @@ new Vue({
                             menuOnly: true
                         });
                         
+                        // 应用深色模式设置
+                        this.applyDarkModeSettings(opts);
+                        
                         // 关闭弹窗
                         this.closeSettings();
                         
@@ -1146,8 +1201,12 @@ new Vue({
             // 切换夜间模式
             if (body.classList.contains('dark-mode')) {
                 body.classList.remove('dark-mode');
+                document.documentElement.setAttribute('data-theme', 'light');
+                document.documentElement.setAttribute('dark-mode', 'off');
             } else {
                 body.classList.add('dark-mode');
+                document.documentElement.setAttribute('data-theme', 'dark');
+                document.documentElement.setAttribute('dark-mode', 'on');
                 
                 // 设置倒计时
                 this.countDown = 10;
@@ -1158,11 +1217,14 @@ new Vue({
                     if (this.countDown <= 0) {
                         clearInterval(timer);
                         body.classList.remove('dark-mode');
+                        document.documentElement.setAttribute('data-theme', 'light');
+                        document.documentElement.setAttribute('dark-mode', 'off');
                     }
                 }, 1000);
             }
         },
 
+
         // 检查URL中的donate_from参数并显示打赏弹窗
         checkDonateParam() {
             try {