perf: Safari支持暗黑模式

language/original-web.txt

@@ -95,7 +95,7 @@
 仅限项目负责人操作
 任务描述，回车创建
 你好，扫码确认登录
-你确定要登出系统？
+你确定要登出系统吗？
 你确认领取任务吗？
 列表名称，回车创建
 同步修改子任务时间
@@ -1252,3 +1252,4 @@ Markdown 格式发送
 
 计划时间冲突提示
 忽略并继续
+你确定要清除缓存吗？

resources/assets/js/functions/web.js

@@ -1140,9 +1140,36 @@
     $.extend({
         dark: {
             utils: {
-                filter: '-webkit-filter: url(#dark-mode-filter) !important; filter: url(#dark-mode-filter) !important;',
+                supportMode() {
-                reverseFilter: '-webkit-filter: url(#dark-mode-reverse-filter) !important; filter: url(#dark-mode-reverse-filter) !important;',
+                    let ua = typeof window !== 'undefined' && window.navigator.userAgent.toLowerCase();
-                noneFilter: '-webkit-filter: none !important; filter: none !important;',
+                    if (`${ua.match(/Chrome/i)}` === 'chrome') {
+                        return 'chrome';
+                    }
+                    if (`${ua.match(/Safari/i)}` === 'safari') {
+                        return 'safari';
+                    }
+                    return null;
+                },
+
+                defaultFilter() {
+                    if (this.supportMode() === 'chrome') {
+                        return '-webkit-filter: url(#dark-mode-filter) !important; filter: url(#dark-mode-filter) !important;';
+                    } else if (this.supportMode() === 'safari') {
+                        return '-webkit-filter: invert(0.92) hue-rotate(180deg) !important; filter: invert(0.92) hue-rotate(180deg) !important;';
+                    }
+                },
+
+                reverseFilter() {
+                    if (this.supportMode() === 'chrome') {
+                        return '-webkit-filter: url(#dark-mode-reverse-filter) !important; filter: url(#dark-mode-reverse-filter) !important;';
+                    } else if (this.supportMode() === 'safari') {
+                        return '-webkit-filter: invert(0.92) hue-rotate(180deg) !important; filter: invert(0.92) hue-rotate(180deg) !important;';
+                    }
+                },
+
+                noneFilter() {
+                    return '-webkit-filter: none !important; filter: none !important;';
+                },
 
                 addExtraStyle() {
                     try {
@@ -1206,7 +1233,7 @@
                 this.utils.addStyle('dark-mode-style', 'style', `
                 @media screen {
                     html {
-                        ${this.utils.filter}
+                        ${this.utils.defaultFilter()}
                     }
 
                     /* Default Reverse rule */
@@ -1225,7 +1252,7 @@
                     .no-dark-mode,
                     .no-dark-content,
                     .no-dark-before:before {
-                        ${this.utils.reverseFilter}
+                        ${this.utils.reverseFilter()}
                     }
 
                     [style*="background:url"] *,
@@ -1237,7 +1264,7 @@
                     .no-dark-content img,
                     .no-dark-content canvas,
                     .no-dark-content svg image {
-                        ${this.utils.noneFilter}
+                        ${this.utils.noneFilter()}
                     }
 
                     /* Text contrast */
@@ -1253,7 +1280,7 @@
                     :-moz-full-screen *,
                     :fullscreen,
                     :fullscreen * {
-                        ${this.utils.noneFilter}
+                        ${this.utils.noneFilter()}
                     }
 
                     /* Page background */
@@ -1273,7 +1300,7 @@
             },
 
             enableDarkMode() {
-                if (!$A.isChrome()) {
+                if (!this.utils.supportMode()) {
                     return;
                 }
                 if (this.isDarkEnabled()) {

resources/assets/js/store/actions.js

@@ -461,7 +461,7 @@ export default {
                 resolve(false)
                 return;
             }
-            if (!$A.isChrome()) {
+            if (!$A.dark.utils.supportMode()) {
                 if ($A.isEEUiApp) {
                     $A.modalWarning("仅Android设置支持主题功能");
                 } else {