Add more options

.circleci/config.yml

@@ -2,7 +2,7 @@ version: 2
 
 defaults: &defaults
   docker:
-    - image: circleci/node:6.14-browsers
+    - image: circleci/node:10.23-browsers
   working_directory: ~/AriaNg
 
 jobs:

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-2020 MaysWind (i@mayswind.net)
+Copyright (c) 2016-2021 MaysWind (i@mayswind.net)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -19,12 +19,13 @@ AriaNg is a modern web frontend making [aria2](https://github.com/aria2/aria2) e
     * Tree view for multi-directory task
     * Download / upload speed chart for aria2 or single task
     * Full support for aria2 settings
-4. Url command line api support
-5. Download finished notification
-6. Multi-languages support
-7. Multi aria2 RPC host support
-8. Exporting and Importing settings support
-9. Less bandwidth usage, only requesting incremental data
+4. Dark theme
+5. Url command line api support
+6. Download finished notification
+7. Multi-languages support
+8. Multi aria2 RPC host support
+9. Exporting and Importing settings support
+10. Less bandwidth usage, only requesting incremental data
 
 ## Screenshots
 #### Desktop

default.nix

@@ -1,6 +1,6 @@
 { pkgs ? import <nixpkgs> { } }:
 let
-  nodeDependencies = (pkgs.callPackage ./AriaNg.nix { inherit pkgs; }).shell.nodeDependencies;
+  nodeDependencies = (pkgs.callPackage ./build-dependencies.nix { inherit pkgs; }).shell.nodeDependencies;
 in
 pkgs.stdenvNoCC.mkDerivation rec {
   pname = "AriaNg";

gulpfile.js

@@ -48,7 +48,7 @@ gulp.task('process-langs', ['prepare-langs'], function () {
 gulp.task('prepare-styles', function () {
     return gulp.src([
         'src/styles/**/*.css'
-    ]).pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
+    ]).pipe($.autoprefixer())
         .pipe(gulp.dest('.tmp/styles'))
         .pipe(reload({stream: true}));
 });

package.json

@@ -4,55 +4,54 @@
     "node": ">=6"
   },
   "dependencies": {
-    "natives": "^1.1.6",
-    "jquery": "3.4.1",
-    "bootstrap": "3.4.1",
-    "moment": "2.24.0",
-    "moment-timezone": "0.5.28",
-    "echarts": "3.8.5",
-    "font-awesome": "^4.7.0",
     "admin-lte": "2.4.18",
-    "sweetalert": "^1.1.3",
-    "awesome-bootstrap-checkbox": "^0.3.7",
-    "jquery-slimscroll": "^1.3.8",
-    "bootstrap-contextmenu": "^1.0.0",
-    "natural-compare": "1.4.0",
     "angular": "1.6.10",
-    "angular-route": "1.6.10",
-    "angular-sanitize": "1.6.10",
-    "angular-touch": "1.6.10",
-    "angular-messages": "1.6.10",
-    "angular-cookies": "1.6.10",
     "angular-animate": "1.6.10",
-    "angular-translate": "^2.18.2",
-    "angular-moment": "1.3.0",
-    "angular-websocket": "^2.0.1",
-    "angular-local-storage": "^0.7.1",
-    "angular-ui-notification": "^0.3.6",
     "angular-bittorrent-peerid": "^1.3.2",
     "angular-busy": "^4.1.4",
-    "angular-promise-buttons": "^0.1.23",
-    "angular-sweetalert": "^1.1.2",
-    "angular-utf8-base64": "^0.0.5",
     "angular-clipboard": "^1.7.0",
+    "angular-cookies": "1.6.10",
     "angular-input-dropdown": "git://github.com/mayswind/angular-input-dropdown.git#68670e39816698b3eb98c0e740a0efe77d5fbdd1",
-    "angularjs-dragula": "^2.0.0"
+    "angular-local-storage": "^0.7.1",
+    "angular-messages": "1.6.10",
+    "angular-moment": "1.3.0",
+    "angular-promise-buttons": "^0.1.23",
+    "angular-route": "1.6.10",
+    "angular-sanitize": "1.6.10",
+    "angular-sweetalert": "^1.1.2",
+    "angular-touch": "1.6.10",
+    "angular-translate": "^2.18.4",
+    "angular-ui-notification": "^0.3.6",
+    "angular-utf8-base64": "^0.0.5",
+    "angular-websocket": "^2.0.1",
+    "angularjs-dragula": "^2.0.0",
+    "awesome-bootstrap-checkbox": "^0.3.7",
+    "bootstrap": "3.4.1",
+    "bootstrap-contextmenu": "^1.0.0",
+    "echarts": "3.8.5",
+    "font-awesome": "^4.7.0",
+    "jquery": "3.4.1",
+    "jquery-slimscroll": "^1.3.8",
+    "moment": "2.24.0",
+    "moment-timezone": "0.5.28",
+    "natural-compare": "1.4.0",
+    "sweetalert": "^1.1.3"
   },
   "devDependencies": {
-    "browser-sync": "^2.26.3",
-    "del": "^4.1.0",
+    "browser-sync": "^2.26.14",
+    "del": "^4.1.1",
     "eslint-config-angular": "^0.5.0",
     "eslint-plugin-angular": "^3.3.0",
     "git-rev-sync": "^1.12.0",
     "gulp": "^3.9.1",
-    "gulp-angular-templatecache": "^2.2.6",
-    "gulp-autoprefixer": "^6.0.0",
+    "gulp-angular-templatecache": "^2.2.7",
+    "gulp-autoprefixer": "^6.1.0",
     "gulp-cssnano": "^2.1.3",
     "gulp-eslint": "^4.0.2",
     "gulp-htmlmin": "^5.0.1",
     "gulp-if": "^2.0.2",
     "gulp-inject-version": "^1.0.1",
-    "gulp-load-plugins": "^1.5.0",
+    "gulp-load-plugins": "^1.6.0",
     "gulp-manifest": "^0.1.1",
     "gulp-plumber": "^1.2.1",
     "gulp-replace": "^1.0.0",
@@ -64,16 +63,22 @@
     "gulp-uglify": "^3.0.2",
     "gulp-useref": "^3.1.6",
     "gulp-util": "^3.0.8",
-    "nice-try": "^2.0.0",
+    "natives": "^1.1.6",
+    "nice-try": "^2.1.0",
     "uglify-save-license": "^0.4.1"
   },
   "name": "ariang",
   "description": "AriaNg, a modern web frontend making aria2 easier to use.",
-  "version": "1.1.7",
+  "version": "1.2.1",
   "main": "index.html",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 0"
   },
+  "browsers": [
+    "> 1%",
+    "last 2 versions",
+    "Firefox ESR"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mayswind/AriaNg.git"

src/index.html

@@ -4,11 +4,11 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" name="viewport">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes"/>
     <meta name="apple-mobile-web-app-title" content="AriaNg"/>
-    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
     <meta name="msapplication-TileColor" content="#3c4852">
     <meta name="msapplication-TileImage" content="tileicon.png">
     <meta name="description" content="AriaNg, a modern web frontend making aria2 easier to use.">
@@ -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>

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=预览
@@ -171,6 +175,8 @@ Add New RPC Setting=添加新 RPC 设置
 Are you sure you want to remove rpc setting "{{rpcName}}"?=您是否要删除 RPC 设置 "{{rpcName}}"?
 Updating Global Stat Interval=全局状态更新间隔
 Updating Task Information Interval=任务信息更新间隔
+Swipe Gesture=滑动手势
+Change Tasks Order by Drag-and-drop=拖拽任务排序
 Action After Creating New Tasks=创建新任务后执行操作
 Navigate to Task List Page=转到任务列表页面
 Navigate to Task Detail Page=转到任务详情页面

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=預覽
@@ -171,6 +175,8 @@ Add New RPC Setting=加入新 RPC 設定
 Are you sure you want to remove rpc setting "{{rpcName}}"?=您是否要刪除 RPC 設定 "{{rpcName}}"?
 Updating Global Stat Interval=全域狀態更新間隔
 Updating Task Information Interval=工作資訊更新間隔
+Swipe Gesture=滑動手勢
+Change Tasks Order by Drag-and-drop=拖拽工作排序
 Action After Creating New Tasks=建立新工作後執行操作
 Navigate to Task List Page=轉到工作清單頁面
 Navigate to Task Detail Page=轉到工作詳情頁面

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,
@@ -36,6 +37,8 @@
         extendRpcServers: [],
         globalStatRefreshInterval: 1000,
         downloadTaskRefreshInterval: 1000,
+        swipeGesture: true,
+        dragAndDropTasks: true,
         rpcListDisplayOrder: 'recentlyUsed',
         afterCreatingNewTask: 'task-list',
         removeOldTaskAfterRetrying: false,

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',
@@ -175,6 +179,8 @@
             'Are you sure you want to remove rpc setting "{{rpcName}}"?': 'Are you sure you want to remove rpc setting "{{rpcName}}"?',
             'Updating Global Stat Interval': 'Updating Global Stat Interval',
             'Updating Task Information Interval': 'Updating Task Information Interval',
+            'Swipe Gesture': 'Swipe Gesture',
+            'Change Tasks Order by Drag-and-drop': 'Change Tasks Order by Drag-and-drop',
             'Action After Creating New Tasks': 'Action After Creating New Tasks',
             'Navigate to Task List Page': 'Navigate to Task List Page',
             'Navigate to Task Detail Page': 'Navigate to Task Detail Page',

src/scripts/controllers/list.js

@@ -79,6 +79,10 @@
         };
 
         $scope.isSupportDragTask = function () {
+            if (!ariaNgSettingService.getDragAndDropTasks()) {
+                return false;
+            }
+
             var displayOrder = ariaNgCommonService.parseOrderType(ariaNgSettingService.getDisplayOrder());
 
             return location === 'waiting' && displayOrder.type === 'default';

src/scripts/controllers/new.js

@@ -93,7 +93,7 @@
             $scope.context.currentTab = tabName;
         };
 
-        $rootScope.swipeActions.extentLeftSwipe = function () {
+        $rootScope.swipeActions.extendLeftSwipe = function () {
             var tabIndex = tabOrders.indexOf($scope.context.currentTab);
 
             if (tabIndex < tabOrders.length - 1) {
@@ -104,7 +104,7 @@
             }
         };
 
-        $rootScope.swipeActions.extentRightSwipe = function () {
+        $rootScope.swipeActions.extendRightSwipe = function () {
             var tabIndex = tabOrders.indexOf($scope.context.currentTab);
 
             if (tabIndex > 0) {

src/scripts/controllers/settings-ariang.js

@@ -56,6 +56,7 @@
             sessionSettings: ariaNgSettingService.getAllSessionOptions(),
             rpcSettings: ariaNgSettingService.getAllRpcSettings(),
             isSupportBlob: ariaNgFileService.isSupportBlob(),
+            isSupportDarkMode: ariaNgSettingService.isBrowserSupportDarkMode(),
             importSettings: null,
             exportSettings: null,
             exportSettingsCopied: false
@@ -92,7 +93,7 @@
             $scope.context.titlePreview = getFinalTitle();
         };
 
-        $rootScope.swipeActions.extentLeftSwipe = function () {
+        $rootScope.swipeActions.extendLeftSwipe = function () {
             var tabIndex = -1;
 
             if (!$scope.isCurrentGlobalTab()) {
@@ -107,7 +108,7 @@
             }
         };
 
-        $rootScope.swipeActions.extentRightSwipe = function () {
+        $rootScope.swipeActions.extendRightSwipe = function () {
             var tabIndex = -1;
 
             if (!$scope.isCurrentGlobalTab()) {
@@ -138,6 +139,11 @@
             $scope.updateTitlePreview();
         };
 
+        $scope.setTheme = function (value) {
+            ariaNgSettingService.setTheme(value);
+            $rootScope.setTheme(value);
+        };
+
         $scope.setDebugMode = function (value) {
             ariaNgSettingService.setDebugMode(value);
         };
@@ -179,6 +185,14 @@
             ariaNgSettingService.setRPCListDisplayOrder(value);
         };
 
+        $scope.setSwipeGesture = function (value) {
+            ariaNgSettingService.setSwipeGesture(value);
+        };
+
+        $scope.setDragAndDropTasks = function (value) {
+            ariaNgSettingService.setDragAndDropTasks(value);
+        };
+
         $scope.setAfterCreatingNewTask = function (value) {
             ariaNgSettingService.setAfterCreatingNewTask(value);
         };

src/scripts/controllers/task-detail.js

@@ -218,7 +218,7 @@
             $scope.context.currentTab = tabName;
         };
 
-        $rootScope.swipeActions.extentLeftSwipe = function () {
+        $rootScope.swipeActions.extendLeftSwipe = function () {
             var tabIndex = tabOrders.indexOf($scope.context.currentTab);
 
             if (tabIndex < tabOrders.length - 1) {
@@ -229,7 +229,7 @@
             }
         };
 
-        $rootScope.swipeActions.extentRightSwipe = function () {
+        $rootScope.swipeActions.extendRightSwipe = function () {
             var tabIndex = tabOrders.indexOf($scope.context.currentTab);
 
             if (tabIndex > 0) {

src/scripts/core/__fix.js

@@ -11,6 +11,10 @@
 
     $(window, '.wrapper').resize(function () {
         fixContentWrapperHeight();
+
+        setInterval(function(){
+            fixContentWrapperHeight();
+        }, 1);
     });
 
     fixContentWrapperHeight();

src/scripts/core/root.js

@@ -22,6 +22,43 @@
             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.isBrowserSupportDarkMode()) {
+                setLightTheme();
+                return;
+            }
+
+            var matchPreferColorScheme = $window.matchMedia('(prefers-color-scheme: dark)');
+
+            ariaNgLogService.info('[root.setThemeBySystemSettings] system uses ' + (matchPreferColorScheme.matches ? 'dark' : 'light') + ' theme');
+
+            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 +127,8 @@
             return angular.element('body').hasClass('sidebar-open');
         };
 
+        $rootScope.currentTheme = 'light';
+
         $rootScope.searchContext = {
             text: ''
         };
@@ -306,19 +345,27 @@
 
         $rootScope.swipeActions = {
             leftSwipe: function () {
+                if (!ariaNgSettingService.getSwipeGesture()) {
+                    return;
+                }
+
                 if (isSidebarShowInSmallScreen()) {
                     hideSidebar();
                     return;
                 }
 
-                if (!this.extentLeftSwipe ||
-                    (angular.isFunction(this.extentLeftSwipe) && !this.extentLeftSwipe())) {
+                if (!this.extendLeftSwipe ||
+                    (angular.isFunction(this.extendLeftSwipe) && !this.extendLeftSwipe())) {
                     hideSidebar();
                 }
             },
             rightSwipe: function () {
-                if (!this.extentRightSwipe ||
-                    (angular.isFunction(this.extentRightSwipe) && !this.extentRightSwipe())) {
+                if (!ariaNgSettingService.getSwipeGesture()) {
+                    return;
+                }
+
+                if (!this.extendRightSwipe ||
+                    (angular.isFunction(this.extendRightSwipe) && !this.extendRightSwipe())) {
                     showSidebar();
                 }
             }
@@ -328,6 +375,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,
@@ -381,8 +438,8 @@
 
             $rootScope.loadPromise = null;
 
-            delete $rootScope.swipeActions.extentLeftSwipe;
-            delete $rootScope.swipeActions.extentRightSwipe;
+            delete $rootScope.swipeActions.extendLeftSwipe;
+            delete $rootScope.swipeActions.extendRightSwipe;
 
             if (angular.isArray($rootScope.taskContext.list) && $rootScope.taskContext.list.length > 0) {
                 $rootScope.taskContext.list.length = 0;
@@ -402,6 +459,22 @@
             $document.unbind('keypress');
         });
 
+        if (ariaNgSettingService.isBrowserSupportDarkMode()) {
+            var matchPreferColorScheme = $window.matchMedia('(prefers-color-scheme: dark)');
+            matchPreferColorScheme.addEventListener('change', function (e) {
+                ariaNgLogService.info('[root] system switches to ' + (e.matches ? 'dark' : 'light') + ' theme');
+
+                if (ariaNgSettingService.getTheme() === 'system') {
+                    if (e.matches) {
+                        setDarkTheme();
+                    } else {
+                        setLightTheme();
+                    }
+                }
+            });
+        }
+
+        initTheme();
         initCheck();
         initNavbar();
     }]);

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

src/scripts/services/ariaNgSettingService.js

@@ -13,6 +13,11 @@
         })();
         var browserSupportStorage = browserFeatures.localStroage || browserFeatures.cookies;
         var browserSupportAppCache = !!$window.applicationCache;
+        var browserSupportMatchMedia = !!$window.matchMedia;
+        var browserSupportDarkMode = browserSupportMatchMedia
+            && $window.matchMedia('(prefers-color-scheme: dark)')
+            && $window.matchMedia('(prefers-color-scheme: dark)').media !== 'not all'
+            && angular.isFunction($window.matchMedia('(prefers-color-scheme: dark)').addEventListener);
 
         var onAppCacheUpdatedCallbacks = [];
         var onFirstVisitCallbacks = [];
@@ -60,6 +65,10 @@
                     continue;
                 }
 
+                if (langName.toLowerCase() === alias.toLowerCase()) {
+                    return langName;
+                }
+
                 var language = ariaNgLanguages[langName];
                 var aliases = language.aliases;
 
@@ -68,7 +77,7 @@
                 }
 
                 for (var i = 0; i < aliases.length; i++) {
-                    if (aliases[i] === alias) {
+                    if (aliases[i].toLowerCase() === alias.toLowerCase()) {
                         return langName;
                     }
                 }
@@ -81,6 +90,7 @@
             var browserLang = $window.navigator.browserLanguage ? $window.navigator.browserLanguage : $window.navigator.language;
 
             if (!browserLang) {
+                ariaNgLogService.info('[ariaNgSettingService] cannot get browser language, use default language');
                 return ariaNgDefaultOptions.language;
             }
 
@@ -94,10 +104,25 @@
                 }
             }
 
+            if (!ariaNgLanguages[browserLang] && browserLang.split('-').length > 1) { // maybe language-script-region
+                var langParts = browserLang.split('-');
+                browserLang = langParts[0] + '-' + langParts[1];
+
+                if (!ariaNgLanguages[browserLang]) {
+                    var languageName = getLanguageNameFromAlias(browserLang);
+
+                    if (languageName) {
+                        browserLang = languageName;
+                    }
+                }
+            }
+
             if (!ariaNgLanguages[browserLang]) {
+                ariaNgLogService.info('[ariaNgSettingService] browser language \"' + browserLang + '\" not support, use default language');
                 return ariaNgDefaultOptions.language;
             }
 
+            ariaNgLogService.info('[ariaNgSettingService] use browser language \"' + browserLang + '\" as current language');
             return browserLang;
         };
 
@@ -215,6 +240,9 @@
             isBrowserSupportApplicationCache: function () {
                 return browserSupportAppCache;
             },
+            isBrowserSupportDarkMode: function () {
+                return browserSupportDarkMode;
+            },
             getBrowserFeatures: function () {
                 return browserFeatures;
             },
@@ -326,6 +354,13 @@
                 setOption('language', value);
                 return true;
             },
+            getTheme: function () {
+                return getOption('theme');
+            },
+            setTheme: function (value) {
+                setOption('theme', value);
+                return true;
+            },
             isEnableDebugMode: function () {
                 return sessionSettings.debugMode;
             },
@@ -363,6 +398,18 @@
             setDownloadTaskRefreshInterval: function (value) {
                 setOption('downloadTaskRefreshInterval', Math.max(parseInt(value), 0));
             },
+            getSwipeGesture: function () {
+                return getOption('swipeGesture');
+            },
+            setSwipeGesture: function (value) {
+                setOption('swipeGesture', value);
+            },
+            getDragAndDropTasks: function () {
+                return getOption('dragAndDropTasks');
+            },
+            setDragAndDropTasks: function (value) {
+                setOption('dragAndDropTasks', value);
+            },
             getRPCListDisplayOrder: function () {
                 return getOption('rpcListDisplayOrder');
             },

src/styles/controls/angular-promise-buttons.css

@@ -101,7 +101,7 @@
 }
 
 .btn-spinner:not(:required) {
-    margin-left: -22px;
+    margin-left: -17px;
     opacity: 0;
     transition: 0.4s margin ease-out, 0.2s opacity ease-out;
 }

src/styles/controls/new-task-table.css

@@ -4,11 +4,26 @@
     margin-right: 15px;
 }
 
+@media screen and (orientation: landscape) {
+    .content > .new-task-table,
+    .tab-pane > .new-task-table {
+        margin-right: calc(15px + env(safe-area-inset-right));
+    }
+}
+
 .new-task-table > div.row {
     padding-top: 8px;
     padding-bottom: 8px;
 }
 
+@media screen and (orientation: landscape) {
+    .content > .new-task-table > div.row,
+    .tab-pane > .new-task-table > div.row {
+        margin-right: calc(-1 * calc(15px + env(safe-area-inset-right)));
+        padding-right: env(safe-area-inset-right);
+    }
+}
+
 .new-task-table > div.row:first-child {
     border-top: inherit;
 }

src/styles/controls/piece-bar-map.css

@@ -13,12 +13,24 @@
     line-height: 11px;
 }
 
+@media screen and (orientation: landscape) {
+    .tab-pane > .piece-map {
+        padding-right: calc(2px + env(safe-area-inset-right));
+    }
+}
+
 .piece-legends {
     text-align: center;
     margin-top: 4px;
     margin-bottom: 4px;
 }
 
+@media screen and (orientation: landscape) {
+    .tab-pane > .piece-legends {
+        padding-right: env(safe-area-inset-right);
+    }
+}
+
 .piece-legend {
     display: inline-block;
     margin-right: 4px;

src/styles/controls/settings-table.css

@@ -4,6 +4,13 @@
     margin-right: 15px;
 }
 
+@media screen and (orientation: landscape) {
+    .content > .settings-table,
+    .tab-pane > .settings-table {
+        margin-right: calc(15px + env(safe-area-inset-right));
+    }
+}
+
 .settings-table .settings-table-title {
     font-size: 12px;
     padding-top: 4px;
@@ -20,6 +27,14 @@
     border-top: 1px solid #ddd;
 }
 
+@media screen and (orientation: landscape) {
+    .content > .settings-table > div.row,
+    .tab-pane > .settings-table > div.row {
+        margin-right: calc(-1 * calc(15px + env(safe-area-inset-right)));
+        padding-right: env(safe-area-inset-right);
+    }
+}
+
 .settings-table > div.row:first-child {
     border-top: inherit;
 }

src/styles/controls/task-table.css

@@ -4,6 +4,13 @@
     margin-right: 15px;
 }
 
+@media screen and (orientation: landscape) {
+    .content > .task-table,
+    .tab-pane > .task-table {
+        margin-right: calc(15px + env(safe-area-inset-right));
+    }
+}
+
 .task-table .task-table-title {
     font-size: 12px;
     padding-top: 4px;
@@ -22,6 +29,14 @@
     cursor: -webkit-grab;
 }
 
+@media screen and (orientation: landscape) {
+    .content > .task-table div.row,
+    .tab-pane > .task-table div.row {
+        margin-right: calc(-1 * calc(15px + env(safe-area-inset-right)));
+        padding-right: env(safe-area-inset-right);
+    }
+}
+
 .task-table > .task-table-body > div.row {
     padding-top: 8px;
     padding-bottom: 8px;

src/styles/core/core.css

@@ -18,6 +18,23 @@ body {
     user-select: none;
 }
 
+select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23555555%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') !important;
+    background-repeat: no-repeat, repeat !important;
+    background-position: right 0.7em top 50%, 0 0 !important;
+    background-size: 0.65em auto, 100% !important;
+    border: none;
+    border-radius: 0;
+    padding: 0 0 0 0.35em;
+}
+
+select::-ms-expand {
+    display: none;
+}
+
 td {
     vertical-align: middle !important;
 }
@@ -88,6 +105,26 @@ td {
     z-index: 1010;
 }
 
+.main-sidebar .sidebar-menu > li.treeview > ul.treeview-menu > li > a {
+    padding: 6px 5px 6px 41px;
+}
+
+@supports (padding-left: max(15px, 0px)) {
+    @media screen and (orientation: landscape) {
+        .main-sidebar ul.sidebar-menu > li.header {
+            padding-left: max(15px, env(safe-area-inset-left));
+        }
+
+        .main-sidebar ul.sidebar-menu > li > a {
+            padding-left: max(15px, env(safe-area-inset-left));
+        }
+
+        .main-sidebar ul.sidebar-menu > li.treeview > ul.treeview-menu > li > a {
+            padding-left: max(41px, calc(26px + env(safe-area-inset-left)));
+        }
+    }
+}
+
 .content-wrapper {
     min-height: calc(100vh - 48px);
 }
@@ -100,6 +137,12 @@ td {
     overflow-y: scroll;
 }
 
+@media screen and (orientation: portrait) {
+    .main-footer {
+        padding-bottom: calc(15px + env(safe-area-inset-bottom));
+    }
+}
+
 .main-footer > .navbar {
     margin-bottom: 0;
     min-height: inherit;

src/styles/core/extend.css

@@ -3,6 +3,11 @@
     margin-left: 4px;
 }
 
+.btn-sm.promise-btn-style {
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+
 .progress-bar {
     -webkit-transition: initial !important;
     -moz-transition: initial !important;

src/styles/theme/default-dark.css

@@ -0,0 +1,417 @@
+/* skin-aria-ng core */
+.theme-dark.skin-aria-ng {
+    color: #eee;
+    background-color: #1a1a1a;
+}
+
+
+.theme-dark.skin-aria-ng select {
+    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23cccccc%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') !important;
+}
+
+.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 .progress {
+    background-color: #444;
+}
+
+.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 > a:hover,
+.theme-dark.skin-aria-ng .nav-tabs-custom > .nav-tabs > li > a:active,
+.theme-dark.skin-aria-ng .nav-tabs-custom > .nav-tabs > li.active > a {
+    color: #208fe5;
+}
+
+.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;
+}
+
+/* cg-busy */
+.theme-dark.skin-aria-ng .cg-busy-default-sign {
+    color: #eee;
+    border-color: #666;
+    background-color: #444;
+    text-shadow: 0 1px 1px #000;
+}
+
+.theme-dark.skin-aria-ng .cg-busy-default-text {
+    color: #eee;
+}
+
+.theme-dark.skin-aria-ng .cg-busy-default-spinner div {
+    background-color: #eee;
+}
+
+/* scrollbar */
+.theme-dark.skin-aria-ng ::-webkit-scrollbar-thumb {
+    background-color: #3c4144;
+}
+
+/* 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;
+}
+
+.theme-dark.skin-aria-ng .task-table .progress span.progress-lower {
+    color: #eee;
+}
+
+/* settings-table */
+.theme-dark.skin-aria-ng .settings-table {
+    background-color: #1a1a1a;
+}
+
+.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;
+}

src/styles/theme/default.css

@@ -162,7 +162,6 @@
 
 .skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a {
     color: #8aa4af;
-    padding: 6px 5px 6px 41px;
 }
 
 .skin-aria-ng .sidebar-menu > li.treeview > ul.treeview-menu > li > a:hover {

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.isSupportDarkMode" 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>
@@ -122,6 +135,28 @@
                             </select>
                         </div>
                     </div>
+                    <div class="row">
+                        <div class="setting-key setting-key-without-desc col-sm-4">
+                            <span translate>Swipe Gesture</span>
+                        </div>
+                        <div class="setting-value col-sm-8">
+                            <select class="form-control" style="width: 100%;" ng-model="context.settings.swipeGesture"
+                                    ng-change="setSwipeGesture(context.settings.swipeGesture)"
+                                    ng-options="option.value as (option.name | translate) for option in context.trueFalseOptions">
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="setting-key setting-key-without-desc col-sm-4">
+                            <span translate>Change Tasks Order by Drag-and-drop</span>
+                        </div>
+                        <div class="setting-value col-sm-8">
+                            <select class="form-control" style="width: 100%;" ng-model="context.settings.dragAndDropTasks"
+                                    ng-change="setDragAndDropTasks(context.settings.dragAndDropTasks)"
+                                    ng-options="option.value as (option.name | translate) for option in context.trueFalseOptions">
+                            </select>
+                        </div>
+                    </div>
                     <div class="row">
                         <div class="setting-key setting-key-without-desc col-sm-4">
                             <span translate>RPC List Display Order</span>

src/views/status.html

@@ -43,12 +43,8 @@
                 <span translate>Operations</span>
             </div>
             <div class="setting-value col-sm-8">
-                <button class="btn btn-sm btn-primary" ng-click="saveSession()" promise-btn>
-                    <span translate>Save Session</span>
-                </button>
-                <button class="btn btn-sm btn-danger" ng-click="shutdown()">
-                    <span translate>Shutdown Aria2</span>
-                </button>
+                <button class="btn btn-sm btn-primary" ng-click="saveSession()" promise-btn><span translate>Save Session</span></button>
+                <button class="btn btn-sm btn-danger promise-btn-style" ng-click="shutdown()"><span translate>Shutdown Aria2</span></button>
             </div>
         </div>
     </div>

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>