💡 Material Lights Card
🌟 Overview
The material-lights-card is a sleek, Google-style control panel for Home Assistant. It provides a simple and elegant way to control entities globally or per area with a single tap, adapting its appearance dynamically to your theme.
☀️ Light Mode | 🌙 Dark Mode |
🎨 Features
- 📱 Google-inspired design: Soft colors and modern rounded buttons.
- 💡 Smart Toggle: Instantly turn lights on or off.
- 🌓 Adaptive Theme: Automatically adjusts colors for light and dark modes.
- ⚡ Real-time Updates: Reflects the current state of your lights immediately.
🔧 Requirements
To use this card in the Free version, the following custom components are required:
📌 Card Mod
📌 Button Card
- Fully supports entity states, custom templates, and CSS-style controls.
- Each dashboard item uses this card with custom styling and icons.
TIP
💡 HACS installation is recommended to keep components up to date.
✨ Editor Preview
When adding a new material-lights-card via the UI editor, you will see a pre-configured preview.
The preview defaults to:
- On Text: "Lights On"
- Off Text: "Lights Off"
Note: As soon as you modify any setting in the editor, the preview defaults are cleared, allowing you to fully customize the card.
🛠️ Configuration Options
| Option | Type | Description | Default | Required |
|---|---|---|---|---|
type | string | Must be custom:material-lights-card. | - | ✅ Yes |
on_text | string | Text displayed on the "Turn On" button. | Lights On | ❌ No |
off_text | string | Text displayed on the "Turn Off" button. | Lights Off | ❌ No |
control_area | boolean | Restrict control to a specific area instead of all lights. | false | ❌ No |
area_id | string | The ID of the area to control (requires control_area: true). | - | ❌ No |
🚀 Usage Examples
1. Global Light Control
Control all lights in your Home Assistant instance.
type: custom:material-lights-card
on_text: "All On"
off_text: "All Off"2. Area Specific Control
Control only the lights in the Living Room.
type: custom:material-lights-card
control_area: true
area_id: living_room
on_text: "Living Room On"
off_text: "Living Room Off"🎨 Extended Customization
⚠️ LICENSE
Only for PRO and ULTIMATE users, get your licence now 🚀.
🚀 Pro & Ultimate Features
The Paid (PRO/ULTIMATE) version of material-lights-card has been completely rewritten from scratch in pure native LitElement and Material 3 Expressive design system:
- 🌐 Multi-Domain Entity Support: Control any supported Home Assistant entity domain (
light,switch,automation,button,fan,cover,input_boolean) globally or targeted by area. - ⚡ Zero External Template Dependencies: Eliminates
button-cardand YAML template wrappers (material-lights-template.ts), delivering maximum rendering performance and real-time state reactivity. - 👆 Tactile
pression-clickMicro-Interactions: Features expressive tactile press animations (scale(0.96)) and physical haptic vibration pulses (haptic(this, 'light')) on touch. - 🌓 Domain-Aware Adaptive Colors: Dedicated warm amber palette for lights (
#ffe083/#745b00in light mode,#50472a/#fae093/#fce08cin dark mode) and reactive Material 3 Primary system container tokens for switches, automations, and other domains. - ↔️ Central Button Gap: Ergonomic central spacing gap between the ON and OFF buttons matching Home Assistant's stack card gap (
--horizontal-stack-card-gap, 8px). - 🛠️ Modern Visual Editor (
ha-form): Interactive domain dropdown, collapsible expansion panels with domain-aware dynamic placeholders, reactive area picker, and clean YAML serialization.
🛠️ Configuration Options
| Option | Type | Description | Default | Required |
|---|---|---|---|---|
type | string | Must be custom:material-lights-card. | - | ✅ Yes |
domain | string | Entity domain to control (light, switch, automation, button, fan, cover, input_boolean). | light | ❌ No |
on_text | string | Text displayed on the "Turn On" / "Activate" button. | Contextual (e.g. Lights on, Switches on) | ❌ No |
off_text | string | Text displayed on the "Turn Off" / "Deactivate" button. | Contextual (e.g. Lights off, Switches off) | ❌ No |
control_area | boolean | Restrict control to a specific area instead of all entities. | false | ❌ No |
area_id | string | The ID of the area to control (requires control_area: true). | - | ❌ No |
🚀 Usage Examples
1. Global Light Control
Control all lights in your Home Assistant instance with dedicated amber active styling.
type: custom:material-lights-card
on_text: "All On"
off_text: "All Off"2. Area Specific Light Control
Control only the lights in the Living Room.
type: custom:material-lights-card
control_area: true
area_id: living_room
on_text: "Living Room On"
off_text: "Living Room Off"3. Switches Control (Area or Global)
Turn all switches in the office on or off with Material 3 Primary system colors.
type: custom:material-lights-card
domain: switch
control_area: true
area_id: office
on_text: "Switches On"
off_text: "Switches Off"4. Automations Control
Enable or disable all automations globally.
type: custom:material-lights-card
domain: automation
on_text: "Enable All"
off_text: "Disable All"5. Covers Control (Open / Close All)
Open or close all covers and blinds in a specific room.
type: custom:material-lights-card
domain: cover
control_area: true
area_id: living_room
on_text: "Open All"
off_text: "Close All"🎨 Extended Customization
⚠️ LICENSE
Only for PRO and ULTIMATE users, get your licence now 🚀.
This card has its own native version of Card-Mod. You can inject custom CSS to override any style or create unique animations.
💡 ADVANCED STYLING
👉 Check out the Styling Guide.