Changing a theme color changes all the themes color

[mereshow]

Current Behavior

If you create a new theme, with a new name, and change a color of one of the themes, it changes the corresponding color on all the themes.

Expected Behavior

Each theme should be independent and changing a theme color should only be applied to that theme.

Steps To Reproduce

Go to: Dashboard 2.0 > Theming, clic on "+ Theme". Change a color on one of the themes and save it.

Environment

• Dashboard version: 1.11.1
• Node-RED version: 3.1.10
• Node.js version: v16.20.2
• npm version: 8.19.4
• Platform/OS: NodeRed on Docker (Linux 5.15.0-112-generic x64 LE)
• Browser: Chrome

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

[joepavitt]

Can you grab a screen recording of this please, I'm not able to reproduce locally, it works okay for me, note that none of the other themes are modified:

Screen.Recording.2024-06-13.at.18.04.14.mov

[mereshow]

In my case it happens only if the themes are not associated to any page (and it only affects those themes).

Screencast.from.13-06-24.20.31.03.webm

[joepavitt]

Ooh funky - good find. Thanks, will make sure that's addressed.

[n-lark]

ui-theme cross-theme edits (#966)

Editing a colour on one theme no longer changes it on the other themes.

PR: #2190 (comment)

How it works

New theme nodes all share one default colors/sizes object, so the old in-place oneditsave leaked edits to every theme. The fix builds fresh objects per save, so each keeps its own.

Also: new theme names showed a raw i18n key

The "+ Theme" button used c_('label.theme'), which does not exist (the key is themes.theme), so new themes were named the literal ui-base.label.theme. Fixed the key and added the missing themes.theme to the Japanese locale.

Test plan

• Creating a second theme names it "Theme 2", not "ui-base.label.theme 2".
• Two themes, neither assigned to a page.
• Edit theme A's colour, save + Deploy.
• Theme B is unchanged.
• Same for a size (e.g. page padding): editing theme A leaves theme B's sizes untouched, and the value still saves with its px suffix.
• A page-assigned theme still edits only itself.
• Existing themes keep their values after upgrade.