optimize dark mode

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

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');

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 () {
+            isBrowserSupportDarkMode: function () {
-                return browserSupportMatchMedia;
+                return browserSupportDarkMode;
             },
             getBrowserFeatures: function () {
                 return browserFeatures;

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;

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>