Skip to content

Allow palette.theme to be set via theme plugin and include icons#5500

Merged
knolleary merged 1 commit intomasterfrom
5487-support-palette-theme-plugin
Feb 25, 2026
Merged

Allow palette.theme to be set via theme plugin and include icons#5500
knolleary merged 1 commit intomasterfrom
5487-support-palette-theme-plugin

Conversation

@knolleary
Copy link
Copy Markdown
Member

@knolleary knolleary commented Feb 25, 2026

Closes #5487

This PR adds support for setting the palette.theme setting via a theme plugin. It also extends support for this setting to provide custom icons to nodes.

The docs need updating to provide full details, but here are my working notes.

editorTheme.palette.theme is a way for custom colors to be specific for individual nodes identified by type or category (using a regex to match multiple where needed).

    palette: {
        theme: [ // Override node colours - rules test against category/type by RegExp.
            { category: ".*", type: ".*", color: "#f0f" }
        ]
    },
  • the rules are evaluated in order - the first matching rule applies. This allows for a catch-all rule to be at the end of the list
  • each rule can now include an icon property to set the icon of any matching nodes - see notes below on how icons are provided.
  • when looking for an override for a node's icon, it will ignore rules that don't include an 'icon' property - and the same is true for 'color'. This means you can separate out color/icon rules, or combine them - lots of flexibility.

Theme Plugins

A theme plugin can now include this setting, meaning the settings.js file does not need to be touched. It also means the plugin can bundle any icons it wants to apply in its own package - making distribution much easier.

The plugin .js file (that registers itself) should contain the palette setting:

module.exports = function (RED) {

    RED.plugins.registerPlugin('test-theme-plugin', {
        type: 'node-red-theme',
        // scripts: [],
        // css: [ theme.css' ],
        palette: {
            theme: [
                { type: 'inject', color: '#e4d725' },
                { type: 'inject', icon: 'banana.png' },
                { type: '.*', color: 'red' }
            ]
        }
    })
}

In the same directory as the plugins .js file should be an icons directory. This should contain (with no further sub-directories iirc) the icons the plugin provides.

├── icons
│   └── banana.png
├── package.json
└── theme.js

The icon can then be referenced by name without including the icons part of the path.

To enable a theme plugin, edit settings.js and set editorTheme.theme to the name of the theme - test-theme-plugin in the example above (the first arg passed to the registerPlugin call).

Useful debug tip: if icons aren't loading as expected, in the browser console, run RED.nodes.getIconSets(); - this will return an object listing all of the custom icons known to the editor, organised by which module is providing them. Check the theme plugin shows up and lists the icons you think it should.

@knolleary knolleary merged commit f049a33 into master Feb 25, 2026
5 checks passed
@knolleary knolleary deleted the 5487-support-palette-theme-plugin branch February 25, 2026 16:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow themes to override colour and icon of specific nodes

1 participant