{
+ this.state = {
+ userId: null,
+ userTheme: '',
+ initTheme: '',
+ defaultTheme: 'light',
+ themeInProgress: false,
+ };
+
+ this.state.availableThemes = [
+ buildOption('light', 'fas fa-sun', 'Light Theme', 'Default color mode', 'light'),
+ buildOption('dark', 'fas fa-moon', 'Dark Theme', 'Dark color mode', 'dark'),
+ buildOption('highcontrast', 'fas fa-adjust', 'High Contrast', 'High contrast color mode', 'highcontrast'),
+ ];
+
+ this.state.availableTheme = {
+ light: 'light',
+ dark: 'dark',
+ highContrast: 'highcontrast',
+ };
+
+ try {
+ this.state.userId = await this.Authentication.getUserDetails().ID;
+ const data = await this.UserService.user(this.state.userId);
+ this.state.userTheme = data.UserTheme || this.state.defaultTheme;
+ this.state.initTheme = this.state.userTheme;
+ } catch (err) {
+ this.Notifications.error('Failure', err, 'Unable to get user details');
+ }
+ });
+ }
+
+ $onDestroy() {
+ if (this.state.themeInProgress) {
+ this.ThemeManager.setTheme(this.state.initTheme);
+ }
+ }
+}
diff --git a/app/portainer/components/theme/theme-settings.html b/app/portainer/components/theme/theme-settings.html
new file mode 100644
index 000000000..1d5e8b348
--- /dev/null
+++ b/app/portainer/components/theme/theme-settings.html
@@ -0,0 +1,19 @@
+
+
+
+
+ Dark and High-contrast theme are experimental. Some UI components might not display properly.
+
+
+
+
+
+
+
+
+
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 e86be99f0..4090e9100 100644
--- a/app/portainer/models/user.js
+++ b/app/portainer/models/user.js
@@ -2,6 +2,7 @@ export function UserViewModel(data) {
this.Id = data.Id;
this.Username = data.Username;
this.Role = data.Role;
+ this.UserTheme = data.UserTheme;
if (data.Role === 1) {
this.RoleName = 'administrator';
} else {
diff --git a/app/portainer/rest/user.js b/app/portainer/rest/user.js
index f87314103..2f2bb24c6 100644
--- a/app/portainer/rest/user.js
+++ b/app/portainer/rest/user.js
@@ -12,6 +12,7 @@ angular.module('portainer.app').factory('Users', [
get: { method: 'GET', params: { id: '@id' } },
update: { method: 'PUT', params: { id: '@id' }, ignoreLoadingBar: true },
updatePassword: { method: 'PUT', params: { id: '@id', entity: 'passwd' } },
+ updateTheme: { method: 'PUT', params: { id: '@id' } },
remove: { method: 'DELETE', params: { id: '@id' } },
queryMemberships: { method: 'GET', isArray: true, params: { id: '@id', entity: 'memberships' } },
checkAdminUser: { method: 'GET', params: { id: 'admin', entity: 'check' }, isArray: true, ignoreLoadingBar: true },
diff --git a/app/portainer/services/api/userService.js b/app/portainer/services/api/userService.js
index ef23fffc3..bb6e8622c 100644
--- a/app/portainer/services/api/userService.js
+++ b/app/portainer/services/api/userService.js
@@ -91,6 +91,10 @@ angular.module('portainer.app').factory('UserService', [
return Users.updatePassword({ id: id }, payload).$promise;
};
+ service.updateUserTheme = function (id, userTheme) {
+ return Users.updateTheme({ id }, { userTheme }).$promise;
+ };
+
service.userMemberships = function (id) {
var deferred = $q.defer();
diff --git a/app/portainer/services/authentication.js b/app/portainer/services/authentication.js
index c4bdcca9d..3a5073301 100644
--- a/app/portainer/services/authentication.js
+++ b/app/portainer/services/authentication.js
@@ -9,7 +9,9 @@ angular.module('portainer.app').factory('Authentication', [
'LocalStorage',
'StateManager',
'EndpointProvider',
- function AuthenticationFactory($async, $state, Auth, OAuth, jwtHelper, LocalStorage, StateManager, EndpointProvider) {
+ 'UserService',
+ 'ThemeManager',
+ function AuthenticationFactory($async, $state, Auth, OAuth, jwtHelper, LocalStorage, StateManager, EndpointProvider, UserService, ThemeManager) {
'use strict';
var service = {};
@@ -82,12 +84,20 @@ angular.module('portainer.app').factory('Authentication', [
return user;
}
+ async function setUserTheme() {
+ const data = await UserService.user(user.ID);
+ // Initialize user theme base on Usertheme from database
+ const userTheme = data.UserTheme;
+ ThemeManager.setTheme(userTheme);
+ }
+
async function setUser(jwt) {
LocalStorage.storeJWT(jwt);
var tokenPayload = jwtHelper.decodeToken(jwt);
user.username = tokenPayload.username;
user.ID = tokenPayload.id;
user.role = tokenPayload.role;
+ await setUserTheme();
}
function isAdmin() {
diff --git a/app/portainer/services/stateManager.js b/app/portainer/services/stateManager.js
index 9e9dbd383..047a29813 100644
--- a/app/portainer/services/stateManager.js
+++ b/app/portainer/services/stateManager.js
@@ -54,6 +54,11 @@ angular.module('portainer.app').factory('StateManager', [
LocalStorage.storeApplicationState(state.application);
};
+ manager.updateTheme = function (theme) {
+ state.application.theme = theme;
+ LocalStorage.storeApplicationState(state.application);
+ };
+
manager.updateSnapshotInterval = function (interval) {
state.application.snapshotInterval = interval;
LocalStorage.storeApplicationState(state.application);
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 db2a4d078..f387f9f21 100644
--- a/app/portainer/views/account/account.html
+++ b/app/portainer/views/account/account.html
@@ -78,5 +78,6 @@
+