This is a collection of 10 colored themes with light and dark variants, built from the Tailwind CSS color palette, for Home Assistant (Core) (0.108+).
| Red | Orange | Yellow | Green | Teal | Blue | Indigo | Purple | Pink | Gray |
View screenshots individually in the screenshots folder of this repository.
Copy the entire contents of themes.yaml into somewhere Home Assistant (Core) reads your configuration.
This means you could give it its own file in your packages directory, or you could put it directly in the root configuration.yaml file, or whatever is most appropriate for your setup.
Restart Home Assistant (Core) and verify that the tailwind-light-blue and tailwind-dark-blue themes are correctly usable. You can then remove any other theme you don't want to use, as long as these two stay.
tailwind-light-orange and keep tailwind-dark-orange unless you move the orange_theme block to where it's referenced (<<: *orange_theme).
You can access the Tailwind color variables like var(--red-500) wherever a color is expected in Lovelace, such as in CSS style blocks from card-mod.
These themes are all built exclusively using a new color palette that is planned for the next major Tailwind CSS release. For this reason, the palette currently listed in the official documentation is referred to as classic in this set of themes and can be referenced like var(--classic-purple-300).
You can customize the font everywhere with primary-font-family in the &fonts block.
Consider using the frontend.set_theme service to set your preferred theme for everyone. You can also write automations to change the theme to a dark variant at night, for example.
Create an issue and I'll try to help.
Create an issue or pull request and I'll try to fix.
MIT
This README was generated with ❤️ by readme-md-generator
Repository preview image generated with GitHub Social Preview