🎨 Home Assistant Tailwind CSS Themes

❓ What is this?

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+).

🖼 Preview

☀️ Light

🌑 Dark

View screenshots individually in the screenshots folder of this repository.

📋 Copy

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.

⚠️ Be aware that dark theme variants are dependent on their light theme variant, so for example you cannot delete tailwind-light-orange and keep tailwind-dark-orange unless you move the orange_theme block to where it's referenced (<<: *orange_theme).

🛠 Usage

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.

😵 Help! I have a question

Create an issue and I'll try to help.

😡 Fix! There is something that needs improvement

Create an issue or pull request and I'll try to fix.

📄 License

MIT

This README was generated with ❤️ by readme-md-generator

Repository preview image generated with GitHub Social Preview