simon
/
AriaNg
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

support dark theme

master
MaysWind 2021-02-11 01:05:51 +08:00
parent 2ee8efe40d
commit 5f718894aa
12 changed files with 564 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.html
View File

@ -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>

4
src/langs/zh_Hans.txt
View File

@ -147,6 +147,10 @@ Download Completed=下载完成
BT Download Completed=BT 下载完成
Download Error=下载出错
Language=语言
Theme=主题
Light=浅色
Dark=深色
Follow system settings=跟随系统设置
Debug Mode=调试模式
Page Title=页面标题
Preview=预览

4
src/langs/zh_Hant.txt
View File

@ -147,6 +147,10 @@ Download Completed=下載完成
BT Download Completed=BT 下載完成
Download Error=下載出錯
Language=語言
Theme=主題
Light=淺色
Dark=深色
Follow system settings=跟隨系统設定
Debug Mode=偵錯模式
Page Title=頁面標題
Preview=預覽

1
src/scripts/config/constants.js
View File

@ -23,6 +23,7 @@
cachedDebugLogsLimit: 100
}).constant('ariaNgDefaultOptions', {
language: 'en',
theme: 'light',
title: '${downspeed}, ${upspeed} - ${title}',
titleRefreshInterval: 5000,
browserNotification: false,

4
src/scripts/config/defaultLanguage.js
View File

@ -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',

6
src/scripts/controllers/settings-ariang.js
View File

@ -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);
};

62
src/scripts/core/root.js
View File

@ -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();
}]);

84
src/scripts/directives/chart.js
View File

@ -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
}
}
};
});
}());

11
src/scripts/services/ariaNgSettingService.js
View File

@ -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;
},

382
src/styles/theme/default-dark.css Normal file
View File

@ -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;
}

13
src/views/settings-ariang.html
View File

@ -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>

2
src/views/task-detail.html
View File

@ -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>