Time to add themes!

[KTibow]

Card-mod has officially added support for themes: https://github.com/thomasloven/lovelace-card-mod/releases/tag/2.0.0 I haven't tried this out, but N-l1 has mentioned they wanted to eventually add a theme that can be used to globally style cards.

[qiz-li]

Awesome!! Been waiting for this forever! Hopefully I can get something working this weekend, thanks @KTibow!

[KTibow]

I've started working on a theme, try creating a new dashboard under config and adding this to your themes and choosing it:

Expand

```yaml # Thanks @JuanMTech for the original one, and thanks @thomasloven for some good card-mod theming stuff. Google Light Theme: card-mod-theme: "Google Light Theme" # Header: app-header-background-color: "#f3f5f7" app-header-text-color: "#000" # Main Interface Colors primary-color: "#5F9BEA" light-primary-color: var(--primary-color) primary-background-color: "#f3f5f7" secondary-background-color: var(--primary-background-color) divider-color: var(--primary-background-color) # Text primary-text-color: "#4A4A4A" secondary-text-color: "#5F6267" text-primary-color: "#FFFFFF" disabled-text-color: "#717171" # Sidebar Menu sidebar-icon-color: "#555" sidebar-text-color: "#555" sidebar-background-color: "#f3f5f7" sidebar-selected-background-color: var(--primary-background-color) sidebar-selected-icon-color: "#5F9BEA" sidebar-selected-text-color: var(--sidebar-selected-icon-color)) # States and Badges state-icon-color: "#5F6267" state-icon-active-color: "#5F9BEA" state-icon-unavailable-color: var(--disabled-text-color) # Sliders paper-slider-knob-color: "#5F9Bd3" paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-knob-color) paper-slider-active-color: var(--paper-slider-knob-color) paper-slider-secondary-color: var(--light-primary-color) # Labels label-badge-background-color: "#F8FAF9" label-badge-text-color: "#4D5575" label-badge-red: "#C7484C" label-badge-green: "#6DC071" label-badge-blue: "#51AAD1" label-badge-yellow: "#D9B757" label-badge-gray: "#5F6267" # Cards ha-card-border-radius: '18px' ha-card-box-shadow: 1px 1px 5px 0px rgb(220, 220, 220) paper-card-background-color: "rgba(255, 255, 255, 0.9)" paper-listbox-background-color: "rgba(255, 255, 255, 0.9)" # Switches switch-checked-button-color: "#5F9Bd3" switch-checked-track-color: "#75a2d3" switch-unchecked-button-color: "#5F6267" switch-unchecked-track-color: "#888b91" # Toggles paper-toggle-button-checked-button-color: var(--switch-checked-button-color) paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) # Table table-row-background-color: var(--primary-background-color) table-row-alternative-background-color: var(--secondary-background-color) data-table-background-color: var(--primary-background-color) # Dropdowns material-background-color: var(--paper-card-background-color) material-secondary-background-color: var(--primary-background-color) mdc-theme-surface: var(--paper-card-background-color) # Card mod theme-red: firebrick theme-green: forestgreen theme-blue: deepskyblue ha-label-badge-title-font-size: 1em card-mod-view: | #badges { width: 80%; margin: 8px auto !important; } #columns { flex-direction: column; margin: 0 auto; max-width: 500px; } card-mod-badge-yaml: | .: | :host { border-radius: 5px; box-shadow: var(--theme-box-shadow); padding: 11px 8px; margin: 11px 14px; display: inline-block; --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); {% elif is_state(config.entity, 'on') %} var(--theme-green); {% elif is_state(config.entity, 'open') %} var(--theme-green); {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); {% elif is_state(config.entity, 'off') %} var(--theme-red); {% elif is_state(config.entity, 'closed') %} var(--theme-red); {% elif is_state(config.entity, 'locked') %} var(--theme-red); {% else %} var(--theme-blue); {% endif %} --label-badge-red: teal; margin-bottom: 24px; box-shadow: -5px -5px 5px 0 rgba(255,255,255,.5), 5px 5px 5px 0 rgba(0,0,0,.03); } ha-state-label-badge: $: ha-label-badge: $: | .label-badge { background: none !important; } .title { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } card-mod-more-info-yaml: | $: | .mdc-dialog { backdrop-filter: blur(2.5px); background: rgba(255, 255, 255, 0.35); } .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { background: rgba(255, 255, 255, 0.8); border-radius: var(--ha-card-border-radius); } ha-header-bar: $: | .mdc-top-app-bar { background: none !important; } ```

[KTibow]

Okay, I've added a lot more. Do you think this is good enough @N-l1?

Expand

```yaml # Thanks @JuanMTech! I've slightly modified their themes a little. Google Light Theme: card-mod-theme: "Google Light Theme" # Header: app-header-background-color: "#f3f5f7" app-header-text-color: "#000" # Main Interface Colors primary-color: "#5F9BEA" light-primary-color: var(--primary-color) primary-background-color: "#f3f5f7" secondary-background-color: var(--primary-background-color) divider-color: var(--primary-background-color) # Text primary-text-color: "#4A4A4A" secondary-text-color: "#5F6267" text-primary-color: "#FFFFFF" disabled-text-color: "#717171" # Sidebar Menu sidebar-icon-color: "#555" sidebar-text-color: "#555" sidebar-background-color: "#f3f5f7" sidebar-selected-background-color: var(--primary-background-color) sidebar-selected-icon-color: "#5F9BEA" sidebar-selected-text-color: var(--sidebar-selected-icon-color)) # States and Badges state-icon-color: "#5F6267" state-icon-active-color: "#5F9BEA" state-icon-unavailable-color: var(--disabled-text-color) # Sliders paper-slider-knob-color: "#5F9Bd3" paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-knob-color) paper-slider-active-color: var(--paper-slider-knob-color) paper-slider-secondary-color: var(--light-primary-color) # Labels label-badge-background-color: "#F8FAF9" label-badge-text-color: "#4D5575" label-badge-red: "#C7484C" label-badge-green: "#6DC071" label-badge-blue: "#51AAD1" label-badge-yellow: "#D9B757" label-badge-gray: "#5F6267" # Cards ha-card-border-radius: '18px' ha-card-box-shadow: 1px 1px 5px 0px rgb(220, 220, 220) paper-card-background-color: "rgba(255, 255, 255, 0.9)" paper-listbox-background-color: "rgba(255, 255, 255, 0.9)" # Switches switch-checked-button-color: "#5F9Bd3" switch-checked-track-color: "#75a2d3" switch-unchecked-button-color: "#5F6267" switch-unchecked-track-color: "#888b91" # Toggles paper-toggle-button-checked-button-color: var(--switch-checked-button-color) paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) # Table table-row-background-color: var(--primary-background-color) table-row-alternative-background-color: var(--secondary-background-color) data-table-background-color: var(--primary-background-color) # Dropdowns material-background-color: var(--paper-card-background-color) material-secondary-background-color: var(--primary-background-color) mdc-theme-surface: var(--paper-card-background-color) # Card mod theme-red: firebrick theme-green: forestgreen theme-blue: deepskyblue ha-label-badge-title-font-size: 1em card-mod-card: | ha-card { background-color: var(--primary-background-color); margin: 30px; box-shadow: -8px -8px 8px 0 rgba(255,255,255,.5), 8px 8px 8px 0 rgba(0,0,0,.03) !important; } ha-card.type-entities { box-shadow: none !important; margin: 30px 20px; } ha-card > .card-content > div > * { display: block; padding-top: 10px; padding-bottom: 10px; width: 95%; margin: 0 auto 0 5px; } ha-card.type-media-control, ha-card.type-media-control > * { background-color: var(--primary-background-color) !important; color: var(--secondary-text-color) !important; } ha-card > .card-content { box-shadow: -8px -8px 8px 0 rgba(255,255,255,.5), 8px 8px 8px 0 rgba(0,0,0,.03); border-radius: var(--ha-card-border-radius); margin: 12px; padding: 10px; } ha-card > .card-header { box-shadow: none; } ha-card > .card-header > .name { text-align: center; width: 100%; } card-mod-view: | #badges { width: 80%; margin: 8px auto !important; } #columns { flex-direction: column !important; margin: 0 auto; max-width: 500px; } card-mod-badge-yaml: | .: | :host { border-radius: 5px; box-shadow: var(--theme-box-shadow); padding: 11px 8px; margin: 11px 14px; display: inline-block; --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); {% elif is_state(config.entity, 'on') %} var(--theme-green); {% elif is_state(config.entity, 'open') %} var(--theme-green); {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); {% elif is_state(config.entity, 'off') %} var(--theme-red); {% elif is_state(config.entity, 'closed') %} var(--theme-red); {% elif is_state(config.entity, 'locked') %} var(--theme-red); {% else %} var(--theme-blue); {% endif %} --label-badge-red: teal; margin-bottom: 24px; box-shadow: -5px -5px 5px 0 rgba(255,255,255,.5), 5px 5px 5px 0 rgba(0,0,0,.03); } ha-state-label-badge: $: ha-label-badge: $: | .label-badge { background: none !important; } .title { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; } card-mod-more-info-yaml: | $: | .mdc-dialog { backdrop-filter: blur(2.5px); background: rgba(255, 255, 255, 0.35); } .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { background: rgba(255, 255, 255, 0.8); border-radius: var(--ha-card-border-radius); } ha-header-bar: $: | .mdc-top-app-bar { background: none !important; } Dark - Purple: ### Main Interface Colors ### primary-color: "#4C3FF9" light-primary-color: "#6F64FA" primary-background-color: "#262938" secondary-background-color: var(--primary-background-color) divider-color: "#313549" card-background-color: var(--paper-card-background-color) ### Text ### primary-text-color: "#F7F8FA" secondary-text-color: "#00ECCA" text-primary-color: "#FFFFFF" disabled-text-color: "#616387" ### Sidebar Menu ### sidebar-icon-color: "#4C3FF9" sidebar-text-color: "#F7F8FA" sidebar-selected-background-color: var(--primary-background-color) sidebar-selected-icon-color: var(--secondary-text-color) sidebar-selected-text-color: var(--sidebar-selected-icon-color) sidebar-background-color: var(--paper-listbox-background-color) ### States and Badges ### state-icon-color: "#00ECCA" state-icon-active-color: "#F7AA1C" state-icon-unavailable-color: var(--disabled-text-color) ### Sliders ### paper-slider-knob-color: "#00ECCA" paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-knob-color) paper-slider-active-color: var(--paper-slider-knob-color) paper-slider-secondary-color: var(--light-primary-color) ### Labels ### label-badge-background-color: "#2E2F40" label-badge-text-color: "#F7F8FA" label-badge-red: "#323346" ### Cards ### ha-card-border-radius: "17px" ha-card-box-shadow: 1px 1px 5px 0px rgb(12, 13, 20) paper-card-background-color: "#2E2F40" paper-listbox-background-color: var(--primary-background-color) ### Toggles ### paper-toggle-button-checked-button-color: "#4C3FF9" paper-toggle-button-checked-bar-color: "#262938" paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color) paper-toggle-button-unchecked-bar-color: "#262938" ### Table row ### table-row-background-color: var(--primary-background-color) table-row-alternative-background-color: var(--secondary-background-color) airy: card-mod-theme: airy primary-color: darkgreen ha-card-background: none ha-card-box-shadow: none background-image: url("https://thumbs.dreamstime.com/b/green-leaf-seamless-texture-detail-close-image-tree-macro-pattern-35841066.jpg") disabled-text-color: gray theme-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) theme-border-radius: 10px background-1: rgba(250, 250, 250, 0.5) background-2: rgba(150, 150, 150, 0.6) bg-filter: grayscale(0.7) blur(5px) theme-red: firebrick theme-green: forestgreen theme-blue: deepskyblue paper-item-icon-active-color: var(--theme-green) ha-label-badge-title-font-size: 1em card-mod-view: | :host { background: none !important; display: flex !important; } #badges { padding: 8px; display: flex !important; justify-content: start; flex-direction: column; } #columns .column > * { margin: 32px 16px; } card-mod-root: | ha-app-layout { background: var(--background-image) !important; background-size: cover; } app-header { background: var(--background-1) !important; backdrop-filter: var(--bg-filter); box-shadow: var(--theme-box-shadow); } app-toolbar { background: none !important; } card-mod-card: | ha-card { backdrop-filter: var(--bg-filter); border-radius: var(--theme-border-radius); background: var(--background-1); box-shadow: var(--theme-box-shadow); } ha-card.type-entities, ha-card.type-glance { background: none; backdrop-filter: none; box-shadow: none; } .card-header { text-align: center; display: block !important; padding: 8px; margin-bottom: 12px; font-variant: small-caps; } .type-entities .card-header, .type-glance .card-header { background: var(--background-1); backdrop-filter: var(--bg-filter); border-radius: var(--theme-border-radius); box-shadow: var(--theme-box-shadow); margin-bottom: 24px; } .card-header hui-entities-toggle { display: none; } card-mod-glance: | :host { display: block; background: var(--background-1); box-shadow: var(--theme-box-shadow); border-radius: var(--theme-border-radius); backdrop-filter: var(--bg-filter); padding: 4px !important; margin: 0 4px 12px; width: calc(var(--glance-column-width, 20%) - 8px) !important; /* Make icons red/green for on/off values and blue otherwise */ --paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue); {% elif is_state(config.entity, 'on') %} var(--theme-green); {% elif is_state(config.entity, 'open') %} var(--theme-green); {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); {% elif is_state(config.entity, 'off') %} var(--theme-red); {% elif is_state(config.entity, 'closed') %} var(--theme-red); {% elif is_state(config.entity, 'locked') %} var(--theme-red); {% else %} var(--theme-blue); {% endif %} } :host(:hover) { background: var(--background-2); } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @keyframes spin2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-359deg); } } state-badge { {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} animation: spin 5s infinite linear; {% endif %} } card-mod-row-yaml: | .: | :host { display: block; background: var(--background-1); box-shadow: var(--theme-box-shadow); padding-right: 8px; border-radius: var(--theme-border-radius); backdrop-filter: var(--bg-filter); margin: 0 -16px; /* Make icons red/green for on/off values and blue otherwise */ --paper-item-icon-color: {% if not states(config.entity) %} var(--theme-blue); {% elif is_state(config.entity, 'on') %} var(--theme-green); {% elif is_state(config.entity, 'open') %} var(--theme-green); {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); {% elif is_state(config.entity, 'off') %} var(--theme-red); {% elif is_state(config.entity, 'closed') %} var(--theme-red); {% elif is_state(config.entity, 'locked') %} var(--theme-red); {% else %} var(--theme-blue); {% endif %} } :host(:hover) { background: var(--background-2); } "*:first-child": $: | @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @keyframes spin2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-359deg); } } state-badge { {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %} animation: spin 5s infinite linear; {% endif %} } card-mod-badge-yaml: | .: | :host { background: var(--background-1); border-radius: var(--theme-border-radius); backdrop-filter: var(--bg-filter); box-shadow: var(--theme-box-shadow); padding: 8px; /* Make badge borders red/green for binary sensors and blue otherwise */ --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); {% elif is_state(config.entity, 'on') %} var(--theme-green); {% elif is_state(config.entity, 'open') %} var(--theme-green); {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); {% elif is_state(config.entity, 'off') %} var(--theme-red); {% elif is_state(config.entity, 'closed') %} var(--theme-red); {% elif is_state(config.entity, 'locked') %} var(--theme-red); {% else %} var(--theme-blue); {% endif %} --label-badge-red: teal; margin-bottom: 24px; } # Make badges have transparent background ha-state-label-badge: $: ha-label-badge: $: | .label-badge { background: none !important; } card-mod-more-info-yaml: | $: | .mdc-dialog { backdrop-filter: var(--bg-filter); background: {% if is_state(config.entityId, 'on') %} rgba(0, 255, 0, 0.2); {% elif is_state(config.entityId, 'off') %} rgba(255,0,0,0.2); {% else %} rgba(0,0,255,0.2); {% endif %} } .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { background: rgba(250,250,250,0.7); border-radius: var(--theme-border-radius); } ha-header-bar: $: | .mdc-top-app-bar { background: none !important; } ```

[KTibow]

Okay, here's the next one:

Expand

```yaml # Thanks @JuanMTech! I've slightly modified their themes a little. Google Light Theme: card-mod-theme: "Google Light Theme" # Header: app-header-background-color: "#f3f5f7" app-header-text-color: "#000" # Main Interface Colors primary-color: "#5F9BEA" light-primary-color: var(--primary-color) primary-background-color: "#f3f5f7" secondary-background-color: var(--primary-background-color) divider-color: var(--primary-background-color) # Text primary-text-color: "#4A4A4A" secondary-text-color: "#5F6267" text-primary-color: "#FFFFFF" disabled-text-color: "#717171" # Sidebar Menu sidebar-icon-color: "#555" sidebar-text-color: "#555" sidebar-background-color: "#f3f5f7" sidebar-selected-background-color: var(--primary-background-color) sidebar-selected-icon-color: "#5F9BEA" sidebar-selected-text-color: var(--sidebar-selected-icon-color)) # States and Badges state-icon-color: "#5F6267" state-icon-active-color: "#5F9BEA" state-icon-unavailable-color: var(--disabled-text-color) # Sliders paper-slider-knob-color: "#5F9Bd3" paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-knob-color) paper-slider-active-color: var(--paper-slider-knob-color) paper-slider-secondary-color: var(--light-primary-color) # Labels label-badge-background-color: "#F8FAF9" label-badge-text-color: "#4D5575" label-badge-red: "#C7484C" label-badge-green: "#6DC071" label-badge-blue: "#51AAD1" label-badge-yellow: "#D9B757" label-badge-gray: "#5F6267" # Cards ha-card-border-radius: '18px' ha-card-box-shadow: 1px 1px 5px 0px rgb(220, 220, 220) paper-card-background-color: "rgba(255, 255, 255, 0.9)" paper-listbox-background-color: "rgba(255, 255, 255, 0.9)" # Switches switch-checked-button-color: "#5F9Bd3" switch-checked-track-color: "#75a2d3" switch-unchecked-button-color: "#5F6267" switch-unchecked-track-color: "#888b91" # Toggles paper-toggle-button-checked-button-color: var(--switch-checked-button-color) paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) # Table table-row-background-color: var(--primary-background-color) table-row-alternative-background-color: var(--secondary-background-color) data-table-background-color: var(--primary-background-color) # Dropdowns material-background-color: var(--paper-card-background-color) material-secondary-background-color: var(--primary-background-color) mdc-theme-surface: var(--paper-card-background-color) # Card mod theme-red: firebrick theme-green: forestgreen theme-blue: deepskyblue ha-label-badge-title-font-size: 1em card-mod-card-yaml: | hui-image: $: | img { border-radius: 18px; } .: | ha-card:not(.type-markdown) { background-color: var(--primary-background-color); } ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities) { margin: 30px; box-shadow: -8px -8px 8px 0 rgba(255,255,255,.5), 8px 8px 8px 0 rgba(0,0,0,.03) !important; } ha-card.type-picture-entity { padding: 10px; } ha-card.type-picture-entity > .footer { margin: 10px; border-radius: 18px; } ha-card.type-entities { box-shadow: none !important; margin: 30px 20px; } ha-card > .card-content > div > * { display: block; padding-top: 8px; padding-bottom: 8px; width: 95%; margin: 0 auto 0 5px; } ha-card.type-media-control, ha-card.type-media-control > * { background-color: var(--primary-background-color) !important; color: var(--secondary-text-color) !important; } ha-card > .card-content { box-shadow: -8px -8px 8px 0 rgba(255,255,255,.5), 8px 8px 8px 0 rgba(0,0,0,.03); border-radius: var(--ha-card-border-radius); margin: 12px; padding: 10px; } ha-card > .card-header { box-shadow: none; } ha-card > .card-header > .name { text-align: center; width: 100%; } card-mod-view: | #badges { width: 95%; margin: 8px auto !important; } #columns { flex-direction: column !important; margin: 0 auto; max-width: 500px; } card-mod-badge-yaml: | .: | :host { border-radius: 5px; box-shadow: var(--theme-box-shadow); padding: 11px 8px; margin: 11px 12px; display: inline-block; --label-badge-blue: {% if not states(config.entity) %} var(--theme-blue); {% elif is_state(config.entity, 'on') %} var(--theme-green); {% elif is_state(config.entity, 'open') %} var(--theme-green); {% elif is_state(config.entity, 'unlocked') %} var(--theme-green); {% elif is_state(config.entity, 'off') %} var(--theme-red); {% elif is_state(config.entity, 'closed') %} var(--theme-red); {% elif is_state(config.entity, 'locked') %} var(--theme-red); {% else %} var(--theme-blue); {% endif %} --label-badge-red: teal; margin-bottom: 24px; box-shadow: -5px -5px 5px 0 rgba(255,255,255,.5), 5px 5px 5px 0 rgba(0,0,0,.03); } ha-state-label-badge: $: ha-label-badge: $: | .label-badge { background: none !important; } .title { -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; } card-mod-more-info-yaml: | $: | .mdc-dialog { backdrop-filter: blur(2.5px); background: rgba(255, 255, 255, 0.35); } .mdc-dialog .mdc-dialog__container .mdc-dialog__surface { background: rgba(255, 255, 255, 0.8); border-radius: var(--ha-card-border-radius); } ha-header-bar: $: | .mdc-top-app-bar { background: none !important; } ```

[KTibow]

@N-l1 I'm going to try to make a custom HACS repo to add soft-ui look.

[qiz-li]

Trying it soon. Sounds great!

[KTibow]

@N-l1 here's the repo: https://github.com/KTibow/lovelace-light-soft-ui-theme

Edit

Also got a dark theme: https://github.com/KTibow/lovelace-dark-soft-ui-theme

[qiz-li]

Nice! I've left links inside the README in case people want to use your theme 😃 Closing this for now.