Dark theme

[jwold]

Feature description

Material offers guidelines for creating dark and light theme UI. This is worth exploring for a future iteration.

https://material.io/design/color/dark-theme.html#

• Examples: https://css-tricks.com/dark-modes-with-css/
• Offer a dark/light mode toggle
• Joshua to mock up what this looks like
• Review guidance on applying https://material.io/design/color/dark-theme.html

Conditional:

• Theme must be installed

Notes

• Surface, and on-surface are two additional colors that the dark mode would need to reveal: https://d.pr/i/Dj7Y1Y
• When you turn on dark mode, the surface colors will change to their respective opposites, and no actual user facing controls will be needed.
• Border outline looks at on-surface and creates a relevant border as a result
• We need to look at how other components are impacted. @ravichdev suggested he could compile a list.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

Implementation brief

QA testing instructions

Demo

Changelog entry

[jwold]

• Postpone for a little bit, but hopefully in Q3-Q4 we can revisit. May be Phase 2.
• Media query selector is how it would work
• Two options: individually chose dark each time, or default to dark/light and every design style follows
• MDC web isn't ready yet. Nice if we had that ready before we implement it.

[jwold]

Note: This would be something we need to explore manually, since the Material web components do not currently contain the ability to create a dark mode style. However, there is guidance on dark mode, so we can follow that guidance and propose what this could look like using the Material docs.