πŸ”Ή Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
1524

Styling History Graph card:

Colored title:

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅465Γ—202 5.87 KB

Code 
type: history-graph
entities:
  - entity: sun.sun
    name: Sun
  - entity: binary_sensor.net_is_available_internet
    name: Internet
hours_to_show: 8
refresh_interval: 0
title: Colored title
card_mod:
  style: |
    ha-card {
      --ha-card-header-color: red;
    }

More formats for a title:

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅492Γ—179 9.13 KB

Code 
type: history-graph
entities:
  - entity: sun.sun
    name: Sun
  - entity: binary_sensor.net_is_available_internet
    name: Internet
hours_to_show: 8
refresh_interval: 0
title: >-
  The quick brown fox jumps over the lazy dog The quick brown fox jumps over the
  lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps
  over the lazy dog
card_mod:
  style: |
    .card-header {
      color: red;
      font-size: 10px;
      line-height: 1.2;
    }

Colored legend:
WARNING: not working after 2025.2.

image
image478Γ—599 20.5 KB

Code 
type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
  - entity: sensor.xiaomi_cg_2_co2
  - entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Colored legend
card_mod:
  style:
    .content state-history-charts $:
      div:
        state-history-chart-line $ ha-chart-base $: |
          .chart-legend li {
            color: red !important;
          }

Update 21.09.22: the code above may not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):

Code 
card_mod:
  style:
    state-history-charts $ .entry-container:nth-child(n):
      state-history-chart-line $ ha-chart-base $: |
        .chart-legend li {
          color: red !important;
        }

Colored legend (different colors):
WARNING: not working after 2025.2.

image
image477Γ—599 21.9 KB

Code 
type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
  - entity: sensor.xiaomi_cg_2_co2
  - entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Colored legend (different colors)
card_mod:
  style:
    .content state-history-charts $:
      div:nth-child(1):
        state-history-chart-line $ ha-chart-base $: |
          .chart-legend li {
            color: red !important;
          }
      div:nth-child(2):
        state-history-chart-line $ ha-chart-base $: |
          .chart-legend li {
            color: orange !important;
          }

Update 21.09.22: the code above may not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):

Code 
card_mod:
  style:
    state-history-charts $ .entry-container:nth-child(1):
      state-history-chart-line $ ha-chart-base $: |
        .chart-legend li {
          color: red !important;
        }
    state-history-charts $ .entry-container:nth-child(2):
      state-history-chart-line $ ha-chart-base $: |
        .chart-legend li {
          color: orange !important;
        }

Colored legend (different colors for different sensors):
WARNING: not working after 2025.2.

image
image479Γ—602 21.4 KB

Code 
type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
  - entity: sensor.xiaomi_cg_2_co2
  - entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Colored legend (different colors)
card_mod:
  style:
    .content state-history-charts $:
      div:nth-child(1):
        state-history-chart-line $ ha-chart-base $: |
          .chart-legend li:nth-child(1) {
            color: red !important;
          }
          .chart-legend li:nth-child(2) {
            color: cyan !important;
          }
      div:nth-child(2):
        state-history-chart-line $ ha-chart-base $: |
          .chart-legend li {
            color: magenta !important;
          }

Update 21.09.22: the code above may not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):

Code 
    card_mod:
      style:
        state-history-charts $ div:nth-child(1):
          state-history-chart-line $ ha-chart-base $: |
            .chart-legend li:nth-child(1) {
              color: red !important;
            }
            .chart-legend li:nth-child(2) {
              color: cyan !important;
            }
        state-history-charts $ div:nth-child(2):
          state-history-chart-line $ ha-chart-base $: |
            .chart-legend li {
              color: magenta !important;
            }

Colored header: unit & legend (different colors):
WARNING: not working after 2021.7.

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅461Γ—501 15.9 KB

Obsolete code 
type: history-graph
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_2_co2
  - entity: sensor.cleargrass_1_temp
hours_to_show: 8
refresh_interval: 0
title: Colored header (different colors)
style:
  .content state-history-charts:
    $:
      'state-history-chart-line:nth-child(1)':
        $:
          ha-chart-base:
            $: |
              .chartHeader .chartTitle {
                color: red;
              }
              .chartHeader .chartLegend {
                color: cyan;
              }
      'state-history-chart-line:nth-child(2)':
        $:
          ha-chart-base:
            $: |
              .chartHeader {
                color: orange;
              }
              .chartHeader .chartLegend {
                color: magenta;
              }

Hiding legend:
WARNING: not working after 2025.2.

image
image477Γ—533 16.1 KB

Code 
type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
  - entity: sensor.xiaomi_cg_2_co2
  - entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Hidden legend
card_mod:
  style:
    .content state-history-charts $:
      div:
        state-history-chart-line $ ha-chart-base $: |
          .chart-legend {
            display: none;
          }

Update 21.09.22: the code above may not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):

Code 
    card_mod:
      style:
        state-history-charts $ div:nth-child(n):
          state-history-chart-line $ ha-chart-base $: |
            .chart-legend {
              display: none;
            }

Tooltip: colored text:
WARNING: not working after 2021.7.

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅464Γ—498 18.4 KB

Obsolete code 
type: history-graph
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_2_co2
  - entity: sensor.cleargrass_1_temp
hours_to_show: 8
refresh_interval: 0
title: Tooltip (text)
style:
  .content state-history-charts:
    $:
      state-history-chart-line:
        $:
          ha-chart-base:
            $:
              '#chartTarget div': |
                .chartTooltip {
                  color: orange;
                  font-size: 10px;
                }
                .chartTooltip .title {
                  color: red;
                  font-size: 20px;
                }

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅476Γ—297 11.6 KB

Obsolete code 
type: history-graph
entities:
  - entity: sun.sun
    name: Sun
  - entity: binary_sensor.net_is_available_internet
    name: Internet
hours_to_show: 8
refresh_interval: 0
title: Tooltip (text)
style:
  .content state-history-charts:
    $:
      state-history-chart-timeline:
        $:
          ha-chart-base:
            $:
              '#chartTarget div': |
                .chartTooltip {
                  color: orange;
                  font-size: 10px;
                }
                .chartTooltip .title {
                  color: red;
                  font-size: 20px;
                }
                .chartTooltip .beforeBody {
                  color: cyan;
                 font-size: 15px;
                }

Tooltip: changed background:
WARNING: not working after 2021.7.

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅463Γ—496 17.3 KB

Obsolete code 
type: history-graph
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_2_co2
  - entity: sensor.cleargrass_1_temp
hours_to_show: 8
refresh_interval: 0
title: Tooltip (text)
style:
  .content state-history-charts:
    $:
      state-history-chart-line:
        $:
          ha-chart-base:
            $:
              '#chartTarget div': |
                .chartTooltip {
                  background-color: rgba(0,0,255,0.7);
                }

ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅464Γ—284 11.8 KB

Obsolete code 
type: history-graph
entities:
  - entity: sun.sun
    name: Sun
  - entity: binary_sensor.net_is_available_internet
    name: Internet
hours_to_show: 8
refresh_interval: 0
title: Tooltip (background)
style:
  .content state-history-charts:
    $:
      state-history-chart-timeline:
        $:
          ha-chart-base:
            $:
              '#chartTarget div': |
                .chartTooltip {
                  background-color: rgba(0,0,255,0.7);
                }

Colored scale:
(05.01.25: may be not persistent)

image
image475Γ—549 18.3 KB

Code 
type: vertical-stack
cards:
  - type: history-graph
    entities:
      - entity: sun.sun
        name: Sun
      - entity: binary_sensor.net_is_available_internet
        name: Internet
    hours_to_show: 8
    refresh_interval: 0
    title: Colored scale
    card_mod:
      style: |
        .content {
          --secondary-text-color: red !important;
          --divider-color: cyan !important;
        }
  - type: history-graph
    entities:
      - entity: sensor.xiaomi_cg_1_co2
        name: CO2
    hours_to_show: 8
    refresh_interval: 0
    title: Colored scale
    card_mod:
      style: |
        .content {
          --primary-text-color: red !important;
          --divider-color: cyan !important;
          
        }

Colored β€œaxis pointer” line:

image
image488Γ—285 19.5 KB

code 
type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
card_mod:
  style: |
    ha-card {
      --info-color: yellow;
    }

More examples are described here.

5 Likes
"mini-graph-card" & "history-graph": using a decluttering template