Enhance theme selection with support for custom themes

[cstns]

Description

Allows setting custom themes in the instance settings page.

Related Issue(s)

closes #6513

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production
• Link to Changelog Entry PR, or note why one is not needed.

Labels

• Includes a DB migration? -> add the area:migration label

[cstns]

@knolleary, I altered the UI to accept custom theme names and verified that the entry is stored in the database. Not sure how to test that a custom theme is applied though, I'm still seeing the Flowfuse dark theme loaded in the editor. How do i add a custom theme, do I create it from scratch or do I download one?

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.45%. Comparing base (6b2a871) to head (f2e3ed1).
⚠️ Report is 7 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6539   +/-   ##
=======================================
  Coverage   76.45%   76.45%           
=======================================
  Files         397      397           
  Lines       20011    20011           
  Branches     4812     4812           
=======================================
  Hits        15300    15300           
  Misses       4711     4711           

Flag	Coverage Δ
backend	76.45% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[knolleary]

@cstns I've tested it locally and it is working. You can install additional themes by installing this module via the palette manager - https://flows.nodered.org/node/@node-red-contrib-themes/theme-collection

It contains lots of community-created themes - see the readme for the full list of theme names.

One UX issue; as its a combo-box, with the custom theme name typed in, it filters the list so none of the built-in options are shown:

You have to clear the text to see the other entries.

We can live with this, but any quick wins come to mind?

[cstns]

The headless-ui combo-box is the only selector that allows adding custom values out of the box. The list should contain all three options (default ones + custom one if selected) when revisiting the page.

The headles-ui's menu component could be altered in a way that would both list the default options and allow setting a custom one if we are planning on enhancing this selector.

[knolleary]

@cstns revisiting it, I can see this filtering only happens if you've just typed in. If you reload the page, all entries are visible to select. I think that's good enough.