Add Light & Dark Theme

[cgjgh]

Description

Adds light and dark mode to D2.

• Colors are configurable in NodeRED editor.
• Mode can be toggled from D2 nav sidebar.
• Last setting is saved to and loaded from cache on reloads.
• Adds preview of UI while editing theme in NodeRED editor.

Toggling theme

ScreenRecording_11-11-2024.21-43-11_1.MP4

Theme color config

Screen.Recording.2024-11-12.073931.mp4

Any ideas on how to improve theme color palette display? Or just leave out dark colors maybe...

UI Preview While Editing

(Might become obsolete with WYSIWYG editor)

Screen.Recording.2024-11-17.153557.mp4

Related Issue(s)

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

Labels

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