@@ -99,7 +98,7 @@
dir-paginate-end
ng-show="item.Expanded"
ng-repeat="vol in item.Volumes"
- ng-style="{ background: item.Highlighted ? 'var(--bg-item-highlighted-color)' : 'var(--bg-item-highlighted-null-color)' }"
+ ng-class="{ 'datatable-highlighted': item.Highlighted, 'datatable-unhighlighted': !item.Highlighted }"
>
diff --git a/app/portainer/components/custom-templates-list/customTemplatesList.html b/app/portainer/components/custom-templates-list/customTemplatesList.html
index c71a8b0d5..bc2cda229 100644
--- a/app/portainer/components/custom-templates-list/customTemplatesList.html
+++ b/app/portainer/components/custom-templates-list/customTemplatesList.html
@@ -10,7 +10,7 @@
-
+
-
+
{
+ this.state.userId = await this.Authentication.getUserDetails().ID;
+ const data = await this.UserService.user(this.state.userId);
+ this.state.userTheme = data.UserTheme || 'light';
+ });
+ }
+}
diff --git a/app/portainer/components/theme/theme-settings.html b/app/portainer/components/theme/theme-settings.html
new file mode 100644
index 000000000..416612f85
--- /dev/null
+++ b/app/portainer/components/theme/theme-settings.html
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/portainer/components/theme/theme-settings.js b/app/portainer/components/theme/theme-settings.js
new file mode 100644
index 000000000..d8d57beb5
--- /dev/null
+++ b/app/portainer/components/theme/theme-settings.js
@@ -0,0 +1,7 @@
+import angular from 'angular';
+import controller from './theme-settings.controller';
+
+angular.module('portainer.app').component('themeSettings', {
+ templateUrl: './theme-settings.html',
+ controller,
+});
diff --git a/app/portainer/models/user.js b/app/portainer/models/user.js
index b7c1a7f0c..4090e9100 100644
--- a/app/portainer/models/user.js
+++ b/app/portainer/models/user.js
@@ -2,7 +2,7 @@ export function UserViewModel(data) {
this.Id = data.Id;
this.Username = data.Username;
this.Role = data.Role;
- this.Usertheme = data.Usertheme;
+ this.UserTheme = data.UserTheme;
if (data.Role === 1) {
this.RoleName = 'administrator';
} else {
diff --git a/app/portainer/services/api/userService.js b/app/portainer/services/api/userService.js
index eca9548db..bb6e8622c 100644
--- a/app/portainer/services/api/userService.js
+++ b/app/portainer/services/api/userService.js
@@ -92,11 +92,7 @@ angular.module('portainer.app').factory('UserService', [
};
service.updateUserTheme = function (id, userTheme) {
- var payload = {
- Usertheme: userTheme,
- };
-
- return Users.updateTheme({ id: id }, payload).$promise;
+ return Users.updateTheme({ id }, { userTheme }).$promise;
};
service.userMemberships = function (id) {
diff --git a/app/portainer/services/authentication.js b/app/portainer/services/authentication.js
index 6c5de3059..3a5073301 100644
--- a/app/portainer/services/authentication.js
+++ b/app/portainer/services/authentication.js
@@ -84,20 +84,11 @@ angular.module('portainer.app').factory('Authentication', [
return user;
}
- async function setDefaultTheme() {
+ async function setUserTheme() {
const data = await UserService.user(user.ID);
-
- ThemeManager.setTheme('light');
- if (!data.Usertheme || data.Usertheme === 'light') {
- ThemeManager.setTheme('light');
- StateManager.updateTheme('light');
- } else if (data.Usertheme === 'dark') {
- ThemeManager.setTheme('dark');
- StateManager.updateTheme('dark');
- } else if (data.Usertheme === 'highcontrast') {
- ThemeManager.setTheme('highcontrast');
- StateManager.updateTheme('highcontrast');
- }
+ // Initialize user theme base on Usertheme from database
+ const userTheme = data.UserTheme;
+ ThemeManager.setTheme(userTheme);
}
async function setUser(jwt) {
@@ -106,7 +97,7 @@ angular.module('portainer.app').factory('Authentication', [
user.username = tokenPayload.username;
user.ID = tokenPayload.id;
user.role = tokenPayload.role;
- await setDefaultTheme();
+ await setUserTheme();
}
function isAdmin() {
diff --git a/app/portainer/services/theme-manager.js b/app/portainer/services/theme-manager.js
deleted file mode 100644
index 671e03d72..000000000
--- a/app/portainer/services/theme-manager.js
+++ /dev/null
@@ -1,12 +0,0 @@
-angular.module('portainer.app').factory('ThemeManager', [
- /* @ngInject */
- function ThemeManagerFactory() {
- var service = {};
-
- service.setTheme = function (theme) {
- document.documentElement.setAttribute('theme', theme);
- };
-
- return service;
- },
-]);
diff --git a/app/portainer/services/themeManager.js b/app/portainer/services/themeManager.js
new file mode 100644
index 000000000..9cf18137b
--- /dev/null
+++ b/app/portainer/services/themeManager.js
@@ -0,0 +1,23 @@
+angular.module('portainer.app').service('ThemeManager', ThemeManager);
+
+/* @ngInject */
+
+export function ThemeManager(StateManager) {
+ return {
+ setTheme,
+ defaultTheme,
+ };
+
+ function setTheme(theme) {
+ if (!theme) {
+ document.documentElement.removeAttribute('theme');
+ } else {
+ document.documentElement.setAttribute('theme', theme);
+ }
+ StateManager.updateTheme(theme);
+ }
+
+ function defaultTheme() {
+ document.documentElement.removeAttribute('theme');
+ }
+}
diff --git a/app/portainer/views/account/account.html b/app/portainer/views/account/account.html
index 456db33a2..f387f9f21 100644
--- a/app/portainer/views/account/account.html
+++ b/app/portainer/views/account/account.html
@@ -78,53 +78,6 @@
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/app/portainer/views/logout/logoutController.js b/app/portainer/views/logout/logoutController.js
index 3f7cff1f2..43c9d8878 100644
--- a/app/portainer/views/logout/logoutController.js
+++ b/app/portainer/views/logout/logoutController.js
@@ -29,7 +29,7 @@ class LogoutController {
const performApiLogout = this.$transition$.params().performApiLogout;
const settings = await this.SettingsService.publicSettings();
- this.ThemeManager.setTheme('light');
+ this.ThemeManager.defaultTheme();
try {
await this.Authentication.logout(performApiLogout);
diff --git a/app/portainer/views/main/mainController.js b/app/portainer/views/main/mainController.js
index f004e8232..a942b62f3 100644
--- a/app/portainer/views/main/mainController.js
+++ b/app/portainer/views/main/mainController.js
@@ -4,7 +4,7 @@ angular.module('portainer.app').controller('MainController', [
'StateManager',
'EndpointProvider',
'ThemeManager',
- function ($scope, LocalStorage, StateManager, EndpointProvider, ThemeManager) {
+ function ($scope, LocalStorage, StateManager, EndpointProvider) {
/**
* Sidebar Toggle & Cookie Control
*/
@@ -13,11 +13,6 @@ angular.module('portainer.app').controller('MainController', [
return window.innerWidth;
};
- // Portainer Default Theme
- $scope.theme = 'light';
-
- ThemeManager.setTheme($scope.theme);
-
$scope.applicationState = StateManager.getState();
$scope.endpointState = EndpointProvider.endpoint();