From 2e9f93557de8173c6b3bef1fed6430082d63d35f Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Fri, 12 Feb 2021 14:25:26 +0800
Subject: [PATCH] optimize dark mode

---
 src/scripts/controllers/settings-ariang.js   |  2 +-
 src/scripts/core/root.js                     |  4 ++--
 src/scripts/services/ariaNgSettingService.js |  5 ++--
 src/styles/theme/default-dark.css            | 24 ++++++++++++++++++++
 src/views/settings-ariang.html               |  2 +-
 5 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/scripts/controllers/settings-ariang.js b/src/scripts/controllers/settings-ariang.js
index ff447a5..809c816 100644
--- a/src/scripts/controllers/settings-ariang.js
+++ b/src/scripts/controllers/settings-ariang.js
@@ -56,7 +56,7 @@
             sessionSettings: ariaNgSettingService.getAllSessionOptions(),
             rpcSettings: ariaNgSettingService.getAllRpcSettings(),
             isSupportBlob: ariaNgFileService.isSupportBlob(),
-            isSupportMatchMedia: ariaNgSettingService.isBrowserSupportMatchMedia(),
+            isSupportDarkMode: ariaNgSettingService.isBrowserSupportDarkMode(),
             importSettings: null,
             exportSettings: null,
             exportSettingsCopied: false
diff --git a/src/scripts/core/root.js b/src/scripts/core/root.js
index 2445393..2ea7070 100644
--- a/src/scripts/core/root.js
+++ b/src/scripts/core/root.js
@@ -33,7 +33,7 @@
         };
 
         var setThemeBySystemSettings = function () {
-            if (!ariaNgSettingService.isBrowserSupportMatchMedia()) {
+            if (!ariaNgSettingService.isBrowserSupportDarkMode()) {
                 setLightTheme();
                 return;
             }
@@ -451,7 +451,7 @@
             $document.unbind('keypress');
         });
 
-        if (ariaNgSettingService.isBrowserSupportMatchMedia()) {
+        if (ariaNgSettingService.isBrowserSupportDarkMode()) {
             var matchPreferColorScheme = $window.matchMedia('(prefers-color-scheme: dark)');
             matchPreferColorScheme.addEventListener('change', function (e) {
                 ariaNgLogService.info('[root] system switches to ' + (e.matches ? 'dark' : 'light') + ' theme');
diff --git a/src/scripts/services/ariaNgSettingService.js b/src/scripts/services/ariaNgSettingService.js
index b42629c..f12fe25 100644
--- a/src/scripts/services/ariaNgSettingService.js
+++ b/src/scripts/services/ariaNgSettingService.js
@@ -14,6 +14,7 @@
         var browserSupportStorage = browserFeatures.localStroage || browserFeatures.cookies;
         var browserSupportAppCache = !!$window.applicationCache;
         var browserSupportMatchMedia = !!$window.matchMedia;
+        var browserSupportDarkMode = browserSupportMatchMedia && $window.matchMedia('(prefers-color-scheme: dark)') && $window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all';
 
         var onAppCacheUpdatedCallbacks = [];
         var onFirstVisitCallbacks = [];
@@ -236,8 +237,8 @@
             isBrowserSupportApplicationCache: function () {
                 return browserSupportAppCache;
             },
-            isBrowserSupportMatchMedia: function () {
-                return browserSupportMatchMedia;
+            isBrowserSupportDarkMode: function () {
+                return browserSupportDarkMode;
             },
             getBrowserFeatures: function () {
                 return browserFeatures;
diff --git a/src/styles/theme/default-dark.css b/src/styles/theme/default-dark.css
index 0cab125..f33741d 100644
--- a/src/styles/theme/default-dark.css
+++ b/src/styles/theme/default-dark.css
@@ -58,6 +58,10 @@
     border-color: #666;
 }
 
+.theme-dark.skin-aria-ng .progress {
+    background-color: #444;
+}
+
 .theme-dark.skin-aria-ng .nav-tabs-custom {
     background-color: #1a1a1a;
 }
@@ -316,6 +320,22 @@
     background-color: #333;
 }
 
+/* cg-busy */
+.theme-dark.skin-aria-ng .cg-busy-default-sign {
+    color: #eee;
+    border-color: #666;
+    background-color: #444;
+    text-shadow: 0 1px 1px #000;
+}
+
+.theme-dark.skin-aria-ng .cg-busy-default-text {
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng .cg-busy-default-spinner div {
+    background-color: #eee;
+}
+
 /* scrollbar */
 .theme-dark.skin-aria-ng ::-webkit-scrollbar-thumb {
     background-color: #3c4144;
@@ -355,6 +375,10 @@
     background-color: #2a2a2a;
 }
 
+.theme-dark.skin-aria-ng .task-table .progress span.progress-lower {
+    color: #eee;
+}
+
 /* settings-table */
 .theme-dark.skin-aria-ng .settings-table {
     background-color: #1a1a1a;
diff --git a/src/views/settings-ariang.html b/src/views/settings-ariang.html
index 90971e1..44dd556 100644
--- a/src/views/settings-ariang.html
+++ b/src/views/settings-ariang.html
@@ -47,7 +47,7 @@
                                     ng-change="setTheme(context.settings.theme)">
                                 <option value="light" translate>Light</option>
                                 <option value="dark" translate>Dark</option>
-                                <option ng-if="context.isSupportMatchMedia" value="system" translate>Follow system settings</option>
+                                <option ng-if="context.isSupportDarkMode" value="system" translate>Follow system settings</option>
                             </select>
                         </div>
                     </div>