A carefully crafted theme for Home Assistant based on Pantone 17-5641 TCX "Emerald" (#009B77), featuring both light and dark modes with full WCAG AA+ accessibility compliance.
- Dual mode: Light and dark variants, switchable from user profile
- WCAG AA+ compliant: All 76 text/icon/UI contrast pairs validated ≥ 3:1 (UI) / ≥ 4.5:1 (text)
- Complete coverage: 137 variables per mode — cards, sidebar, header, switches, sliders, inputs, dialogs, code editor, energy dashboard, and all semantic entity states
- 2026.04 ready: Includes
ha-color-form-backgroundsemantic variables,ha-view-sections-row-gap, and Material Design 3 system color tokens - Shoelace compatible: Includes
sl-color-primary-600,ha-tab-active-text-color, and related variables for proper tab rendering (2025.5+) - No dependencies: Works standalone, no card-mod required
- Energy dashboard colors: Tuned for readability on both modes
| Role | Light Mode | Dark Mode |
|---|---|---|
| Primary | #007F61 Emerald |
#39F8CC Mint |
| Accent | #9C3116 Coral Rose |
#ED7A5E Salmon |
| Background | #F5FAF8 Frost |
#0A1A16 Deep Forest |
| Card | #FFFFFF White |
#122420 Canopy |
| Text | #1A2E28 Ink |
#E8F2EE Mist |
| Header | #007F61 Emerald |
#0E1E1A Dark Moss |
| Sidebar | #F5FAF8 Frost |
#071512 Midnight Forest |
- Open HACS → ⋮ menu → Custom repositories
- Paste the URL of this repository
- Select category: Theme
- Click Add, then install
- Restart Home Assistant
- Go to your Profile → select Emerald
- Copy
themes/emerald.yamlinto your HAconfig/themes/folder - Ensure your
configuration.yamlcontains:frontend: themes: !include_dir_merge_named themes
- Restart Home Assistant
- Home Assistant: 2026.04+
- Frontend: Shoelace components (2025.5+) and Material Design 3 tokens
- Companion Apps: iOS and Android (auto-syncs theme)
MIT