support dark theme

2021-02-11 01:05:51 +08:00 · 2021-02-11 01:05:51 +08:00 · 5f718894aa
parent 2ee8efe40d
commit 5f718894aa
12 changed files with 564 additions and 13 deletions
--- a/src/index.html
+++ b/src/index.html
@ -43,6 +43,7 @@
    <link rel="stylesheet" href="styles/controls/chart.css"/>
    <link rel="stylesheet" href="styles/controls/angular-promise-buttons.css"/>
    <link rel="stylesheet" href="styles/theme/default.css">
+    <link rel="stylesheet" href="styles/theme/default-dark.css">
    <!-- endbuild -->
 </head>
 <body class="hold-transition skin-aria-ng sidebar-mini fixed">
@ -282,7 +283,8 @@
            </div>

            <div class="pull-right ng-cloak" ng-if="globalStatusContext.isEnabled">
-                <a class="global-status" title="{{('Click to pin' | translate)}}" ng-pop-chart ng-data="globalStatusContext.data"
+                <a class="global-status" title="{{('Click to pin' | translate)}}"
+                   ng-pop-chart ng-data="globalStatusContext.data" ng-theme="currentTheme"
                   ng-container="body" ng-placement="top" ng-trigger="click hover" ng-popover-class="global-status-chart">
                <span class="realtime-speed">
                    <i class="icon-download fa fa-arrow-down"></i>
--- a/src/langs/zh_Hans.txt
+++ b/src/langs/zh_Hans.txt
@ -147,6 +147,10 @@ Download Completed=下载完成
 BT Download Completed=BT 下载完成
 Download Error=下载出错
 Language=语言
+Theme=主题
+Light=浅色
+Dark=深色
+Follow system settings=跟随系统设置
 Debug Mode=调试模式
 Page Title=页面标题
 Preview=预览
--- a/src/langs/zh_Hant.txt
+++ b/src/langs/zh_Hant.txt
@ -147,6 +147,10 @@ Download Completed=下載完成
 BT Download Completed=BT 下載完成
 Download Error=下載出錯
 Language=語言
+Theme=主題
+Light=淺色
+Dark=深色
+Follow system settings=跟隨系统設定
 Debug Mode=偵錯模式
 Page Title=頁面標題
 Preview=預覽
--- a/src/scripts/config/constants.js
+++ b/src/scripts/config/constants.js
@ -23,6 +23,7 @@
        cachedDebugLogsLimit: 100
    }).constant('ariaNgDefaultOptions', {
        language: 'en',
+        theme: 'light',
        title: '${downspeed}, ${upspeed} - ${title}',
        titleRefreshInterval: 5000,
        browserNotification: false,
--- a/src/scripts/config/defaultLanguage.js
+++ b/src/scripts/config/defaultLanguage.js
@ -151,6 +151,10 @@
            'BT Download Completed': 'BT Download Completed',
            'Download Error': 'Download Error',
            'Language': 'Language',
+            'Theme': 'Theme',
+            'Light': 'Light',
+            'Dark': 'Dark',
+            'Follow system settings': 'Follow system settings',
            'Debug Mode': 'Debug Mode',
            'Page Title': 'Page Title',
            'Preview': 'Preview',
--- a/src/scripts/controllers/settings-ariang.js
+++ b/src/scripts/controllers/settings-ariang.js
@ -56,6 +56,7 @@
            sessionSettings: ariaNgSettingService.getAllSessionOptions(),
            rpcSettings: ariaNgSettingService.getAllRpcSettings(),
            isSupportBlob: ariaNgFileService.isSupportBlob(),
+            isSupportMatchMedia: ariaNgSettingService.isBrowserSupportMatchMedia(),
            importSettings: null,
            exportSettings: null,
            exportSettingsCopied: false
@ -138,6 +139,11 @@
            $scope.updateTitlePreview();
        };

+        $scope.setTheme = function (value) {
+            ariaNgSettingService.setTheme(value);
+            $rootScope.setTheme(value);
+        };
+
        $scope.setDebugMode = function (value) {
            ariaNgSettingService.setDebugMode(value);
        };
--- a/src/scripts/core/root.js
+++ b/src/scripts/core/root.js
@ -22,6 +22,42 @@
            return false;
        };

+        var setLightTheme = function () {
+            $rootScope.currentTheme = 'light';
+            angular.element('body').removeClass('theme-dark');
+        };
+
+        var setDarkTheme = function () {
+            $rootScope.currentTheme = 'dark';
+            angular.element('body').addClass('theme-dark');
+        };
+
+        var setThemeBySystemSettings = function () {
+            if (!ariaNgSettingService.isBrowserSupportMatchMedia()) {
+                setLightTheme();
+                return;
+            }
+
+            var matchPreferColorScheme = $window.matchMedia('(prefers-color-scheme: dark)');
+
+            ariaNgLogService.info(matchPreferColorScheme)
+            if (matchPreferColorScheme.matches) {
+                setDarkTheme();
+            } else {
+                setLightTheme();
+            }
+        };
+
+        var initTheme = function () {
+            if (ariaNgSettingService.getTheme() === 'system') {
+                setThemeBySystemSettings();
+            } else if (ariaNgSettingService.getTheme() === 'dark') {
+                setDarkTheme();
+            } else {
+                setLightTheme();
+            }
+        };
+
        var initCheck = function () {
            var browserFeatures = ariaNgSettingService.getBrowserFeatures();

@ -90,6 +126,8 @@
            return angular.element('body').hasClass('sidebar-open');
        };

+        $rootScope.currentTheme = 'light';
+
        $rootScope.searchContext = {
            text: ''
        };
@ -328,6 +366,16 @@
            $window.location.reload();
        };

+        $rootScope.setTheme = function (theme) {
+            if (theme === 'system') {
+                setThemeBySystemSettings();
+            } else if (theme === 'dark') {
+                setDarkTheme();
+            } else {
+                setLightTheme();
+            }
+        };
+
        ariaNgSettingService.onApplicationCacheUpdated(function () {
            ariaNgLocalizationService.notifyInPage('', 'Application cache has been updated, please reload the page for the changes to take effect.', {
                delay: false,
@ -402,6 +450,20 @@
            $document.unbind('keypress');
        });

+        if (ariaNgSettingService.isBrowserSupportMatchMedia()) {
+            var matchPreferColorScheme = $window.matchMedia('(prefers-color-scheme: dark)');
+            matchPreferColorScheme.addEventListener('change', function (e) {
+                if (ariaNgSettingService.getTheme() === 'system') {
+                    if (e.matches) {
+                        setDarkTheme();
+                    } else {
+                        setLightTheme();
+                    }
+                }
+            });
+        }
+
+        initTheme();
        initCheck();
        initNavbar();
    }]);
--- a/src/scripts/directives/chart.js
+++ b/src/scripts/directives/chart.js
@ -6,12 +6,11 @@
            restrict: 'E',
            template: '<div></div>',
            scope: {
-                options: '=ngData'
+                options: '=ngData',
+                theme: '=ngTheme'
            },
            link: function (scope, element, attrs) {
-                var options = {
-                    ngTheme: 'default'
-                };
+                var options = {};

                angular.extend(options, attrs);

@ -22,7 +21,7 @@
                var height = parseInt(attrs.height) || parentHeight || 200;
                wrapper.css('height', height + 'px');

-                var chart = echarts.init(wrapper[0], chartTheme.get(options.ngTheme));
+                var chart = echarts.init(wrapper[0], chartTheme.get(scope.theme));

                var setOptions = function (value) {
                    chart.setOption(value);
@ -50,11 +49,11 @@
        return {
            restrict: 'A',
            scope: {
-                options: '=ngData'
+                options: '=ngData',
+                theme: '=ngTheme'
            },
            link: function (scope, element, attrs) {
                var options = {
-                    ngTheme: 'default',
                    ngPopoverClass: '',
                    ngContainer: 'body',
                    ngTrigger: 'click',
@ -83,7 +82,7 @@
                    var height = parseInt(attrs.height) || parentHeight || 200;
                    wrapper.css('height', height + 'px');

-                    chart = echarts.init(wrapper[0], chartTheme.get(options.ngTheme));
+                    chart = echarts.init(wrapper[0], chartTheme.get(scope.theme));
                }).on('hide.bs.popover', function () {
                    if (chart && !chart.isDisposed()) {
                        chart.dispose();
@ -105,14 +104,19 @@
                }, true);
            }
        };
-    }]).factory('chartTheme', ['chartDefaultTheme', function (chartDefaultTheme) {
+    }]).factory('chartTheme', ['chartDefaultTheme', 'chartDarkTheme', function (chartDefaultTheme, chartDarkTheme) {
        var themes = {
-            defaultTheme: chartDefaultTheme
+            defaultTheme: chartDefaultTheme,
+            darkTheme: chartDarkTheme,
        };

        return {
            get: function (name) {
-                return themes[name + 'Theme'] ? themes[name + 'Theme'] : {};
+                if (name !== 'default' && themes[name + 'Theme']) {
+                    return angular.extend({}, themes.defaultTheme, themes[name + 'Theme']);
+                } else {
+                    return themes.defaultTheme;
+                }
            }
        };
    }]).factory('chartDefaultTheme', function () {
@ -196,5 +200,63 @@
            },
            animationDuration: 500
        };
+    }).factory('chartDarkTheme', function () {
+        return {
+            tooltip: {
+                show: true,
+                trigger: 'axis',
+                backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                axisPointer: {
+                    type: 'line',
+                    lineStyle: {
+                        color: '#ddd',
+                        type: 'dashed',
+                        width: 1
+                    },
+                    crossStyle: {
+                        color: '#ddd',
+                        width: 1
+                    },
+                    shadowStyle: {
+                        color: 'rgba(200,200,200,0.2)'
+                    }
+                }
+            },
+            categoryAxis: {
+                axisLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: '#333'
+                    }
+                }
+            },
+            valueAxis: {
+                axisLine: {
+                    show: false
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLabel: {
+                    show: true,
+                    textStyle: {
+                        color: '#eee',
+                    }
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: '#333'
+                    }
+                },
+                splitArea: {
+                    show: false
+                }
+            }
+        };
    });
 }());
--- a/src/scripts/services/ariaNgSettingService.js
+++ b/src/scripts/services/ariaNgSettingService.js
@ -13,6 +13,7 @@
        })();
        var browserSupportStorage = browserFeatures.localStroage || browserFeatures.cookies;
        var browserSupportAppCache = !!$window.applicationCache;
+        var browserSupportMatchMedia = !!$window.matchMedia;

        var onAppCacheUpdatedCallbacks = [];
        var onFirstVisitCallbacks = [];
@ -232,6 +233,9 @@
            isBrowserSupportApplicationCache: function () {
                return browserSupportAppCache;
            },
+            isBrowserSupportMatchMedia: function () {
+                return browserSupportMatchMedia;
+            },
            getBrowserFeatures: function () {
                return browserFeatures;
            },
@ -343,6 +347,13 @@
                setOption('language', value);
                return true;
            },
+            getTheme: function () {
+                return getOption('theme');
+            },
+            setTheme: function (value) {
+                setOption('theme', value);
+                return true;
+            },
            isEnableDebugMode: function () {
                return sessionSettings.debugMode;
            },
--- a/src/styles/theme/default-dark.css
+++ b/src/styles/theme/default-dark.css
@ -0,0 +1,382 @@
+/* skin-aria-ng core */
+.theme-dark.skin-aria-ng {
+    color: #eee;
+    background-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .cg-busy-backdrop {
+    background-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .btn-default {
+    color: #eee;
+    border-color: #3f3f3f;
+    background-color: #333;
+}
+
+.theme-dark.skin-aria-ng .btn-default:hover,
+.theme-dark.skin-aria-ng .btn-default:active,
+.theme-dark.skin-aria-ng .btn-default.hover {
+    color: #fff;
+    background-color: #444;
+}
+
+.theme-dark.skin-aria-ng .close {
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng pre {
+    background-color: #121212;
+    border-color: #666;
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng .form-control {
+    background-color: #121212;
+    border-color: #666;
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng .form-control:focus {
+    border-color: #5399e8;
+}
+
+.theme-dark.skin-aria-ng .form-control[disabled],
+.theme-dark.skin-aria-ng .form-control[readonly],
+.theme-dark.skin-aria-ng fieldset[disabled] .form-control {
+    background-color: #333;
+}
+
+.theme-dark.skin-aria-ng .input-group-addon {
+    color: #eee;
+    border-color: #666;
+    background-color: #333;
+}
+
+.theme-dark.skin-aria-ng .input-group.input-group-multiple > .input-group-addon:first-child,
+.theme-dark.skin-aria-ng .input-group.input-group-multiple > .input-group-addon-container:first-child {
+    border-color: #666;
+}
+
+.theme-dark.skin-aria-ng .nav-tabs-custom {
+    background-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .nav-tabs-custom > .nav-tabs {
+    border-color: #333;
+}
+
+.theme-dark.skin-aria-ng .nav-tabs-custom > .nav-tabs > li > a {
+    color: #ddd;
+}
+
+.theme-dark.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.active > a,
+.theme-dark.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.active:hover > a {
+    background-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.divider {
+    border-color: #666;
+}
+
+.theme-dark.skin-aria-ng .nav-tabs-custom>.tab-content {
+    background-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .popover {
+    background-color: #1a1a1a;
+    border-color: rgba(0, 0, 0, 0.6);
+}
+
+.theme-dark.skin-aria-ng .popover.top .arrow:after {
+    border-top-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .popover.right .arrow:after {
+    border-right-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .popover.bottom .arrow:after {
+    border-bottom-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .popover.left .arrow:after {
+    border-left-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .modal-header {
+    border-color: #333;
+}
+
+.theme-dark.skin-aria-ng .modal-content {
+    background-color: #1a1a1a;
+    border-color: rgba(0, 0, 0, 0.6);
+}
+
+.theme-dark.skin-aria-ng .modal-footer {
+    border-color: #333;
+}
+
+.theme-dark.skin-aria-ng .dropdown-menu {
+    background-color: #1a1a1a;
+    border-color: #333;
+}
+
+.theme-dark.skin-aria-ng .dropdown-menu > li > a {
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng .dropdown-menu > li > a:hover {
+    color: #fff;
+    background-color: #333;
+}
+
+.theme-dark.skin-aria-ng .dropdown-menu > li.dropdown-submenu:hover {
+    background-color: #333;
+}
+
+.theme-dark.skin-aria-ng .dropdown-menu > .divider {
+    background-color: #666;
+}
+
+.theme-dark.skin-aria-ng .sweet-overlay {
+    background-color: rgba(0, 0, 0, 0.6);
+}
+
+.theme-dark.skin-aria-ng .sweet-alert {
+    background-color: #222;
+}
+
+.theme-dark.skin-aria-ng .sweet-alert h2,
+.theme-dark.skin-aria-ng .sweet-alert p {
+    color: #ddd;
+}
+
+.theme-dark.skin-aria-ng .sweet-alert .sa-icon.sa-success::before,
+.theme-dark.skin-aria-ng .sweet-alert .sa-icon.sa-success::after,
+.theme-dark.skin-aria-ng .sweet-alert .sa-icon.sa-success .sa-fix {
+    background-color: #222;
+}
+
+.theme-dark.skin-aria-ng .main-header .navbar {
+    background-color: #121212;
+    border-color: #333;
+}
+
+.theme-dark.skin-aria-ng .main-header .navbar .nav > li > a {
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng .main-header .navbar .nav > li > a:hover,
+.theme-dark.skin-aria-ng .main-header .navbar .nav > li > a:active,
+.theme-dark.skin-aria-ng .main-header .navbar .nav > li > a:focus,
+.theme-dark.skin-aria-ng .main-header .navbar .nav .open > a,
+.theme-dark.skin-aria-ng .main-header .navbar .nav .open > a:hover,
+.theme-dark.skin-aria-ng .main-header .navbar .nav .open > a:focus,
+.theme-dark.skin-aria-ng .main-header .navbar .nav > .active > a {
+    color: #0080ff;
+    background-color: transparent;
+}
+
+.theme-dark.skin-aria-ng .main-header .navbar .nav > li > a:active,
+.theme-dark.skin-aria-ng .main-header .navbar .nav .open > a,
+.theme-dark.skin-aria-ng .main-header .navbar .nav .open > a:hover,
+.theme-dark.skin-aria-ng .main-header .navbar .nav .open > a:focus {
+    background-color: #444;
+}
+
+.theme-dark.skin-aria-ng .main-header .navbar .nav > li.disabled > a {
+    color: #8f8f8f !important;
+}
+
+.theme-dark.skin-aria-ng .main-header .navbar .nav > li.divider {
+    border-color: #666;
+}
+
+.theme-dark.skin-aria-ng .main-header .logo {
+    background-color: #282828;
+    border-color: #222;
+}
+
+.theme-dark.skin-aria-ng .main-header .logo .dropdown-menu > li.active > a {
+    color: #eee;
+    background-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .main-header .logo .dropdown-menu > li.active:hover > a {
+    color: #fff;
+    background-color: #333;
+}
+
+.theme-dark.skin-aria-ng .wrapper,
+.theme-dark.skin-aria-ng .main-sidebar,
+.theme-dark.skin-aria-ng .left-side {
+    background-color: #282828;
+}
+
+.theme-dark.skin-aria-ng .sidebar-menu > li.header {
+    color: #ccc;
+    background-color: #3c3c3c;
+}
+
+.theme-dark.skin-aria-ng .sidebar-menu > li:hover > a {
+    color: #fff;
+    background-color: #444;
+}
+
+.theme-dark.skin-aria-ng .sidebar-menu > li.active > a {
+    color: #5399e8;
+    background-color: #333;
+}
+
+.theme-dark.skin-aria-ng .sidebar-menu > li.treeview:hover > a {
+    color: #fff;
+    background-color: #282828;
+}
+
+.theme-dark.skin-aria-ng .sidebar-menu > li.treeview.active > a,
+.theme-dark.skin-aria-ng .sidebar-menu > li.treeview.active:hover > a {
+    color: #5399e8;
+    background-color: #282828;
+}
+
+.theme-dark.skin-aria-ng .sidebar-menu > li.treeview > a:hover {
+    color: #fff;
+    background-color: #444;
+}
+
+.theme-dark.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu {
+    background-color: #282828;
+}
+
+.theme-dark.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a {
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a:hover {
+    color: #fff;
+    background-color: #444;
+}
+
+.theme-dark.skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li.active > a {
+    color: #5399e8;
+    background-color: #333;
+}
+
+.theme-dark.skin-aria-ng .sidebar a {
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng .content-wrapper, .theme-dark.right-side {
+    background-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .main-footer {
+    background-color: #1a1a1a;
+    border-color: #383838;
+}
+
+.theme-dark.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a {
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a:hover,
+.theme-dark.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a:active,
+.theme-dark.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li > a:focus,
+.theme-dark.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li.open > a {
+    color: #0080ff;
+    background: none;
+}
+
+.theme-dark.skin-aria-ng .main-footer > .navbar > .navbar-toolbar > .nav > li.divider {
+    border-color: #666;
+}
+
+.theme-dark.skin-aria-ng .global-status {
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng input::-webkit-input-placeholder,
+.theme-dark.skin-aria-ng input:-moz-placeholder,
+.theme-dark.skin-aria-ng input::-moz-placeholder,
+.theme-dark.skin-aria-ng input:-ms-input-placeholder {
+    color: #aaa;
+}
+
+.theme-dark.skin-aria-ng select.placeholder {
+    color: #aaa;
+}
+
+/* angular-input-dropdown */
+.theme-dark.skin-aria-ng .input-dropdown ul > li {
+    background-color: #121212;
+}
+
+.theme-dark.skin-aria-ng .input-dropdown ul > li.active {
+    background-color: #333;
+}
+
+/* scrollbar */
+.theme-dark.skin-aria-ng ::-webkit-scrollbar-thumb {
+    background-color: #3c4144;
+}
+
+/* piece-bar / piece-map */
+.theme-dark.skin-aria-ng .piece-map .piece,
+.theme-dark.skin-aria-ng .piece-legend > .piece {
+    background-color: #242424;
+    border-color: #3c3d3e;
+}
+
+.theme-dark.skin-aria-ng .piece-map .piece.piece-completed,
+.theme-dark.skin-aria-ng .piece-legend > .piece.piece-completed {
+    background-color: #b8dd69;
+    border-color: #b8dd69;
+}
+
+/* task-table */
+.theme-dark.skin-aria-ng .task-table {
+    background-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .task-table .task-table-title a {
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng .task-table > .task-table-body > div.row {
+    border-color: #333;
+}
+
+.theme-dark.skin-aria-ng .task-table > .task-table-body > div.row:nth-of-type(odd) {
+    background-color: #262626;
+}
+
+.theme-dark.skin-aria-ng .task-table > .task-table-body > div.row:hover {
+    background-color: #2a2a2a;
+}
+
+/* settings-table */
+.theme-dark.skin-aria-ng .settings-table {
+    background-color: #1a1a1a;
+}
+
+.theme-dark.skin-aria-ng .settings-table > div.row {
+    border-color: #333;
+}
+
+.theme-dark.skin-aria-ng .settings-table.striped > div.row:nth-of-type(odd) {
+    background-color: #202020;
+}
+
+.theme-dark.skin-aria-ng .settings-table.hoverable > div.row:hover {
+    background-color: #242424;
+}
+
+.theme-dark.skin-aria-ng .settings-table.hoverable > div.row:nth-of-type(odd).no-hover:hover {
+    background-color: #202020;
+}
+
+/* new-task-table */
+.theme-dark.skin-aria-ng .new-task-table {
+    background-color: #1a1a1a;
+}
--- a/src/views/settings-ariang.html
+++ b/src/views/settings-ariang.html
@ -38,6 +38,19 @@
                            </select>
                        </div>
                    </div>
+                    <div class="row">
+                        <div class="setting-key setting-key-without-desc col-sm-4">
+                            <span translate>Theme</span>
+                        </div>
+                        <div class="setting-value col-sm-8">
+                            <select class="form-control" style="width: 100%;" ng-model="context.settings.theme"
+                                    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>
+                            </select>
+                        </div>
+                    </div>
                    <div class="row" ng-if="context.showDebugMode">
                        <div class="setting-key setting-key-without-desc col-sm-4">
                            <span translate>Debug Mode</span>
--- a/src/views/task-detail.html
+++ b/src/views/task-detail.html
@ -160,7 +160,7 @@
                    <div class="row no-hover no-background" ng-if="context.isEnableSpeedChart && task && task.status === 'active'">
                        <div class="col-sm-12">
                            <div class="task-status-chart-wrapper">
-                                <ng-chart ng-data="context.statusData" height="200"></ng-chart>
+                                <ng-chart ng-data="context.statusData" ng-theme="currentTheme" height="200"></ng-chart>
                            </div>
                        </div>
                    </div>