Add Light & Dark Theme - Githubissues

FlowFuse / node-red-dashboard

https://dashboard.flowfuse.com

Apache License 2.0

206 stars 49 forks source link

Add Light & Dark Theme #1461

Open cgjgh opened 1 week ago

cgjgh commented 1 week ago

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

https://github.com/user-attachments/assets/3416ae2a-e9d1-420a-87dd-d71daf2508f9

Theme color config

https://github.com/user-attachments/assets/6b8647a9-1975-44b4-9a22-8fdf9325ab2c

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

Screenshot 2024-11-12 074234

UI Preview While Editing

(Might become obsolete with WYSIWYG editor)

https://github.com/user-attachments/assets/5fd278b6-21e6-49f3-a8eb-9da37dcadb68

Related Issue(s)

Checklist

[X] 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