Dark mode

[pierrephz]

Summary

Introduce the dark mode feature.

Current Situation

Currently we only have a light mode.

Why do we need this? Who uses it, and when?

Like in a lot of products and web apps, we should be able to switch themes to increase accessibility.

Proposed Implementation

Add theme switcher in the settings:

1 - Add a Theme setting under User settings
2 - Choose between Light, Dark and System mode
3 - Save or Discard

Add dark mode tokens

Contributing

• I can help by doing more research.
• I can help by implementing the feature after the proposal above is approved.
• I can help by testing the feature before it's released.

Validation

• The feature is tested in a staging environment.
• The feature is documented in The Things Stack Documentation

Code of Conduct

• I agree to follow TTN's Community Code of Conduct.

[KrishnaIyer]

This looks great and ok for me. As discussed in the tech sync, this will require some update to the tokens in the process.

[pierrephz]

here are the assets to be able to build the settings page:

---

Download .zip
console-theme-settings-assets.zip

[pierrephz]

List of missing tokens:

• TTS logo (Darya)
• Regular modals (Pierre)
• Search modal (Pierre - Darya)
• Toggle element (not in the sidebar) (Pierre)
• Disable link on a panel (Darya)
• Dropdown menu (Pierre)
• Tooltip (Pierre)
• Icon background in the sidebar (Darya)
• Hover state for the pagination number (Darya)
• Selector in the pagination, and some inputs (Darya)
• LoRa | Cloud logo (Pierre - Darya)
• Error button (Pierre)
• Primary button (Pierre) Missing chevron
• Secondary button (Pierre)
• Tertiary button (Pierre)
• Disable button (Pierre)
• Notification banner background (Pierre - Darya)
• Decoded payload (Darya)