diff --git a/scripts/apps/users/directives/UserPreferencesDirective.ts b/scripts/apps/users/directives/UserPreferencesDirective.ts
index f1a1204c7e..69d097db25 100644
--- a/scripts/apps/users/directives/UserPreferencesDirective.ts
+++ b/scripts/apps/users/directives/UserPreferencesDirective.ts
@@ -48,7 +48,7 @@ export function UserPreferencesDirective(
             const NOTIFICATIONS_KEY = 'notifications';
 
             scope.activeNavigation = null;
-            scope.activeTheme = localStorage.getItem('theme');
+            scope.activeTheme = '';
             const registeredNotifications: IExtensionActivationResult['contributions']['notifications'] = (() => {
                 const result = {};
 
@@ -81,6 +81,14 @@ export function UserPreferencesDirective(
                 scope.$applyAsync();
             };
 
+            scope.toggleUiTheme = function(theme) {
+                scope.activeTheme = theme;
+                if (orig['application:theme'] == null) {
+                    orig['application:theme'] = {};
+                }
+                orig['application:theme']['theme'] = theme;
+            };
+
             scope.toggleEmailNotification = function(notificationId: string) {
                 scope.preferences[NOTIFICATIONS_KEY][notificationId].email =
                     !scope.preferences[NOTIFICATIONS_KEY][notificationId].email;
@@ -149,7 +157,6 @@ export function UserPreferencesDirective(
                             preferencesService.desktopNotification.requestPermission();
                         }
 
-                        localStorage.setItem('theme', scope.activeTheme);
                         body.attr('data-theme', scope.activeTheme);
                         notify.success(gettext('User preferences saved'));
                         scope.cancel();
@@ -281,6 +288,7 @@ export function UserPreferencesDirective(
                     }
                 });
 
+                scope.activeTheme = data['application:theme']?.['theme'] ?? 'light-ui';
                 // metadata service initialization is needed if its
                 // values object is undefined or any of the needed
                 // data buckets are missing in it
diff --git a/scripts/apps/users/views/user-preferences.html b/scripts/apps/users/views/user-preferences.html
index 6ec1f938e0..78eea376d8 100644
--- a/scripts/apps/users/views/user-preferences.html
+++ b/scripts/apps/users/views/user-preferences.html
@@ -308,7 +308,7 @@ <h4 class="sd-heading sd-text-align--left sd-text--sans sd-heading--h4 sd-margin
                                     </svg>
                                 </figure>
                                 <div class="sd-theme-selector__item-action">
-                                    <input type="radio" class="sd-theme-selector__input" value="light-ui" ng-model="activeTheme" id="id390" tabindex="0" name="id39">
+                                    <input ng-change="toggleUiTheme('light-ui')" type="radio" class="sd-theme-selector__input" value="light-ui" ng-model="activeTheme" id="id390" tabindex="0" name="id39">
                                     <span class="sd-radio-new"></span>
                                     <label class="sd-theme-selector__label" for="id390">Light</label>
                                     <span class="sd-theme-selector__label-text" aria-hidden="true">Light</span>
@@ -366,7 +366,7 @@ <h4 class="sd-heading sd-text-align--left sd-text--sans sd-heading--h4 sd-margin
                                     </svg>
                                 </figure>
                                 <div class="sd-theme-selector__item-action">
-                                    <input type="radio" class="sd-theme-selector__input" value="dark-ui" ng-model="activeTheme" id="id391" tabindex="0" name="id39">
+                                    <input ng-change="toggleUiTheme('dark-ui')" type="radio" class="sd-theme-selector__input" value="dark-ui" ng-model="activeTheme" id="id391" tabindex="0" name="id39">
                                     <span class="sd-radio-new"></span>
                                     <label class="sd-theme-selector__label" for="id391">Dark</label>
                                     <span class="sd-theme-selector__label-text" aria-hidden="true">Dark</span>
diff --git a/scripts/core/menu/menu.ts b/scripts/core/menu/menu.ts
index 9dcd4930cd..7eaf679098 100644
--- a/scripts/core/menu/menu.ts
+++ b/scripts/core/menu/menu.ts
@@ -164,6 +164,7 @@ angular.module('superdesk.core.menu', [
         'lodash',
         'workspaceMenu',
         '$location',
+        'preferencesService',
         function(
             $route,
             superdesk,
@@ -174,6 +175,7 @@ angular.module('superdesk.core.menu', [
             _,
             workspaceMenu,
             $location,
+            preferencesService,
         ) {
             return {
                 require: '^sdSuperdeskView',
@@ -184,13 +186,19 @@ angular.module('superdesk.core.menu', [
                     scope.currentRoute = null;
                     scope.flags = ctrl.flags;
                     scope.menu = [];
-                    scope.theme = localStorage.getItem('theme') || '';
+                    scope.theme = 'light-ui';
                     scope.isTestEnvironment = appConfig.isTestEnvironment;
                     scope.environmentName = appConfig.environmentName;
                     scope.workspaceConfig = appConfig.workspace || {}; // it's used in workspaceMenu.filter
 
-                    // set theme
-                    body.attr('data-theme', scope.theme);
+                    preferencesService.get().then((result) => {
+                        scope.theme = result['application:theme']?.['theme'] != null
+                            ? result['application:theme']['theme']
+                            : 'light-ui';
+
+                        // set theme
+                        body.attr('data-theme', scope.theme);
+                    });
 
                     // menu items and groups - start
                     let group = null;