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

[joepavitt]

I need some time to think about this one, so won't put it in with this current release (sorry for the delay in getting to this in the first place)

I understand the value in having a dark/light theme, but I'm thinking, as a first point of call, we could just offer to two themes as default in the configuration of the Dashboard, rather than expose a light/dark switch more in the side navigation directly. The positioning of the toggle is also tricky, I have dashboards, and have seen many others that have a full sidebar of pages, so this will float above a page and get in the way of navigation - that said, I can't necessarily think of better positioning.

[cgjgh]

@joepavitt No problem, take your time. I realize there would be significant changes, and some clean-up might be required.
I also wasn't too sure about the light/dark switch positioning. On the subject, what are your thoughts on using media query (CSS) to switch themes based on system theme settings?

Alternatively, we could use the JS approach:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

// watch for changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});