Dynamic Icon Colors

Many sensors in the Tibber Prices integration provide an icon_color attribute that allows you to dynamically color elements in your dashboard based on the sensor's state. This is particularly useful for visual dashboards where you want instant recognition of price levels or states.

What makes icon_color special: Instead of writing complex if/else logic to interpret the sensor state, you can simply use the icon_color value directly - it already contains the appropriate CSS color variable for the current state.

Related: Many sensors also automatically change their icon based on state. See the Dynamic Icons Guide for details.

What is icon_color?

The icon_color attribute contains a CSS variable name (not a direct color value) that changes based on the sensor's state. For example:

• Price level sensors: var(--success-color) for cheap, var(--error-color) for expensive
• Binary sensors: var(--success-color) when in best price period, var(--error-color) during peak price
• Volatility: var(--success-color) for low volatility, var(--error-color) for very high

Why CSS Variables?

Using CSS variables like var(--success-color) instead of hardcoded colors (like #00ff00) has important advantages:

• ✅ Automatic theme adaptation - Colors change with light/dark mode
• ✅ Consistent with your theme - Uses your theme's color scheme
• ✅ Future-proof - Works with custom themes and future HA updates

You can use the icon_color attribute directly in your card templates, or interpret the sensor state yourself if you prefer custom colors (see examples below).

Which Sensors Support icon_color?

Many sensors provide the icon_color attribute for dynamic styling. To see if a sensor has this attribute:

1. Go to Developer Tools → States in Home Assistant
2. Search for your sensor (e.g., sensor.tibber_home_current_interval_price_level)
3. Look for icon_color in the attributes section

Common sensor types with icon_color:

• Price level sensors (e.g., current_interval_price_level)
• Price rating sensors (e.g., current_interval_price_rating)
• Volatility sensors (e.g., volatility_today)
• Price trend sensors (e.g., price_trend_next_3h)
• Binary sensors (e.g., best_price_period, peak_price_period)
• Timing sensors (e.g., best_price_time_until_start, best_price_progress)

The colors adapt to the sensor's state - cheaper prices typically show green, expensive prices red, and neutral states gray.

When to Use icon_color vs. State Value

Use icon_color when:

• ✅ You can apply the CSS variable directly (icons, text colors, borders)
• ✅ Your card supports CSS variable substitution
• ✅ You want simple, clean code without if/else logic

Use the state value directly when:

• ⚠️ You need to convert the color (e.g., CSS variable → RGBA with transparency)
• ⚠️ You need different colors than what icon_color provides
• ⚠️ You're building complex conditional logic anyway

Example of when NOT to use icon_color:

# ❌ DON'T: Converting icon_color requires if/else anyway
card:
  - background: |
      [[[
        const color = entity.attributes.icon_color;
        if (color === 'var(--success-color)') return 'rgba(76, 175, 80, 0.1)';
        if (color === 'var(--error-color)') return 'rgba(244, 67, 54, 0.1)';
        // ... more if statements
      ]]]

# ✅ DO: Interpret state directly if you need custom logic
card:
  - background: |
      [[[
        const level = entity.state;
        if (level === 'very_cheap' || level === 'cheap') return 'rgba(76, 175, 80, 0.1)';
        if (level === 'very_expensive' || level === 'expensive') return 'rgba(244, 67, 54, 0.1)';
        return 'transparent';
      ]]]

The advantage of icon_color is simplicity - if you need complex logic, you lose that advantage.

How to Use icon_color in Your Dashboard

Method 1: Custom Button Card (Recommended)

The custom:button-card from HACS supports dynamic icon colors.

Example: Icon color only

type: custom:button-card
entity: sensor.tibber_home_current_interval_price_level
name: Current Price Level
show_state: true
icon: mdi:cash
styles:
    icon:
        - color: |
              [[[
                return entity.attributes.icon_color || 'var(--state-icon-color)';
              ]]]

Example: Icon AND state value with same color

type: custom:button-card
entity: sensor.tibber_home_current_interval_price_level
name: Current Price Level
show_state: true
icon: mdi:cash
styles:
    icon:
        - color: |
              [[[
                return entity.attributes.icon_color || 'var(--state-icon-color)';
              ]]]
    state:
        - color: |
              [[[
                return entity.attributes.icon_color || 'var(--primary-text-color)';
              ]]]
        - font-weight: bold

Method 2: Entities Card with card_mod

Use Home Assistant's built-in entities card with card_mod for icon and state colors:

type: entities
entities:
    - entity: sensor.tibber_home_current_interval_price_level
card_mod:
    style:
        hui-generic-entity-row:
            $: |
                state-badge {
                  color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }} !important;
                }
                .info {
                  color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }} !important;
                }

Method 3: Mushroom Cards

The Mushroom cards support card_mod for icon and text colors:

Icon color only:

type: custom:mushroom-entity-card
entity: binary_sensor.tibber_home_best_price_period
name: Best Price Period
icon: mdi:piggy-bank
card_mod:
    style: |
        ha-card {
          --card-mod-icon-color: {{ state_attr('binary_sensor.tibber_home_best_price_period', 'icon_color') }};
        }

Icon and state value:

type: custom:mushroom-entity-card
entity: sensor.tibber_home_current_interval_price_level
name: Price Level
card_mod:
    style: |
        ha-card {
          --card-mod-icon-color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }};
          --primary-text-color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }};
        }

Method 4: Glance Card with card_mod

Combine multiple sensors with dynamic colors:

type: glance
entities:
    - entity: sensor.tibber_home_current_interval_price_level
    - entity: sensor.tibber_home_volatility_today
    - entity: binary_sensor.tibber_home_best_price_period
card_mod:
    style: |
        ha-card div.entity:nth-child(1) state-badge {
          color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }} !important;
        }
        ha-card div.entity:nth-child(2) state-badge {
          color: {{ state_attr('sensor.tibber_home_volatility_today', 'icon_color') }} !important;
        }
        ha-card div.entity:nth-child(3) state-badge {
          color: {{ state_attr('binary_sensor.tibber_home_best_price_period', 'icon_color') }} !important;
        }

Complete Dashboard Example

Here's a complete example combining multiple sensors with dynamic colors:

type: vertical-stack
cards:
    # Current price status
    - type: horizontal-stack
      cards:
          - type: custom:button-card
            entity: sensor.tibber_home_current_interval_price_level
            name: Price Level
            show_state: true
            styles:
                icon:
                    - color: |
                          [[[
                            return entity.attributes.icon_color || 'var(--state-icon-color)';
                          ]]]

          - type: custom:button-card
            entity: sensor.tibber_home_current_interval_price_rating
            name: Price Rating
            show_state: true
            styles:
                icon:
                    - color: |
                          [[[
                            return entity.attributes.icon_color || 'var(--state-icon-color)';
                          ]]]

    # Binary sensors for periods
    - type: horizontal-stack
      cards:
          - type: custom:button-card
            entity: binary_sensor.tibber_home_best_price_period
            name: Best Price Period
            show_state: true
            icon: mdi:piggy-bank
            styles:
                icon:
                    - color: |
                          [[[
                            return entity.attributes.icon_color || 'var(--state-icon-color)';
                          ]]]

          - type: custom:button-card
            entity: binary_sensor.tibber_home_peak_price_period
            name: Peak Price Period
            show_state: true
            icon: mdi:alert-circle
            styles:
                icon:
                    - color: |
                          [[[
                            return entity.attributes.icon_color || 'var(--state-icon-color)';
                          ]]]

    # Volatility and trends
    - type: horizontal-stack
      cards:
          - type: custom:button-card
            entity: sensor.tibber_home_volatility_today
            name: Volatility
            show_state: true
            styles:
                icon:
                    - color: |
                          [[[
                            return entity.attributes.icon_color || 'var(--state-icon-color)';
                          ]]]

          - type: custom:button-card
            entity: sensor.tibber_home_price_trend_next_3h
            name: Next 3h Trend
            show_state: true
            styles:
                icon:
                    - color: |
                          [[[
                            return entity.attributes.icon_color || 'var(--state-icon-color)';
                          ]]]

CSS Color Variables

The integration uses Home Assistant's standard CSS variables for theme compatibility:

• var(--success-color) - Green (good/cheap/low)
• var(--info-color) - Blue (informational)
• var(--warning-color) - Orange (caution/expensive)
• var(--error-color) - Red (alert/very expensive/high)
• var(--state-icon-color) - Gray (neutral/normal)
• var(--disabled-color) - Light gray (no data/inactive)

These automatically adapt to your theme's light/dark mode and custom color schemes.

Using Custom Colors

If you want to override the theme colors with your own, you have two options:

Option 1: Use icon_color but Override in Your Theme

Define custom colors in your theme configuration (themes.yaml):

my_custom_theme:
    # Override standard variables
    success-color: "#00C853" # Custom green
    error-color: "#D32F2F" # Custom red
    warning-color: "#F57C00" # Custom orange
    info-color: "#0288D1" # Custom blue

The icon_color attribute will automatically use your custom theme colors.

Option 2: Interpret State Value Directly

Instead of using icon_color, read the sensor state and apply your own colors:

Example: Custom colors for price level

type: custom:button-card
entity: sensor.tibber_home_current_interval_price_level
name: Current Price Level
show_state: true
icon: mdi:cash
styles:
    icon:
        - color: |
              [[[
                const level = entity.state;
                if (level === 'very_cheap') return '#00E676';    // Bright green
                if (level === 'cheap') return '#66BB6A';         // Light green
                if (level === 'normal') return '#9E9E9E';        // Gray
                if (level === 'expensive') return '#FF9800';     // Orange
                if (level === 'very_expensive') return '#F44336'; // Red
                return 'var(--state-icon-color)';  // Fallback
              ]]]

Example: Custom colors for binary sensor

type: custom:button-card
entity: binary_sensor.tibber_home_best_price_period
name: Best Price Period
show_state: true
icon: mdi:piggy-bank
styles:
    icon:
        - color: |
              [[[
                // Use state directly, not icon_color
                return entity.state === 'on' ? '#4CAF50' : '#9E9E9E';
              ]]]
    card:
        - background: |
              [[[
                return entity.state === 'on' ? 'rgba(76, 175, 80, 0.1)' : 'transparent';
              ]]]

Example: Custom colors for volatility

type: custom:button-card
entity: sensor.tibber_home_volatility_today
name: Volatility Today
show_state: true
styles:
    icon:
        - color: |
              [[[
                const volatility = entity.state;
                if (volatility === 'low') return '#4CAF50';       // Green
                if (volatility === 'moderate') return '#2196F3';  // Blue
                if (volatility === 'high') return '#FF9800';      // Orange
                if (volatility === 'very_high') return '#F44336'; // Red
                return 'var(--state-icon-color)';
              ]]]

Example: Custom colors for price rating

type: custom:button-card
entity: sensor.tibber_home_current_interval_price_rating
name: Price Rating
show_state: true
styles:
    icon:
        - color: |
              [[[
                const rating = entity.state;
                if (rating === 'low') return '#00C853';      // Dark green
                if (rating === 'normal') return '#78909C';   // Blue-gray
                if (rating === 'high') return '#D32F2F';     // Dark red
                return 'var(--state-icon-color)';
              ]]]

Which Approach Should You Use?

Use Case	Recommended Approach
Want theme-consistent colors	✅ Use icon_color directly
Want light/dark mode support	✅ Use icon_color directly
Want custom theme colors	✅ Override CSS variables in theme
Want specific hardcoded colors	⚠️ Interpret state value directly
Multiple themes with different colors	✅ Use icon_color directly

Recommendation: Use icon_color whenever possible for better theme integration. Only interpret the state directly if you need very specific color values that shouldn't change with themes.

Troubleshooting

Icons not changing color:

• Make sure you're using a card that supports custom styling (like custom:button-card or card_mod)
• Check that the entity actually has the icon_color attribute (inspect in Developer Tools → States)
• Verify your Home Assistant theme supports the CSS variables

Colors look wrong:

• The colors are theme-dependent. Try switching themes to see if they appear correctly
• Some custom themes may override the standard CSS variables with unexpected colors

Want different colors?

• You can override the colors in your theme configuration
• Or use conditional logic in your card templates based on the state value instead of icon_color

See Also

• Sensors Reference - Complete list of available sensors
• Automation Examples - Use color-coded sensors in automations
• Configuration Guide - Adjust thresholds for price levels and ratings