A Home Assistant frontend plugin that adds CSS styling capabilities to Lovelace cards and UI elements.
Card-mod is a Home Assistant frontend plugin that allows users to apply custom CSS styles to Lovelace cards and UI elements. It solves the problem of limited theming options in Home Assistant by providing granular control over the appearance of dashboards, cards, entities, and badges through direct CSS injection and shadow DOM navigation.
Home Assistant users and dashboard designers who want to customize their Lovelace interface beyond standard themes, particularly those comfortable with CSS and looking for pixel-perfect control over their smart home dashboard appearance.
Developers choose card-mod because it provides unmatched styling flexibility for Home Assistant's frontend, with features like shadow DOM traversal, template variables, and per-entity styling that aren't available in standard theming systems.
🔹 Add CSS styles to (almost) any lovelace card
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Allows direct CSS injection into any Lovelace card for precise control over colors, backgrounds, and borders, overcoming standard theming limits.
Uses a special $ selector syntax to traverse shadow roots, enabling styling of internal elements in Home Assistant components that are otherwise inaccessible.
Integrates Jinja2 templates with access to Home Assistant variables like config, user, and browser, allowing dynamic styles based on real-time data.
Can be installed as a frontend module for faster styling and compatibility with non-Lovelace panels, as highlighted in the performance improvements section.
Requires manual configuration of frontend modules and resource URLs, with critical warnings about duplication and the need for restarts, increasing setup overhead.
Tightly tied to Home Assistant versions, as shown in the compatibility table, risking breaking changes and requiring users to track updates closely.
Navigating shadow DOM and using the $ syntax can be non-intuitive, often requiring browser console inspection and debug modes to troubleshoot styling issues.