Implement theme settings in user preferences

- Add theme setting in user preferences panel with three options: Light theme, Dark theme, Automatic (follow system)
- Default theme is now Dark theme
- Fix theme toggle button icon rendering by using solid Font Awesome icons (fa-moon and fa-sun instead of fa-moon-o and fa-sun-o)
- Update setSelected function to properly handle onchange callbacks for local settings
- Ensure theme preference dropdown defaults correctly for new users

Co-authored-by: Dimitrie Hoekstra <[email protected]>

Author: github-actions[bot]

packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js

@@ -70,7 +70,7 @@ RED.deploy = (function() {
 
             // Add dark mode toggle button
             $('<li><a id="red-ui-header-button-theme-toggle" class="button" href="#" title="Toggle Theme">'+
-              '<i class="fa fa-moon-o"></i>'+
+              '<i class="fa fa-moon"></i>'+
               '</a></li>').prependTo(".red-ui-header-toolbar");
             const mainMenuItems = [
                     {id:"deploymenu-item-full",toggle:"deploy-type",icon:"red/images/deploy-full.svg",label:RED._("deploy.full"),sublabel:RED._("deploy.fullDesc"),selected: true, onselect:function(s) { if(s){changeDeploymentType("full")}}},
@@ -751,8 +751,8 @@ RED.deploy = (function() {
 
     function updateThemeIcon(theme) {
         const toggleIcon = $('#red-ui-header-button-theme-toggle i');
-        toggleIcon.removeClass('fa-moon-o fa-sun-o');
-        toggleIcon.addClass(theme === 'dark' ? 'fa-sun-o' : 'fa-moon-o');
+        toggleIcon.removeClass('fa-moon fa-sun');
+        toggleIcon.addClass(theme === 'dark' ? 'fa-sun' : 'fa-moon');
     }
 
     function toggleTheme() {

packages/node_modules/@node-red/editor-client/src/js/ui/userSettings.js

@@ -123,10 +123,11 @@ RED.userSettings = (function() {
                     setting:"nodeRedTheme",
                     local: true,
                     label:"Theme",
+                    default: 'dark',
                     options:function(done){
                         done([
-                            {val:'light',text:'Light'},
-                            {val:'dark',text:'Dark'},
+                            {val:'light',text:'Light theme'},
+                            {val:'dark',text:'Dark theme'},
                             {val:'auto',text:'Automatic (follow system)'}
                         ])
                     },
@@ -199,6 +200,9 @@ RED.userSettings = (function() {
                 var initialState;
                 if (opt.local) {
                     initialState = localStorage.getItem(opt.setting);
+                    if (initialState === null && opt.hasOwnProperty('default')) {
+                        initialState = opt.default;
+                    }
                 } else if (opt.global) {
                     initialState = RED.settings.get(opt.setting);
                 } else {
@@ -246,6 +250,14 @@ RED.userSettings = (function() {
         var opt = allSettings[id];
         if (opt.local) {
             localStorage.setItem(opt.setting,value);
+            // Call onchange callback for local settings too
+            var callback = opt.onchange;
+            if (typeof callback === 'string') {
+                callback = RED.actions.get(callback);
+            }
+            if (callback) {
+                callback.call(opt,value);
+            }
         } else if (opt.global) {
             RED.settings.set(opt.setting, value)
         } else {