support dark theme
This commit is contained in:
MaysWind
parent
2ee8efe40d
commit
5f718894aa
|
|
@ -43,6 +43,7 @@
|
||||||
<link rel="stylesheet" href="styles/controls/chart.css"/>
|
<link rel="stylesheet" href="styles/controls/chart.css"/>
|
||||||
<link rel="stylesheet" href="styles/controls/angular-promise-buttons.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.css">
|
||||||
|
<link rel="stylesheet" href="styles/theme/default-dark.css">
|
||||||
<!-- endbuild -->
|
<!-- endbuild -->
|
||||||
</head>
|
</head>
|
||||||
<body class="hold-transition skin-aria-ng sidebar-mini fixed">
|
<body class="hold-transition skin-aria-ng sidebar-mini fixed">
|
||||||
|
|
@ -282,7 +283,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pull-right ng-cloak" ng-if="globalStatusContext.isEnabled">
|
<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">
|
ng-container="body" ng-placement="top" ng-trigger="click hover" ng-popover-class="global-status-chart">
|
||||||
<span class="realtime-speed">
|
<span class="realtime-speed">
|
||||||
<i class="icon-download fa fa-arrow-down"></i>
|
<i class="icon-download fa fa-arrow-down"></i>
|
||||||
|
|
|
||||||
|
|
@ -147,6 +147,10 @@ Download Completed=下载完成
|
||||||
BT Download Completed=BT 下载完成
|
BT Download Completed=BT 下载完成
|
||||||
Download Error=下载出错
|
Download Error=下载出错
|
||||||
Language=语言
|
Language=语言
|
||||||
|
Theme=主题
|
||||||
|
Light=浅色
|
||||||
|
Dark=深色
|
||||||
|
Follow system settings=跟随系统设置
|
||||||
Debug Mode=调试模式
|
Debug Mode=调试模式
|
||||||
Page Title=页面标题
|
Page Title=页面标题
|
||||||
Preview=预览
|
Preview=预览
|
||||||
|
|
|
||||||
|
|
@ -147,6 +147,10 @@ Download Completed=下載完成
|
||||||
BT Download Completed=BT 下載完成
|
BT Download Completed=BT 下載完成
|
||||||
Download Error=下載出錯
|
Download Error=下載出錯
|
||||||
Language=語言
|
Language=語言
|
||||||
|
Theme=主題
|
||||||
|
Light=淺色
|
||||||
|
Dark=深色
|
||||||
|
Follow system settings=跟隨系统設定
|
||||||
Debug Mode=偵錯模式
|
Debug Mode=偵錯模式
|
||||||
Page Title=頁面標題
|
Page Title=頁面標題
|
||||||
Preview=預覽
|
Preview=預覽
|
||||||
|
|
|
||||||
|
|
@ -23,6 +23,7 @@
|
||||||
cachedDebugLogsLimit: 100
|
cachedDebugLogsLimit: 100
|
||||||
}).constant('ariaNgDefaultOptions', {
|
}).constant('ariaNgDefaultOptions', {
|
||||||
language: 'en',
|
language: 'en',
|
||||||
|
theme: 'light',
|
||||||
title: '${downspeed}, ${upspeed} - ${title}',
|
title: '${downspeed}, ${upspeed} - ${title}',
|
||||||
titleRefreshInterval: 5000,
|
titleRefreshInterval: 5000,
|
||||||
browserNotification: false,
|
browserNotification: false,
|
||||||
|
|
|
||||||
|
|
@ -151,6 +151,10 @@
|
||||||
'BT Download Completed': 'BT Download Completed',
|
'BT Download Completed': 'BT Download Completed',
|
||||||
'Download Error': 'Download Error',
|
'Download Error': 'Download Error',
|
||||||
'Language': 'Language',
|
'Language': 'Language',
|
||||||
|
'Theme': 'Theme',
|
||||||
|
'Light': 'Light',
|
||||||
|
'Dark': 'Dark',
|
||||||
|
'Follow system settings': 'Follow system settings',
|
||||||
'Debug Mode': 'Debug Mode',
|
'Debug Mode': 'Debug Mode',
|
||||||
'Page Title': 'Page Title',
|
'Page Title': 'Page Title',
|
||||||
'Preview': 'Preview',
|
'Preview': 'Preview',
|
||||||
|
|
|
||||||
|
|
@ -56,6 +56,7 @@
|
||||||
sessionSettings: ariaNgSettingService.getAllSessionOptions(),
|
sessionSettings: ariaNgSettingService.getAllSessionOptions(),
|
||||||
rpcSettings: ariaNgSettingService.getAllRpcSettings(),
|
rpcSettings: ariaNgSettingService.getAllRpcSettings(),
|
||||||
isSupportBlob: ariaNgFileService.isSupportBlob(),
|
isSupportBlob: ariaNgFileService.isSupportBlob(),
|
||||||
|
isSupportMatchMedia: ariaNgSettingService.isBrowserSupportMatchMedia(),
|
||||||
importSettings: null,
|
importSettings: null,
|
||||||
exportSettings: null,
|
exportSettings: null,
|
||||||
exportSettingsCopied: false
|
exportSettingsCopied: false
|
||||||
|
|
@ -138,6 +139,11 @@
|
||||||
$scope.updateTitlePreview();
|
$scope.updateTitlePreview();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$scope.setTheme = function (value) {
|
||||||
|
ariaNgSettingService.setTheme(value);
|
||||||
|
$rootScope.setTheme(value);
|
||||||
|
};
|
||||||
|
|
||||||
$scope.setDebugMode = function (value) {
|
$scope.setDebugMode = function (value) {
|
||||||
ariaNgSettingService.setDebugMode(value);
|
ariaNgSettingService.setDebugMode(value);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,42 @@
|
||||||
return false;
|
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 initCheck = function () {
|
||||||
var browserFeatures = ariaNgSettingService.getBrowserFeatures();
|
var browserFeatures = ariaNgSettingService.getBrowserFeatures();
|
||||||
|
|
||||||
|
|
@ -90,6 +126,8 @@
|
||||||
return angular.element('body').hasClass('sidebar-open');
|
return angular.element('body').hasClass('sidebar-open');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$rootScope.currentTheme = 'light';
|
||||||
|
|
||||||
$rootScope.searchContext = {
|
$rootScope.searchContext = {
|
||||||
text: ''
|
text: ''
|
||||||
};
|
};
|
||||||
|
|
@ -328,6 +366,16 @@
|
||||||
$window.location.reload();
|
$window.location.reload();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
$rootScope.setTheme = function (theme) {
|
||||||
|
if (theme === 'system') {
|
||||||
|
setThemeBySystemSettings();
|
||||||
|
} else if (theme === 'dark') {
|
||||||
|
setDarkTheme();
|
||||||
|
} else {
|
||||||
|
setLightTheme();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
ariaNgSettingService.onApplicationCacheUpdated(function () {
|
ariaNgSettingService.onApplicationCacheUpdated(function () {
|
||||||
ariaNgLocalizationService.notifyInPage('', 'Application cache has been updated, please reload the page for the changes to take effect.', {
|
ariaNgLocalizationService.notifyInPage('', 'Application cache has been updated, please reload the page for the changes to take effect.', {
|
||||||
delay: false,
|
delay: false,
|
||||||
|
|
@ -402,6 +450,20 @@
|
||||||
$document.unbind('keypress');
|
$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();
|
initCheck();
|
||||||
initNavbar();
|
initNavbar();
|
||||||
}]);
|
}]);
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,11 @@
|
||||||
restrict: 'E',
|
restrict: 'E',
|
||||||
template: '<div></div>',
|
template: '<div></div>',
|
||||||
scope: {
|
scope: {
|
||||||
options: '=ngData'
|
options: '=ngData',
|
||||||
|
theme: '=ngTheme'
|
||||||
},
|
},
|
||||||
link: function (scope, element, attrs) {
|
link: function (scope, element, attrs) {
|
||||||
var options = {
|
var options = {};
|
||||||
ngTheme: 'default'
|
|
||||||
};
|
|
||||||
|
|
||||||
angular.extend(options, attrs);
|
angular.extend(options, attrs);
|
||||||
|
|
||||||
|
|
@ -22,7 +21,7 @@
|
||||||
var height = parseInt(attrs.height) || parentHeight || 200;
|
var height = parseInt(attrs.height) || parentHeight || 200;
|
||||||
wrapper.css('height', height + 'px');
|
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) {
|
var setOptions = function (value) {
|
||||||
chart.setOption(value);
|
chart.setOption(value);
|
||||||
|
|
@ -50,11 +49,11 @@
|
||||||
return {
|
return {
|
||||||
restrict: 'A',
|
restrict: 'A',
|
||||||
scope: {
|
scope: {
|
||||||
options: '=ngData'
|
options: '=ngData',
|
||||||
|
theme: '=ngTheme'
|
||||||
},
|
},
|
||||||
link: function (scope, element, attrs) {
|
link: function (scope, element, attrs) {
|
||||||
var options = {
|
var options = {
|
||||||
ngTheme: 'default',
|
|
||||||
ngPopoverClass: '',
|
ngPopoverClass: '',
|
||||||
ngContainer: 'body',
|
ngContainer: 'body',
|
||||||
ngTrigger: 'click',
|
ngTrigger: 'click',
|
||||||
|
|
@ -83,7 +82,7 @@
|
||||||
var height = parseInt(attrs.height) || parentHeight || 200;
|
var height = parseInt(attrs.height) || parentHeight || 200;
|
||||||
wrapper.css('height', height + 'px');
|
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 () {
|
}).on('hide.bs.popover', function () {
|
||||||
if (chart && !chart.isDisposed()) {
|
if (chart && !chart.isDisposed()) {
|
||||||
chart.dispose();
|
chart.dispose();
|
||||||
|
|
@ -105,14 +104,19 @@
|
||||||
}, true);
|
}, true);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}]).factory('chartTheme', ['chartDefaultTheme', function (chartDefaultTheme) {
|
}]).factory('chartTheme', ['chartDefaultTheme', 'chartDarkTheme', function (chartDefaultTheme, chartDarkTheme) {
|
||||||
var themes = {
|
var themes = {
|
||||||
defaultTheme: chartDefaultTheme
|
defaultTheme: chartDefaultTheme,
|
||||||
|
darkTheme: chartDarkTheme,
|
||||||
};
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
get: function (name) {
|
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 () {
|
}]).factory('chartDefaultTheme', function () {
|
||||||
|
|
@ -196,5 +200,63 @@
|
||||||
},
|
},
|
||||||
animationDuration: 500
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
});
|
});
|
||||||
}());
|
}());
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,7 @@
|
||||||
})();
|
})();
|
||||||
var browserSupportStorage = browserFeatures.localStroage || browserFeatures.cookies;
|
var browserSupportStorage = browserFeatures.localStroage || browserFeatures.cookies;
|
||||||
var browserSupportAppCache = !!$window.applicationCache;
|
var browserSupportAppCache = !!$window.applicationCache;
|
||||||
|
var browserSupportMatchMedia = !!$window.matchMedia;
|
||||||
|
|
||||||
var onAppCacheUpdatedCallbacks = [];
|
var onAppCacheUpdatedCallbacks = [];
|
||||||
var onFirstVisitCallbacks = [];
|
var onFirstVisitCallbacks = [];
|
||||||
|
|
@ -232,6 +233,9 @@
|
||||||
isBrowserSupportApplicationCache: function () {
|
isBrowserSupportApplicationCache: function () {
|
||||||
return browserSupportAppCache;
|
return browserSupportAppCache;
|
||||||
},
|
},
|
||||||
|
isBrowserSupportMatchMedia: function () {
|
||||||
|
return browserSupportMatchMedia;
|
||||||
|
},
|
||||||
getBrowserFeatures: function () {
|
getBrowserFeatures: function () {
|
||||||
return browserFeatures;
|
return browserFeatures;
|
||||||
},
|
},
|
||||||
|
|
@ -343,6 +347,13 @@
|
||||||
setOption('language', value);
|
setOption('language', value);
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
|
getTheme: function () {
|
||||||
|
return getOption('theme');
|
||||||
|
},
|
||||||
|
setTheme: function (value) {
|
||||||
|
setOption('theme', value);
|
||||||
|
return true;
|
||||||
|
},
|
||||||
isEnableDebugMode: function () {
|
isEnableDebugMode: function () {
|
||||||
return sessionSettings.debugMode;
|
return sessionSettings.debugMode;
|
||||||
},
|
},
|
||||||
|
|
|
||||||
382
src/styles/theme/default-dark.css
Normal file
382
src/styles/theme/default-dark.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -38,6 +38,19 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</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="row" ng-if="context.showDebugMode">
|
||||||
<div class="setting-key setting-key-without-desc col-sm-4">
|
<div class="setting-key setting-key-without-desc col-sm-4">
|
||||||
<span translate>Debug Mode</span>
|
<span translate>Debug Mode</span>
|
||||||
|
|
|
||||||
|
|
@ -160,7 +160,7 @@
|
||||||
<div class="row no-hover no-background" ng-if="context.isEnableSpeedChart && task && task.status === 'active'">
|
<div class="row no-hover no-background" ng-if="context.isEnableSpeedChart && task && task.status === 'active'">
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<div class="task-status-chart-wrapper">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Reference in a new issue