### Basic Row Styling Example (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

This YAML configuration shows a basic example of styling rows within an entities card directly. Each row is given a block display and a 1px solid black border. This approach is less efficient than using theme variables for global styling.

```yaml
type: entities
entities:
  - entity: light.bed_light
    style: |
      :host {
        display: block;
        border: 1px solid black;
      }
  - entity: light.ceiling_lights
    style: |
      :host {
        display: block;
        border: 1px solid black;
      }
  - entity: light.kitchen_lights
    style: |
      :host {
        display: block;
        border: 1px solid black;
      }
```

--------------------------------

### Card Structure Examples for card-mod v4

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README-application.md

Illustrates the DOM structure for standard and custom cards, showing where card-mod v4 applies its patches and styles. This helps understand how selectors target different elements within the card hierarchy.

```console
hui-card           ⇐ card-mod v4 patches here
  ↳ tile           ⇐ this is ":host" for card-mod and where card-mod `class` is set
    ↳ shadowRoot   ⇐ card-mod applies here, `ha-card` is in light DOM
      ↳ ha-card    ⇐ card-mod v4 also patches here but ignores due to known standard structure
```

```console
hui-card                 ⇐ card-mod v4 patches here
  ↳ button-card          ⇐ this is ":host" for card-mod and where card-mod `class` is set
    ↳ shadowRoot         ⇐ card-mod v4 applies here
      ↳div
        ↳ ha-card        ⇐ card-mod v4 patches and applies here, does not ignore as it is not a standard structure. card-mod class is also be set here
          ↳ shadowRoot
```

```console
hui-card                 ⇐ card-mod v4 patches here
  ↳ streamline-card      ⇐ this is ":host" for card-mod and where card-mod `class` is set for the host custom card from host card's card_mod config
    ↳ shadowRoot         ⇐ card-mod v4 applies here for host custom card
      ↳ tile
        ↳ shadowRoot
          ↳ ha-card      ⇐ card-mod v4 patches and applies here for card loaded by custom card, does not ignore as it is not a standard structure. card-mod class is set here for card loaded by host custom card from the loaded card's card_mod config
            ↳ shadowRoot
```

--------------------------------

### Combine YAML and CSS Styling with Card-mod (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This example shows how to combine different styling approaches within a single card-mod configuration. It includes styling for `card-mod-root` (likely CSS) and `card-mod-root-yaml` (likely YAML-based selectors).

```yaml
card-mod-root-yaml: |
  paper-tabs$: |
    .not-visible {
      display: none;
    }
  .: |
    app-toolbar {
      display: none;
    }

```

--------------------------------

### Install card-mod as a Frontend Module

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Provides the configuration for `configuration.yaml` to install card-mod as a frontend module. This is the recommended method for optimal performance, typically after installation via HACS.

```yaml
# configuration.yaml - Frontend module installation
frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=12345678901
  themes: !include_dir_merge_named themes/
```

--------------------------------

### Applying card-mod Styles in Streamlined-card Structures

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README-application.md

Provides examples of applying card-mod styles within streamlined-card structures using the `* $` selector for targeting nested elements. This is useful for theming cards loaded by custom wrapper cards.

```yaml
card_mod:
  style:
    "* $": |
      ha-card {
        --card-background-color: red;
      }
```

```yaml
card_mod:
  style:
    "* $ ha-card": |
      :host {
        --card-background-color: red;
      }
```

--------------------------------

### Transparent Header with Custom Background (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This example shows how to make the Home Assistant header transparent and apply a custom background image to the entire layout using card-mod. It also includes styling for the app-toolbar to ensure a consistent look.

```yaml
transparent-header:
  card-mod-theme: transparent-header
  card-mod-root: |
    ha-app-layout {
      background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTR-Hllcy5CR5U90nMlW8bZA_VM7w4VlP2lZg&usqp=CAU");
    }
    app-header {
      background: rgba(0,0,0,0.5) !important;
    }
    app-toolbar {
      background: none !important;
    }

```

--------------------------------

### Apply Global Row Styling with Card-Mod (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

This example demonstrates applying a border to all rows in entities or glance cards globally using the 'card-mod-row' theme variable. The value must be a string containing CSS, starting with '|' or '>' and indented.

```yaml
red-theme:
  card-mod-theme: red-theme
  ...
  card-mod-row: |
    :host {
      display: block;
      border: 1px solid black;
    }
```

--------------------------------

### Example card-mod Resource URL (HACS)

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This is an example of a Lovelace resource definition for card-mod when installed via HACS. It specifies the path to the `card-mod.js` file, including a HACS tag for versioning. This definition is typically added automatically by HACS but can be manually configured.

```text
/hacsfiles/lovelace-card-mod/card-mod.js?hacstag=12345678901
```

--------------------------------

### Conditionally Theme Alert Dialogs with Card-Mod

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This example shows how to conditionally style alert dialogs based on their parameters, specifically targeting the 'restart' dialog. It uses Jinja2 templating to check for the presence and value of `params.confirmText` before applying the red background and white text theme. This approach allows for more granular control over dialog styling.

```yaml
  card-mod-dialog-yaml: |
    .: |
      {% set confirmText = params.confirmText if 'confirmText' in params else '' %} 
      {% if confirmText == 'Restart' %} 
      ha-wa-dialog.type-dialog-box[type="alert"] {
        --card-background-color: red;
        --primary-text-color: white;
      }
      {% endif %}
```

--------------------------------

### Configure Themes Directory in Home Assistant (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

Shows how to configure Home Assistant to load themes from a specified directory. This is a prerequisite for using custom themes, including those with card-mod integration.

```yaml
frontend:
  themes: !include_dir_merge_named themes/
```

--------------------------------

### Hide Header Elements with Card-mod (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

These examples demonstrate how to hide specific parts of the Home Assistant header, such as the app toolbar or the entire app header, using card-mod with YAML configuration. This is useful for creating cleaner dashboards.

```yaml
no-top-header:
  card-mod-theme: no-top-header

  card-mod-root: |
    app-toolbar {
      display: none;
    }

```

```yaml
no-header:
  card-mod-theme: no-header

  card-mod-root: |
    app-header {
      display: none;
    }

```

--------------------------------

### Theme All Alert Dialogs with Card-Mod

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This code snippet demonstrates how to apply a consistent theme to all alert dialogs using card-mod. It targets `ha-wa-dialog` elements with the `type='alert'` attribute and sets custom CSS properties for background and text color. This requires the `card-mod` integration to be installed.

```yaml
  card-mod-dialog-yaml: |
    .: |
      ha-wa-dialog.type-dialog-box[type="alert"] {
        --card-background-color: orange;
        --primary-text-color: white;
      }
```

--------------------------------

### Merge Card-Mod Styles into Existing Theme (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

Demonstrates how to combine a standard Home Assistant theme with card-mod specific configurations. This allows for global application of custom styles defined within card-mod.

```yaml
Google Light Theme:
  # Header:
  app-header-background-color: "#F8F8F8"
  app-header-text-color: "#424242"
  # Main Interface Colors
  primary-color: "#5F9BEA"
  light-primary-color: var(--primary-color)
  primary-background-color: "#F8F8F8"
  secondary-background-color: var(--primary-background-color)
  divider-color: var(--primary-background-color)
  # More stuff here that I cut out
  card-mod-theme: "Google Light Theme"
  # Header
  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }
      /*Uncomment this if you want the header on the bottom
      #selectionBar {
        bottom: unset !important;
      }
      */
      /*More stuff I cut out*/
```

--------------------------------

### Define a Basic Home Assistant Theme (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

Illustrates the structure of a basic Home Assistant theme file. It defines themeable variables such as primary colors and border-radius for cards.

```yaml
red-theme:
  primary-color: red
  primary-text-color: white
  ha-card-border-radius: 20
```

--------------------------------

### Replace Overflow Menu with Clock using Card-Mod

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This example replaces the default overflow menu button with a dynamic clock display using card-mod. It utilizes CSS pseudo-elements and state templating to insert the time. The `ha-menu-button` is hidden, and the `ha-button-menu` is made transparent to reveal the custom content. This requires the 'time and date' integration and `sensor.time`.

```yaml
  card-mod-theme: "NAME_OF_YOUR_THEME_HERE"
  card-mod-root: |
    ha-button-menu::before {
    content: "{{states('sensor.time_formatted')}}";
    color: var(--text-primary-color);
    visibility: visible;
    position: absolute;
    font-size: 20px;
    width: 230px;
    top: 13px;
    right: 0px;

    }

    ha-menu-button {
      display: none !important;
    }


    ha-button-menu {
      color: transparent;
    }
```

--------------------------------

### Fan Animation with Card-mod (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This example makes fan icons spin when their state is 'on' using CSS animations defined with card-mod. It applies the animation to `ha-icon` elements for fan domains and also to `state-badge` within entity rows.

```yaml
fan-spinning:
  card-mod-theme: fan-spinning
  card-mod-card: |
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(359deg);
      }
    }
    ha-icon[data-domain="fan"][data-state="on"] {
      animation: spin 4s infinite linear;
    }
  card-mod-row-yaml: |
    "*:first-child$": |
      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(359deg);
        }
      }
      state-badge {
        {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
          animation: spin 4s infinite linear;
        {% endif %}
      }

```

--------------------------------

### Apply CSS Classes to Specific Entities (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

This example demonstrates how to apply custom CSS classes ('teal' and 'purple') to individual entities within an entities card. This allows for targeted styling of specific rows based on the classes defined in the theme.

```yaml
type: entities
entities:
  - entity: light.bed_light
  - entity: light.ceiling_lights
    card_mod:
      class: teal
  - entity: light.kitchen_lights
    card_mod:
      class: purple
```

--------------------------------

### Conditional Clock Display for Specific User with Card-Mod

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This example shows how to conditionally display a clock in place of the overflow menu, but only for a specific user (e.g., 'kiosk'). It uses a Jinja2 template condition within the card-mod configuration to target the user. This mirrors the conditional logic found in custom-header configurations.

```yaml
  card-mod-theme: "NAME_OF_YOUR_THEME_HERE"
  card-mod-root-yaml: |
    .: |
      {% if user == 'kiosk' %}

      mwc-icon-button[slot="trigger"] > ha-svg-icon {
        display: none;
      }

      mwc-icon-button[slot="trigger"]::after {
        font-size: 22px;
        height: 20px; 
        width: 100px;
        margin-left: 0px;
        margin-right: 0px;
        content: "{{ states('sensor.time') }}";
        position: absolute;
        top: 14px;
        right: 0px;
      }
      {% endif %}
```

--------------------------------

### Display Battery Level in Entity Rows (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This example uses card-mod to display the battery level as a background gradient in entity rows that have a 'battery' or 'battery_level' attribute. It dynamically sets the gradient based on the battery percentage.

```yaml
battery-rows:
  card-mod-theme: battery-rows

  card-mod-row: |
    :host {
      display: block;
      {% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
      {% if battery %}
        background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
      {% endif %}
    }

```

--------------------------------

### Card-Mod Theme Styling

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README-developers.md

This YAML demonstrates how to define theme-specific styles for card-mod. It allows for global styles (`.: |`) and type-specific styles (e.g., `card-mod-card-yaml: |`) to be applied.

```yaml
test:
  card-mod-theme: test
  card-mod-card-yaml: |
    .: |
      b {
        color: red;
      }
```

--------------------------------

### Apply Portrait Orientation Styles with Card-Mod

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This example applies specific styling changes that are active only in portrait orientation. It hides the overflow menu, chevrons, and other elements. This is achieved using a CSS media query within the card-mod configuration. This differs from custom-header's user agent check as it relies on the actual device orientation.

```yaml
  card-mod-theme: "NAME_OF_YOUR_THEME_HERE"
  card-mod-root-yaml: |
    .: |
      ha-menu-button {
        display: none !important;
      }

      @media (orientation: portrait) {
        a.menu-link[target="_blank"], ha-button-menu, [main-title] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-right"] {
          display: none;
        }
        paper-icon-button[icon="paper-tabs:chevron-left"] {
          display: none;
        }
      }
```

--------------------------------

### Use CSS Variables for Theming with card_mod

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This example shows how to leverage CSS variables within card_mod styles for theming. It demonstrates setting a custom background color and text color using Home Assistant's theme variables.

```yaml
card_mod:
  style: |
    ha-card {
      --ha-card-background: teal;
      color: var(--primary-color);
    }
```

--------------------------------

### Customize Header with Card-Mod (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This YAML configuration demonstrates advanced card-mod techniques to customize the Home Assistant header. It allows for repositioning the header to the bottom, changing background colors, hiding elements like the title and buttons, and adjusting edit mode appearance. It requires basic CSS knowledge and understanding of Home Assistant's Lovelace structure.

```yaml
compact-header:
  card-mod-theme: compact-header
  header-height: 48px
  card-mod-root-yaml: |
    paper-tabs$: |
      /* Uncomment this for header on the bottom. You're 1/3 there.
      #selectionBar {
        bottom: unset !important;
      }
      */
    .: |
      /* This moves the header up. */
      app-header {
        transform: translate3d(0px, -48px, 0px);
      }
      /* Let's change the background. */
      app-header, app-toolbar {
        background: var(--primary-background-color) !important;
        color: var(--primary-text-color) !important;
      }
      /* We're still going to need a way to see that we're in edit mode. */
      app-header.edit-mode {
        padding-bottom: calc(var(--ha-card-border-width, 2px) * 2);
        border-bottom: var(--ha-card-border-width, 2px) solid var(--primary-color);
      }
      /* This changes the color of the currently selected tab. */
      ha-tabs {
        --paper-tabs-selection-bar-color: var(--primary-color) !important;
      }
      paper-tab[aria-selected=true] {
        color: var(--primary-color) !important;
      }
      /* This hides the help button. */
      a.menu-link[target="_blank"] {
        display: none;
      }
      /* This makes the plus color the same as the background. */
      #add-view {
        color: var(--primary-background-color);
      }
      /* This hides the title. */
      [main-title] {
        display: none;
      }
      /* This hides the app-toolbar in edit mode. */
      app-toolbar.edit-mode {
        height: 0;
      }
      /* This moves the edit mode buttons back in. */
      app-toolbar.edit-mode > mwc-icon-button {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }
      app-toolbar.edit-mode > ha-button-menu {
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
      }
      /* This adds a bit more padding, mainly for unused entities. */
      app-header.edit-mode > div {
        padding-left: 5px;
      }
      /* Uncomment this for header on the bottom. You're 2/3 there. 
      app-header {
        top: calc(100vh - 60px) !important;
        bottom: 0 !important;
        transform: unset !important;
      }
      */
  
  /* Uncomment this to move the main content up to fill the gap left by the shifted header. You're 3/3 there. 
  card-mod-view-yaml: |
          .: |
            hui-view {
              transform: translate3d(0px, -60px, 0px);
            }
            */

```

--------------------------------

### Applying card-mod Styles with Dual CSS Selectors

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README-application.md

Demonstrates how to use dual CSS selectors in card-mod to target cards loaded by the frontend and custom cards with divergent structures. This allows for consistent theming across different card types.

```yaml
card_mod:
  style: |
    :host(.my-class) ha-card,
    ha-card.myclass {
      background-color: red !important;
    }
```

--------------------------------

### Custom Secondary Info for Battery Entities (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This configuration adds custom secondary information to entities that have a battery attribute, displaying the battery percentage. It targets the `.info.text-content` element within `hui-generic-entity-row`.

```yaml
custom-secondary:
  card-mod-theme: custom-secondary
  card-mod-row-yaml: |
    hui-generic-entity-row$: |
      {% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
      {% if battery %}
        .info.text-content::after {
          content: "{{battery}}%";
          display: block;
          color: var(--secondary-text-color);
        }
      {% endif %}

```

--------------------------------

### Card-Mod Styling Configuration

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README-developers.md

This YAML defines the configuration for card-mod styling. It supports inline styles, applying CSS classes, and enabling a debug mode for elements.

```yaml
style: |
  h1 {color: blue;}
```

--------------------------------

### Hide Menu Button and Title with Card-Mod

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This example demonstrates how to hide the overflow menu button and the title text on mobile devices using card-mod. It targets the `ha-menu-button` element and sets its display to 'none'. This is a direct replacement for the `menu_hide: true` option in custom-header.

```yaml
  card-mod-theme: "NAME_OF_YOUR_THEME_HERE"
  card-mod-root-yaml: |
    .: |
      ha-menu-button {
        display: none !important;
      }
```

--------------------------------

### Force Single Column Layout with Card-mod (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This configuration forces the Lovelace view to use a single column layout for cards. It overrides the default masonry view columns and sets a maximum width for the content.

```yaml
one-column:
  card-mod-theme: one-column
  card-mod-view: |
    "hui-masonry-view$#columns" {
      flex-direction: column !important;
      margin: 0 auto;
      max-width: 500px;
    }

```

--------------------------------

### Apply Custom CSS Style to a Card (card-mod)

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This example demonstrates how to apply custom CSS styles to a Home Assistant card using card-mod. It is added to the card's configuration in the GUI editor. The `style` block contains standard CSS rules targeting elements like `ha-card`.

```yaml
card_mod:
  style: |
    ha-card {
      color: red;
    }
```

--------------------------------

### Remove Voice Button (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This YAML configuration snippet shows how to remove the microphone button from the Home Assistant header. This is achieved by disabling the 'conversation' integration, which is responsible for the voice assistant functionality.

```yaml
conversation:

```

--------------------------------

### Chained Selectors for Nested Shadow DOM Elements

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This example shows how to use chained selectors in Card-Mod to target elements nested within multiple shadow roots. The selector `ha-map $ ha-entity-marker $ div` targets `div` elements within the first marker of a map card. By breaking the chain, as in the second example, Card-Mod can retry selectors, leading to more stable results.

```yaml
"ha-map $ ha-entity-marker $ div": |

```

```yaml
"ha-map $:
  "ha-entity-marker $":
    "div": |

```

--------------------------------

### Adjust Header Tabs with Card-mod (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook

This configuration uses card-mod to adjust the appearance of header tabs, specifically hiding elements with the class `.not-visible` when chevrons are not needed. This helps to remove unused space in the header.

```yaml
tabs-to-edge:
  card-mod-theme: tabs-to-edge
  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }

```

--------------------------------

### Style Individual Entities in Lists with card_mod

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This example shows how to style individual entities within 'entities' or 'glance' cards. The 'card_mod' parameter is added to each entity configuration, and styles are applied using ':host' to target the entity's element within its shadowRoot.

```yaml
type: entities
entities:
  - entity: light.bed_light
    card_mod:
      style: |
        :host {
          color: red;
          }
  - entity: light.ceiling_lights
    card_mod:
      style: |
        :host {
          color: green;
        }
  - entity: light.kitchen_lights
    card_mod:
      style: |
        :host {
          color: blue;
        }
```

--------------------------------

### Advanced ShadowDOM Styling with Animations (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

This snippet shows how to use the 'card-mod-row-yaml' variable for advanced styling that requires traversing the ShadowDOM. It includes a CSS animation ('spin') applied to a state-badge element, conditionally based on the entity type and state.

```yaml
red-theme:
  card-mod-theme: red-theme
  ...
  card-mod-row-yaml: |
    "*:first-child$": |
      @keyframes spin {
        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 %}
      }
```

--------------------------------

### Apply Card-Mod Styling to an Element

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README-developers.md

This snippet demonstrates how to apply card-mod styling to a given element. It requires the 'card-mod' custom element to be defined. The function takes the element, a type for theme variable selection, configuration, optional variables, a shadow DOM flag, and an optional class as arguments.

```javascript
customElements.whenDefined("card-mod").then((cardMod) => {
  cardMod.applyToElement(
    el, // The root element
    "type", // Determines which theme variables should apply (card-mod-<type>, card-mod-<type>-yaml)
    config, // The card mod configuration. See below
    variables, // Any variables passed on to jinja templates, preferably { config: <element configuration> }. Default: {}
    shadow // whether the styles should be based in the #shadow-root of el. Default: true
    cls // An extra class to apply to the element. Default: undefined
  )
})
```

--------------------------------

### Apply Styles within Shadow DOM using Card-Mod

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This example demonstrates how to apply CSS styles to elements within the Shadow DOM using Card-Mod. It utilizes a dictionary format where keys are selectors and values are the styles to be applied. The selector `ha-markdown$` targets shadow roots within ha-markdown elements, and `.` targets the base element.

```yaml
card_mod:
  style:
    ha-markdown$: |
      h3 {
        color: purple;
      }
    .: |
      ha-card {
        background: teal;
      }
```

--------------------------------

### Custom Card with Card-Mod Integration

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README-developers.md

This JavaScript code defines a custom HTML element 'card-modding-card' that integrates with card-mod. It appends a div, applies styles to it using `cardMod.applyToElement`, and allows for custom styling via the `card_mod` configuration and themes.

```javascript
class CardModdingCard extends HTMLElement {
  setConfig(config) {
    this._config = config;
  }

  connectedCallback() {
    const div = document.createElement("div");
    this.appendChild(div);
    div.innerHTML = `
    <h1> This is a custom card</h1>
    It doesn't have a <b>ha-card</b> element, but it will still use any styles for cards from the card-mod configuration or theme.
    `;

    customElements
      .whenDefined("card-mod")
      .then((cardMod) =>
        cardMod.applyToElement(
          div,
          "card",
          this._config.card_mod,
          { config: this._config },
          false,
          "type-custom-card-modding-card"
        )
      );
  }
}

customElements.define("card-modding-card", CardModdingCard);
```

--------------------------------

### Assign CSS Classes to Card Elements (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

This YAML configuration shows how to define CSS classes within the 'card-mod-row' variable. These classes can then be applied to specific elements in the UI to change their appearance, such as setting a background color.

```yaml
red-theme:
  card-mod-theme: red-theme
  ...
  card-mod-row: |
      ... 
      :host(.teal) {
        background: teal;
      }
      :host(.purple) {
        background: purple;
      }
```

--------------------------------

### Run Demo with Docker Compose

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This snippet shows how to run a demonstration of the project using Docker Compose. It involves navigating to the 'test' directory and executing the 'docker-compose up' command. Access the demo at http://localhost:8125 with provided credentials.

```bash
cd test
docker-compose up
```

--------------------------------

### Apply Card-Mod Styling Programmatically with applyToElement

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Demonstrates how custom card developers can use the `applyToElement` static method to programmatically apply card-mod styling to custom elements. It shows how to pass styling options, variables, and apply styles to the element or its shadow root.

```javascript
class MyCustomCard extends HTMLElement {
  setConfig(config) {
    this._config = config;
  }

  connectedCallback() {
    const container = document.createElement("div");
    container.innerHTML = "<h1>Custom Card Content</h1><p>This card uses card-mod programmatically</p>";
    this.appendChild(container);

    customElements.whenDefined("card-mod").then((cardMod) => {
      cardMod.applyToElement(
        container,           // Root element to style
        "card",              // Type determines theme variables (card-mod-card, card-mod-card-yaml)
        {
          style: this._config.card_mod?.style || "",
          class: this._config.card_mod?.class,
          debug: this._config.card_mod?.debug || false
        },
        { config: this._config },  // Variables for Jinja templates
        false,                      // shadow: false = apply to element, true = apply to shadowRoot
        "type-custom-my-card"       // Additional CSS class
      );
    });
  }
}

customElements.define("my-custom-card", MyCustomCard);
```

--------------------------------

### Creating Global Card-Mod Themes

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Define custom themes in your Home Assistant configuration using `card-mod-theme` and various `card-mod-<element>` variables. These themes apply styles globally across Lovelace.

```yaml
# /config/themes/my-theme.yaml
my-custom-theme:
  # Required: must match theme name
  card-mod-theme: my-custom-theme

  # Global card styling
  card-mod-card: |
    ha-card {
      border-radius: 20px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    }

  # Global row styling with state-based colors
  card-mod-row: |
    :host {
      display: block;
      {% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
      {% if battery %}
        background: linear-gradient(to right, rgba(0,255,0,0.5) {{ battery }}%, transparent {{ battery }}%);
      {% endif %}
    }

  # Badge styling
  card-mod-badge: |
    :host {
      --ha-label-badge-color: teal;
    }
```

--------------------------------

### Prepend Option for Asynchronous Card Styling

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Ensure styles are applied before an asynchronously rendering card finalizes its render by using the `prepend: true` option. This is particularly useful for cards like energy dashboards.

```yaml
# Energy card requiring prepend option
type: energy-distribution
card_mod:
  prepend: true
  style: |
    ha-card {
      background: rgba(0, 255, 0, 0.1);
      border-color: green;
    }
```

--------------------------------

### Configure card-mod as Frontend Module (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This snippet shows how to configure card-mod as a frontend module in Home Assistant's `configuration.yaml` file. This method is recommended for performance improvements, especially for non-CAST devices and styling panels outside of Lovelace dashboards. Ensure you restart Home Assistant after making changes.

```yaml
frontend:
  extra_module_url:
    - "/[card_mod resource URL]"
```

--------------------------------

### Enable Card-Mod Debugging

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Shows how to enable debug mode for card-mod styling within a Home Assistant card configuration. This helps in troubleshooting style application and inspecting the styling chain.

```yaml
type: entities
entities:
  - light.bed_light
card_mod:
  debug: true
  style: |
    ha-card {
      background: red;
    }
```

--------------------------------

### Enable Prepend Option for Specific Cards with card_mod

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This snippet illustrates how to use the 'prepend: true' option in card_mod. This is useful for cards that have an initial loading state, ensuring styles are applied correctly during rendering. It's applied at the same level as the 'style' option.

```yaml
type: energy-distribution
card_mod:
  prepend: true
  style: |
    ha-card {
      background: red;
    }
```

--------------------------------

### Define Card-Mod Theme Variable (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

This snippet shows how to define a card-mod theme in a YAML file. The essential part is setting the 'card-mod-theme' variable to the theme's name. Other variables like 'primary-color' and 'ha-card-border-radius' can also be defined.

```yaml
red-theme:
  card-mod-theme: red-theme
  primary-color: red
  primary-text-color: white
  ha-card-border-radius: 20
```

--------------------------------

### Conditional Row Styling with Jinja2 and Card-Mod (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

This snippet illustrates using Jinja2 templating within the 'card-mod-row' variable to apply conditional styling. The border color changes to red if the entity state is 'on', otherwise it remains black.

```yaml
red-theme:
  card-mod-theme: red-theme
  ...
  card-mod-row: |
      :host {
          display: block;
          border: 1px solid {% if is_state(config.entity, 'on') %} red {% else %} black {% endif %};
      }
```

--------------------------------

### Style Conditional Picture-Elements using ShadowRoot (Legacy)

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

For legacy configurations, style conditional elements in `picture-elements` using the shadowRoot. This targets specific component selectors within the conditional element's structure.

```yaml
type: picture-elements
image:
  media_content_id: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
elements:
  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: "on"
    elements:
      - type: state-badge
        entity: sun.sun
        style:
          left: 25%
          top: 25%
    card_mod:
      style:
        hui-state-badge-element $ ha-state-label-badge $: |
          :host {
            color: red;
          }
```

--------------------------------

### Style Conditional Picture-Elements Directly

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

Style individual elements within a conditional element in `picture-elements` directly. This targets only the specific element being styled. Styles are applied to the element's `:host`.

```yaml
type: picture-elements
image:
  media_content_id: https://demo.home-assistant.io/stub_config/t-shirt-promo.png
elements:
  - type: conditional
    conditions:
      - entity: input_boolean.test_boolean
        state: "on"
    elements:
      - type: state-badge
        entity: sun.sun
        style:
          left: 25%
          top: 25%
        card_mod:
          style: |
            :host {
              color: green;
            }
```

--------------------------------

### Make mod-card Transparent

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

To make the `mod-card` transparent, effectively removing its background and shadow, set the `background`, `box-shadow`, `border`, and `transition` properties to `none` within the `card_mod` style configuration.

```yaml
type: custom:mod-card
card:
  type: custom:beloved-custom-card
  ...
card_mod:
  style: |
    ha-card {
      background: none;
      box-shadow: none;
      border: none;
      transition: none;
    }
```

--------------------------------

### Debugging Jinja2 Templates in card-mod

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This snippet shows how to enable debugging for Jinja2 templates processed by card-mod. By adding the comment `{# card_mod.debug #}` within a template, you can view debug messages related to template binding, updates, and unbinding in your Home Assistant logs. This helps in troubleshooting template behavior.

```jinja2
some_template_variable: "{{ "some value" }}{# card_mod.debug #}"
```

--------------------------------

### CSS Variables and Theme Integration with card-mod

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Customizes card appearance and component styles using Home Assistant's CSS variables. Both consuming and defining variables are supported within the 'card_mod' style block.

```yaml
type: entities
title: Custom Switches
entities:
  - switch.office_fan
  - switch.bedroom_fan
card_mod:
  style: |
    ha-card {
      --switch-unchecked-button-color: red;
      --switch-checked-color: green;
      --switch-checked-button-color: green;
      --switch-checked-track-color: green;
      --ha-card-background: teal;
      color: var(--primary-color);
    }
```

--------------------------------

### Debugging Card-Mod DOM Navigation with Browser Console

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This snippet illustrates how to debug Card-Mod's DOM navigation using browser developer tools. By inspecting a `<card-mod>` element, you can access `card_mod_input` to see the provided style information and `card_mod_children` to navigate through the chain of shadow roots.

```javascript
$0.card_mod_input
```

```javascript
$0.card_mod_children
```

--------------------------------

### Style Conditional Entity Rows using ShadowRoot (Legacy)

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

For legacy configurations, style conditional entity rows using the shadowRoot. This targets the specific structure within the conditional row. Styles are encapsulated within the shadow DOM.

```yaml
type: entities
state_color: true
entities:
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.test_boolean
        state: "on"
    row:
      entity: sun.sun
      name: Conditional Sun 
    card_mod:
      style:
        hui-simple-entity-row $ hui-generic-entity-row $: |
          .row {
            color: red;
          }
```

--------------------------------

### Jinja2 Template Styling for Dynamic Positioning

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Uses Jinja2 templates to define CSS variables for dynamic positioning of elements within a 'picture-elements' card. The 'top' and 'left' styles are controlled by entity states.

```yaml
type: picture-elements
image: /local/floorplan.png
card_mod:
  style: |
    ha-card {
      --left-pos: {{ states('input_number.x_pos') }}%;
      --top-pos: {{ states('input_number.y_pos') }}%;
    }
elements:
  - type: state-icon
    entity: light.bed_light
    style:
      top: var(--top-pos)
      left: var(--left-pos)
```

--------------------------------

### Using mod-card Wrapper for Non-ha-card Elements

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Employ the `custom:mod-card` wrapper to apply Card-Mod styles to custom cards that do not inherently include an `ha-card` element. This ensures consistent styling across all card types.

```yaml
# Wrap a card without ha-card element
type: custom:mod-card
card:
  type: custom:special-card
  entity: sensor.temperature
card_mod:
  style: |
    ha-card {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }
```

--------------------------------

### Theme YAML Selectors for Shadow DOM in Themes

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Utilize `card-mod-<element>-yaml` variables within themes to apply styles to elements within Shadow DOM. The value is a YAML string containing CSS selector paths.

```yaml
# Theme with shadow DOM navigation
my-animated-theme:
  card-mod-theme: my-animated-theme

  # Make fan icons spin when on
  card-mod-row-yaml: |
    "*:first-child$": |
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(359deg); }
      }
      state-badge {
        {% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
        animation: spin 4s infinite linear;
        {% endif %}
      }
```

--------------------------------

### Jinja2 Template Styling for Dynamic Card Background

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Applies dynamic CSS styles to a card's background based on entity states using Jinja2 templating. The background color changes in real-time as the entity state updates.

```yaml
type: entities
title: State-Based Styling
entities:
  - light.bed_light
  - light.ceiling_lights
card_mod:
  style: |
    ha-card {
      background: {% if is_state('light.bed_light', 'on') %} teal {% else %} purple {% endif %};
      transition: background 0.5s ease;
    }
```

--------------------------------

### Special Theme Variables for UI Elements

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Style UI elements outside of Lovelace cards using special theme variables like `card-mod-root` (header), `card-mod-view` (view container), `card-mod-more-info` (dialogs), `card-mod-sidebar`, `card-mod-dialog`, and `card-mod-config`.

```yaml
# Hide header and customize sidebar
kiosk-theme:
  card-mod-theme: kiosk-theme

  # Remove the header completely
  card-mod-root: |
    app-header {
      display: none;
    }

  # Style the sidebar
  card-mod-sidebar: |
    :host {
      --sidebar-background-color: #1a1a1a;
    }

  # Style more-info dialogs
  card-mod-more-info: |
    ha-dialog {
      --ha-dialog-border-radius: 20px;
    }

  # Style alert dialogs
  card-mod-dialog-yaml: |
    .: |
      ha-wa-dialog.type-dialog-box[type="alert"] {
        --card-background-color: orange;
        --primary-text-color: white;
      }
```

--------------------------------

### Define a Card-Mod Template Theme (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Making-a-card-mod-theme-template

This snippet shows how to define a reusable card-mod theme. It uses YAML to specify styling rules that can be applied to various elements. The `card-mod-root-yaml` key holds the styling configuration.

```yaml
compact-header:  # This is the name you'll use in your theme.
  # Header
  card-mod-root-yaml: |
    paper-tabs$: |
      .not-visible {
        display: none;
      }
      /*Uncomment this if you want the header on the bottom
      #selectionBar {
        bottom: unset !important;
      }
      */
      /* --snip, not the full thing, don't copy from here-- */
```

--------------------------------

### Apply a Card-Mod Theme to Another Theme (YAML)

Source: https://github.com/thomasloven/lovelace-card-mod/wiki/Making-a-card-mod-theme-template

This snippet demonstrates how to apply a previously defined card-mod theme to another theme. By adding the `card-mod-theme` key and setting its value to the name of the template theme, you can inherit its styling. This is useful for maintaining consistent styling across multiple themes.

```yaml
midnight:
  card-mod-theme: compact-header  # Add this line to apply the styling
  accent-color: "#E45E65"
  card-background-color: "var(--primary-background-color)"
  dark-primary-color: "var(--accent-color)"
  disabled-text-color: "#7F848E"
  divider-color: "rgba(0, 0, 0, .12)"
  google-blue-500: "#4285f4"
  # --snip--
```

--------------------------------

### Entity Row Styling with card-mod

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Styles individual entity rows within 'entities' and 'glance' cards using the ':host' selector within the 'card_mod' configuration for each entity. This allows for per-entity visual customization.

```yaml
type: entities
entities:
  - entity: light.bed_light
    card_mod:
      style: |
        :host {
          color: red;
          display: block;
          border: 1px solid red;
        }
  - entity: light.ceiling_lights
    card_mod:
      style: |
        :host {
          color: green;
          display: block;
          border: 1px solid green;
        }
  - entity: light.kitchen_lights
    card_mod:
      style: |
        :host {
          color: blue;
          display: block;
          border: 1px solid blue;
        }
```

--------------------------------

### Shadow DOM Navigation with Card-Mod Selectors

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Style elements within Shadow DOM by using the '$' selector for direct children of shadow roots and dictionary syntax for multi-level traversal. This allows targeting deeply nested components.

```yaml
# Style elements inside shadow DOMs
type: markdown
content: |
  ### This is a heading
  Some content here
card_mod:
  style:
    # Style h3 inside ha-markdown's shadow root
    ha-markdown$: |
      h3 {
        color: purple;
        font-style: italic;
      }
    # Style the card itself
    .: |
      ha-card {
        background: teal;
      }
```

```yaml
# Multi-level shadow DOM traversal for map markers
type: map
entities:
  - entity: device_tracker.phone
card_mod:
  style:
    "ha-map $":
      "ha-entity-marker $":
        "div": |
          :host {
            background-color: red !important;
          }
```

--------------------------------

### Apply CSS Styles to Cards with card_mod

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

This snippet demonstrates the basic usage of card_mod to inject custom CSS styles into a card's configuration. The styles are applied as a string of CSS. card-mod works on cards contained by 'hui-card' or containing 'ha-card'.

```yaml
card_mod:
  style: <STYLES>
```

--------------------------------

### Define card-mod-theme in YAML

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README-themes.md

This snippet shows how to define a theme in YAML for Lovelace Card-Mod. It requires a `card-mod-theme` variable that matches the theme's name. This is crucial for the theme to be correctly applied.

```yaml
my-awesome-theme:
  card-mod-theme: my-awesome-theme

  ... other theme variables go here ...
```

--------------------------------

### Browser Console Debugging Commands for Card-Mod

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Provides JavaScript commands to be used in the browser's developer console for debugging card-mod. These commands allow inspection of style inputs, child elements, and parent elements within the card-mod styling chain.

```javascript
// Select a card-mod element in DevTools, then run:
$0.card_mod_input    // Shows style input for current chain step
$0.card_mod_children // Shows child card-mod elements
$0.card_mod_parent   // Shows parent card-mod element
```

--------------------------------

### User-Specific and Config-Aware Styling with Card-Mod

Source: https://context7.com/thomasloven/lovelace-card-mod/llms.txt

Apply conditional styling based on user or entity states and dynamically set card-mod icons. This uses Jinja2 templating within the style block.

```yaml
type: entities
entities:
  - entity: light.bed_light
    card_mod:
      style: |
        :host {
          {% if user == 'admin' %}
          background: rgba(255, 0, 0, 0.2);
          {% endif %}
          --card-mod-icon: {% if is_state(config.entity, 'on') %} mdi:lightbulb-on {% else %} mdi:lightbulb-off {% endif %};
        }
```

--------------------------------

### Style Conditional Entity Rows Directly

Source: https://github.com/thomasloven/lovelace-card-mod/blob/master/README.md

Style individual entity rows within a conditional row configuration directly. This method applies styles only to the specific entity row. Be cautious as styles might leak if not applied carefully.

```yaml
type: entities
state_color: true
entities:
  - type: conditional
    conditions:
      - condition: state
        entity: input_boolean.test_boolean
        state: "off"
    row:
      entity: sun.sun
      name: Conditional Sun
      card_mod:
        style: |
          :host {
            color: red;
          }
```