From 5f718894aa2f085ed19063d6918a8ef336a1170c Mon Sep 17 00:00:00 2001 From: MaysWind Date: Thu, 11 Feb 2021 01:05:51 +0800 Subject: [PATCH] support dark theme --- src/index.html | 4 +- src/langs/zh_Hans.txt | 4 + src/langs/zh_Hant.txt | 4 + src/scripts/config/constants.js | 1 + src/scripts/config/defaultLanguage.js | 4 + src/scripts/controllers/settings-ariang.js | 6 + src/scripts/core/root.js | 62 +++ src/scripts/directives/chart.js | 84 +++- src/scripts/services/ariaNgSettingService.js | 11 + src/styles/theme/default-dark.css | 382 +++++++++++++++++++ src/views/settings-ariang.html | 13 + src/views/task-detail.html | 2 +- 12 files changed, 564 insertions(+), 13 deletions(-) create mode 100644 src/styles/theme/default-dark.css diff --git a/src/index.html b/src/index.html index 1aaf28f..1f9e6da 100644 --- a/src/index.html +++ b/src/index.html @@ -43,6 +43,7 @@ + @@ -282,7 +283,8 @@
- diff --git a/src/langs/zh_Hans.txt b/src/langs/zh_Hans.txt index 3b8ea40..04b2aa1 100644 --- 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=预览 diff --git a/src/langs/zh_Hant.txt b/src/langs/zh_Hant.txt index 4990c8b..d7ac63e 100644 --- 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=預覽 diff --git a/src/scripts/config/constants.js b/src/scripts/config/constants.js index 0175d11..a6dd62c 100644 --- 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, diff --git a/src/scripts/config/defaultLanguage.js b/src/scripts/config/defaultLanguage.js index b249ece..ecbd1cf 100644 --- 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', diff --git a/src/scripts/controllers/settings-ariang.js b/src/scripts/controllers/settings-ariang.js index 8fed1d3..b0ea437 100644 --- 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); }; diff --git a/src/scripts/core/root.js b/src/scripts/core/root.js index 0f69031..686aa90 100644 --- 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(); }]); diff --git a/src/scripts/directives/chart.js b/src/scripts/directives/chart.js index 8f4f29a..ceeaed7 100644 --- a/src/scripts/directives/chart.js +++ b/src/scripts/directives/chart.js @@ -6,12 +6,11 @@ restrict: 'E', template: '
', 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 + } + } + }; }); }()); diff --git a/src/scripts/services/ariaNgSettingService.js b/src/scripts/services/ariaNgSettingService.js index d8fb909..3b1eebc 100644 --- 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; }, diff --git a/src/styles/theme/default-dark.css b/src/styles/theme/default-dark.css new file mode 100644 index 0000000..0cab125 --- /dev/null +++ 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; +} diff --git a/src/views/settings-ariang.html b/src/views/settings-ariang.html index b49168e..e4e8b6f 100644 --- a/src/views/settings-ariang.html +++ b/src/views/settings-ariang.html @@ -38,6 +38,19 @@
+
+
+ Theme +
+
+ +
+
Debug Mode diff --git a/src/views/task-detail.html b/src/views/task-detail.html index 51ddb8e..3c79905 100644 --- a/src/views/task-detail.html +++ b/src/views/task-detail.html @@ -160,7 +160,7 @@
- +