feat(ui): add option to sync portainer with system theme EE-1788 (#5812)

* add option to sync portainer with system theme

app/assets/css/vendor-override.css

@@ -269,6 +269,7 @@ json-tree .branch-preview {
 
 .panel {
   border: 1px solid var(--border-panel-color);
+  background-color: var(--bg-panel-body-color);
 }
 
 .theme-information .col-sm-12 {

app/portainer/components/theme/theme-settings.controller.js

@@ -25,7 +25,11 @@ export default class ThemeSettingsController {
   }
 
   setTheme(theme) {
-    this.ThemeManager.setTheme(theme);
+    if (theme === 'auto' || !theme) {
+      this.ThemeManager.autoTheme();
+    } else {
+      this.ThemeManager.setTheme(theme);
+    }
     this.state.themeInProgress = true;
   }
 
@@ -35,7 +39,7 @@ export default class ThemeSettingsController {
         userId: null,
         userTheme: '',
         initTheme: '',
-        defaultTheme: 'light',
+        defaultTheme: 'auto',
         themeInProgress: false,
       };
 
@@ -43,14 +47,9 @@ export default class ThemeSettingsController {
         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'),
+        buildOption('auto', 'fas fa-sync-alt', 'Auto', 'Sync with system theme', 'auto'),
       ];
 
-      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);

app/portainer/services/authentication.js

@@ -88,7 +88,11 @@ angular.module('portainer.app').factory('Authentication', [
       const data = await UserService.user(user.ID);
       // Initialize user theme base on Usertheme from database
       const userTheme = data.UserTheme;
-      ThemeManager.setTheme(userTheme);
+      if (userTheme === 'auto' || !userTheme) {
+        ThemeManager.autoTheme();
+      } else {
+        ThemeManager.setTheme(userTheme);
+      }
     }
 
     async function setUser(jwt) {

app/portainer/services/themeManager.js

@@ -5,6 +5,7 @@ angular.module('portainer.app').service('ThemeManager', ThemeManager);
 export function ThemeManager(StateManager) {
   return {
     setTheme,
+    autoTheme,
     defaultTheme,
   };
 
@@ -13,8 +14,13 @@ export function ThemeManager(StateManager) {
       document.documentElement.removeAttribute('theme');
     } else {
       document.documentElement.setAttribute('theme', theme);
+      StateManager.updateTheme(theme);
     }
-    StateManager.updateTheme(theme);
+  }
+
+  function autoTheme() {
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '';
+    this.setTheme(systemTheme);
   }
 
   function defaultTheme() {

app/portainer/views/logout/logoutController.js

@@ -2,7 +2,7 @@ import angular from 'angular';
 
 class LogoutController {
   /* @ngInject */
-  constructor($async, $state, $transition$, $window, Authentication, StateManager, Notifications, LocalStorage, SettingsService, ThemeManager) {
+  constructor($async, $state, $transition$, $window, Authentication, StateManager, Notifications, LocalStorage, SettingsService) {
     this.$async = $async;
     this.$state = $state;
     this.$transition$ = $transition$;
@@ -13,7 +13,6 @@ class LogoutController {
     this.Notifications = Notifications;
     this.LocalStorage = LocalStorage;
     this.SettingsService = SettingsService;
-    this.ThemeManager = ThemeManager;
 
     this.logo = this.StateManager.getState().application.logo;
     this.logoutAsync = this.logoutAsync.bind(this);
@@ -29,8 +28,6 @@ class LogoutController {
     const performApiLogout = this.$transition$.params().performApiLogout;
     const settings = await this.SettingsService.publicSettings();
 
-    this.ThemeManager.defaultTheme();
-
     try {
       await this.Authentication.logout(performApiLogout);
     } finally {

app/portainer/views/main/mainController.js

@@ -4,7 +4,7 @@ angular.module('portainer.app').controller('MainController', [
   'StateManager',
   'EndpointProvider',
   'ThemeManager',
-  function ($scope, LocalStorage, StateManager, EndpointProvider) {
+  function ($scope, LocalStorage, StateManager, EndpointProvider, ThemeManager) {
     /**
      * Sidebar Toggle & Cookie Control
      */
@@ -33,5 +33,7 @@ angular.module('portainer.app').controller('MainController', [
     window.onresize = function () {
       $scope.$apply();
     };
+
+    ThemeManager.autoTheme();
   },
 ]);