hass.tibber_prices/user/assets/js/9c889300.5ac661e2.js

"use strict";(globalThis.webpackChunkdocs_split_user=globalThis.webpackChunkdocs_split_user||[]).push([[9423],{8438:(e,n,r)=>{r.r(n),r.d(n,{assets:()=>l,contentTitle:()=>c,default:()=>h,frontMatter:()=>i,metadata:()=>o,toc:()=>a});const o=JSON.parse('{"id":"icon-colors","title":"Dynamic Icon Colors","description":"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.","source":"@site/docs/icon-colors.md","sourceDirName":".","slug":"/icon-colors","permalink":"/hass.tibber_prices/user/icon-colors","draft":false,"unlisted":false,"editUrl":"https://github.com/jpawlowski/hass.tibber_prices/tree/main/docs/user/docs/icon-colors.md","tags":[],"version":"current","lastUpdatedAt":1764985026000,"frontMatter":{"comments":false},"sidebar":"tutorialSidebar","previous":{"title":"Dynamic Icons","permalink":"/hass.tibber_prices/user/dynamic-icons"},"next":{"title":"Actions (Services)","permalink":"/hass.tibber_prices/user/actions"}}');var t=r(4848),s=r(8453);const i={comments:!1},c="Dynamic Icon Colors",l={},a=[{value:"What is icon_color?",id:"what-is-icon_color",level:2},{value:"Why CSS Variables?",id:"why-css-variables",level:3},{value:"Which Sensors Support icon_color?",id:"which-sensors-support-icon_color",level:2},{value:"When to Use icon_color vs. State Value",id:"when-to-use-icon_color-vs-state-value",level:2},{value:"How to Use icon_color in Your Dashboard",id:"how-to-use-icon_color-in-your-dashboard",level:2},{value:"Method 1: Custom Button Card (Recommended)",id:"method-1-custom-button-card-recommended",level:3},{value:"Method 2: Entities Card with card_mod",id:"method-2-entities-card-with-card_mod",level:3},{value:"Method 3: Mushroom Cards",id:"method-3-mushroom-cards",level:3},{value:"Method 4: Glance Card with card_mod",id:"method-4-glance-card-with-card_mod",level:3},{value:"Complete Dashboard Example",id:"complete-dashboard-example",level:2},{value:"CSS Color Variables",id:"css-color-variables",level:2},{value:"Using Custom Colors",id:"using-custom-colors",level:3},{value:"Option 1: Use icon_color but Override in Your Theme",id:"option-1-use-icon_color-but-override-in-your-theme",level:4},{value:"Option 2: Interpret State Value Directly",id:"option-2-interpret-state-value-directly",level:4},{value:"Which Approach Should You Use?",id:"which-approach-should-you-use",level:3},{value:"Troubleshooting",id:"troubleshooting",level:2},{value:"See Also",id:"see-also",level:2}];function d(e){const n={a:"a",blockquote:"blockquote",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"dynamic-icon-colors",children:"Dynamic Icon Colors"})}),"\n",(0,t.jsxs)(n.p,{children:["Many sensors in the Tibber Prices integration provide an ",(0,t.jsx)(n.code,{children:"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."]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"What makes icon_color special:"})," Instead of writing complex if/else logic to interpret the sensor state, you can simply use the ",(0,t.jsx)(n.code,{children:"icon_color"})," value directly - it already contains the appropriate CSS color variable for the current state."]}),"\n",(0,t.jsxs)(n.blockquote,{children:["\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Related:"})," Many sensors also automatically change their ",(0,t.jsx)(n.strong,{children:"icon"})," based on state. See the ",(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.a,{href:"/hass.tibber_prices/user/dynamic-icons",children:"Dynamic Icons Guide"})})," for details."]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"what-is-icon_color",children:"What is icon_color?"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"icon_color"})," attribute contains a ",(0,t.jsx)(n.strong,{children:"CSS variable name"})," (not a direct color value) that changes based on the sensor's state. For example:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Price level sensors"}),": ",(0,t.jsx)(n.code,{children:"var(--success-color)"})," for cheap, ",(0,t.jsx)(n.code,{children:"var(--error-color)"})," for expensive"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Binary sensors"}),": ",(0,t.jsx)(n.code,{children:"var(--success-color)"})," when in best price period, ",(0,t.jsx)(n.code,{children:"var(--error-color)"})," during peak price"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Volatility"}),": ",(0,t.jsx)(n.code,{children:"var(--success-color)"})," for low volatility, ",(0,t.jsx)(n.code,{children:"var(--error-color)"})," for very high"]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"why-css-variables",children:"Why CSS Variables?"}),"\n",(0,t.jsxs)(n.p,{children:["Using CSS variables like ",(0,t.jsx)(n.code,{children:"var(--success-color)"})," instead of hardcoded colors (like ",(0,t.jsx)(n.code,{children:"#00ff00"}),") has important advantages:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["\u2705 ",(0,t.jsx)(n.strong,{children:"Automatic theme adaptation"})," - Colors change with light/dark mode"]}),"\n",(0,t.jsxs)(n.li,{children:["\u2705 ",(0,t.jsx)(n.strong,{children:"Consistent with your theme"})," - Uses your theme's color scheme"]}),"\n",(0,t.jsxs)(n.li,{children:["\u2705 ",(0,t.jsx)(n.strong,{children:"Future-proof"})," - Works with custom themes and future HA updates"]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["You can use the ",(0,t.jsx)(n.code,{children:"icon_color"})," attribute directly in your card templates, or interpret the sensor state yourself if you prefer custom colors (see examples below)."]}),"\n",(0,t.jsx)(n.h2,{id:"which-sensors-support-icon_color",children:"Which Sensors Support icon_color?"}),"\n",(0,t.jsxs)(n.p,{children:["Many sensors provide the ",(0,t.jsx)(n.code,{children:"icon_color"})," attribute for dynamic styling. To see if a sensor has this attribute:"]}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:["Go to ",(0,t.jsx)(n.strong,{children:"Developer Tools"})," \u2192 ",(0,t.jsx)(n.strong,{children:"States"})," in Home Assistant"]}),"\n",(0,t.jsxs)(n.li,{children:["Search for your sensor (e.g., ",(0,t.jsx)(n.code,{children:"sensor.tibber_home_current_interval_price_level"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:["Look for ",(0,t.jsx)(n.code,{children:"icon_color"})," in the attributes section"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Common sensor types with icon_color:"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Price level sensors (e.g., ",(0,t.jsx)(n.code,{children:"current_interval_price_level"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:["Price rating sensors (e.g., ",(0,t.jsx)(n.code,{children:"current_interval_price_rating"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:["Volatility sensors (e.g., ",(0,t.jsx)(n.code,{children:"volatility_today"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:["Price trend sensors (e.g., ",(0,t.jsx)(n.code,{children:"price_trend_next_3h"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:["Binary sensors (e.g., ",(0,t.jsx)(n.code,{children:"best_price_period"}),", ",(0,t.jsx)(n.code,{children:"peak_price_period"}),")"]}),"\n",(0,t.jsxs)(n.li,{children:["Timing sensors (e.g., ",(0,t.jsx)(n.code,{children:"best_price_time_until_start"}),", ",(0,t.jsx)(n.code,{children:"best_price_progress"}),")"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"The colors adapt to the sensor's state - cheaper prices typically show green, expensive prices red, and neutral states gray."}),"\n",(0,t.jsx)(n.h2,{id:"when-to-use-icon_color-vs-state-value",children:"When to Use icon_color vs. State Value"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsxs)(n.strong,{children:["Use ",(0,t.jsx)(n.code,{children:"icon_color"})," when:"]})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\u2705 You can apply the CSS variable directly (icons, text colors, borders)"}),"\n",(0,t.jsx)(n.li,{children:"\u2705 Your card supports CSS variable substitution"}),"\n",(0,t.jsx)(n.li,{children:"\u2705 You want simple, clean code without if/else logic"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Use the state value directly when:"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"\u26a0\ufe0f You need to convert the color (e.g., CSS variable \u2192 RGBA with transparency)"}),"\n",(0,t.jsxs)(n.li,{children:["\u26a0\ufe0f You need different colors than what ",(0,t.jsx)(n.code,{children:"icon_color"})," provides"]}),"\n",(0,t.jsx)(n.li,{children:"\u26a0\ufe0f You're building complex conditional logic anyway"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Example of when NOT to use icon_color:"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"# \u274c DON'T: Converting icon_color requires if/else anyway\ncard:\n  - background: |\n      [[[\n        const color = entity.attributes.icon_color;\n        if (color === 'var(--success-color)') return 'rgba(76, 175, 80, 0.1)';\n        if (color === 'var(--error-color)') return 'rgba(244, 67, 54, 0.1)';\n        // ... more if statements\n      ]]]\n\n# \u2705 DO: Interpret state directly if you need custom logic\ncard:\n  - background: |\n      [[[\n        const level = entity.state;\n        if (level === 'very_cheap' || level === 'cheap') return 'rgba(76, 175, 80, 0.1)';\n        if (level === 'very_expensive' || level === 'expensive') return 'rgba(244, 67, 54, 0.1)';\n        return 'transparent';\n      ]]]\n"})}),"\n",(0,t.jsxs)(n.p,{children:["The advantage of ",(0,t.jsx)(n.code,{children:"icon_color"})," is simplicity - if you need complex logic, you lose that advantage."]}),"\n",(0,t.jsx)(n.h2,{id:"how-to-use-icon_color-in-your-dashboard",children:"How to Use icon_color in Your Dashboard"}),"\n",(0,t.jsx)(n.h3,{id:"method-1-custom-button-card-recommended",children:"Method 1: Custom Button Card (Recommended)"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsxs)(n.a,{href:"https://github.com/custom-cards/button-card",children:["custom",":button-card"]})," from HACS supports dynamic icon colors."]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Example: Icon color only"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: custom:button-card\nentity: sensor.tibber_home_current_interval_price_level\nname: Current Price Level\nshow_state: true\nicon: mdi:cash\nstyles:\n    icon:\n        - color: |\n              [[[\n                return entity.attributes.icon_color || 'var(--state-icon-color)';\n              ]]]\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Example: Icon AND state value with same color"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: custom:button-card\nentity: sensor.tibber_home_current_interval_price_level\nname: Current Price Level\nshow_state: true\nicon: mdi:cash\nstyles:\n    icon:\n        - color: |\n              [[[\n                return entity.attributes.icon_color || 'var(--state-icon-color)';\n              ]]]\n    state:\n        - color: |\n              [[[\n                return entity.attributes.icon_color || 'var(--primary-text-color)';\n              ]]]\n        - font-weight: bold\n"})}),"\n",(0,t.jsx)(n.h3,{id:"method-2-entities-card-with-card_mod",children:"Method 2: Entities Card with card_mod"}),"\n",(0,t.jsx)(n.p,{children:"Use Home Assistant's built-in entities card with card_mod for icon and state colors:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: entities\nentities:\n    - entity: sensor.tibber_home_current_interval_price_level\ncard_mod:\n    style:\n        hui-generic-entity-row:\n            $: |\n                state-badge {\n                  color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }} !important;\n                }\n                .info {\n                  color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }} !important;\n                }\n"})}),"\n",(0,t.jsx)(n.h3,{id:"method-3-mushroom-cards",children:"Method 3: Mushroom Cards"}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.a,{href:"https://github.com/piitaya/lovelace-mushroom",children:"Mushroom cards"})," support card_mod for icon and text colors:"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Icon color only:"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: custom:mushroom-entity-card\nentity: binary_sensor.tibber_home_best_price_period\nname: Best Price Period\nicon: mdi:piggy-bank\ncard_mod:\n    style: |\n        ha-card {\n          --card-mod-icon-color: {{ state_attr('binary_sensor.tibber_home_best_price_period', 'icon_color') }};\n        }\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Icon and state value:"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: custom:mushroom-entity-card\nentity: sensor.tibber_home_current_interval_price_level\nname: Price Level\ncard_mod:\n    style: |\n        ha-card {\n          --card-mod-icon-color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }};\n          --primary-text-color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }};\n        }\n"})}),"\n",(0,t.jsx)(n.h3,{id:"method-4-glance-card-with-card_mod",children:"Method 4: Glance Card with card_mod"}),"\n",(0,t.jsx)(n.p,{children:"Combine multiple sensors with dynamic colors:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: glance\nentities:\n    - entity: sensor.tibber_home_current_interval_price_level\n    - entity: sensor.tibber_home_volatility_today\n    - entity: binary_sensor.tibber_home_best_price_period\ncard_mod:\n    style: |\n        ha-card div.entity:nth-child(1) state-badge {\n          color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }} !important;\n        }\n        ha-card div.entity:nth-child(2) state-badge {\n          color: {{ state_attr('sensor.tibber_home_volatility_today', 'icon_color') }} !important;\n        }\n        ha-card div.entity:nth-child(3) state-badge {\n          color: {{ state_attr('binary_sensor.tibber_home_best_price_period', 'icon_color') }} !important;\n        }\n"})}),"\n",(0,t.jsx)(n.h2,{id:"complete-dashboard-example",children:"Complete Dashboard Example"}),"\n",(0,t.jsx)(n.p,{children:"Here's a complete example combining multiple sensors with dynamic colors:"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: vertical-stack\ncards:\n    # Current price status\n    - type: horizontal-stack\n      cards:\n          - type: custom:button-card\n            entity: sensor.tibber_home_current_interval_price_level\n            name: Price Level\n            show_state: true\n            styles:\n                icon:\n                    - color: |\n                          [[[\n                            return entity.attributes.icon_color || 'var(--state-icon-color)';\n                          ]]]\n\n          - type: custom:button-card\n            entity: sensor.tibber_home_current_interval_price_rating\n            name: Price Rating\n            show_state: true\n            styles:\n                icon:\n                    - color: |\n                          [[[\n                            return entity.attributes.icon_color || 'var(--state-icon-color)';\n                          ]]]\n\n    # Binary sensors for periods\n    - type: horizontal-stack\n      cards:\n          - type: custom:button-card\n            entity: binary_sensor.tibber_home_best_price_period\n            name: Best Price Period\n            show_state: true\n            icon: mdi:piggy-bank\n            styles:\n                icon:\n                    - color: |\n                          [[[\n                            return entity.attributes.icon_color || 'var(--state-icon-color)';\n                          ]]]\n\n          - type: custom:button-card\n            entity: binary_sensor.tibber_home_peak_price_period\n            name: Peak Price Period\n            show_state: true\n            icon: mdi:alert-circle\n            styles:\n                icon:\n                    - color: |\n                          [[[\n                            return entity.attributes.icon_color || 'var(--state-icon-color)';\n                          ]]]\n\n    # Volatility and trends\n    - type: horizontal-stack\n      cards:\n          - type: custom:button-card\n            entity: sensor.tibber_home_volatility_today\n            name: Volatility\n            show_state: true\n            styles:\n                icon:\n                    - color: |\n                          [[[\n                            return entity.attributes.icon_color || 'var(--state-icon-color)';\n                          ]]]\n\n          - type: custom:button-card\n            entity: sensor.tibber_home_price_trend_next_3h\n            name: Next 3h Trend\n            show_state: true\n            styles:\n                icon:\n                    - color: |\n                          [[[\n                            return entity.attributes.icon_color || 'var(--state-icon-color)';\n                          ]]]\n"})}),"\n",(0,t.jsx)(n.h2,{id:"css-color-variables",children:"CSS Color Variables"}),"\n",(0,t.jsx)(n.p,{children:"The integration uses Home Assistant's standard CSS variables for theme compatibility:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"var(--success-color)"})," - Green (good/cheap/low)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"var(--info-color)"})," - Blue (informational)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"var(--warning-color)"})," - Orange (caution/expensive)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"var(--error-color)"})," - Red (alert/very expensive/high)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"var(--state-icon-color)"})," - Gray (neutral/normal)"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"var(--disabled-color)"})," - Light gray (no data/inactive)"]}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:"These automatically adapt to your theme's light/dark mode and custom color schemes."}),"\n",(0,t.jsx)(n.h3,{id:"using-custom-colors",children:"Using Custom Colors"}),"\n",(0,t.jsx)(n.p,{children:"If you want to override the theme colors with your own, you have two options:"}),"\n",(0,t.jsx)(n.h4,{id:"option-1-use-icon_color-but-override-in-your-theme",children:"Option 1: Use icon_color but Override in Your Theme"}),"\n",(0,t.jsxs)(n.p,{children:["Define custom colors in your theme configuration (",(0,t.jsx)(n.code,{children:"themes.yaml"}),"):"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:'my_custom_theme:\n    # Override standard variables\n    success-color: "#00C853" # Custom green\n    error-color: "#D32F2F" # Custom red\n    warning-color: "#F57C00" # Custom orange\n    info-color: "#0288D1" # Custom blue\n'})}),"\n",(0,t.jsxs)(n.p,{children:["The ",(0,t.jsx)(n.code,{children:"icon_color"})," attribute will automatically use your custom theme colors."]}),"\n",(0,t.jsx)(n.h4,{id:"option-2-interpret-state-value-directly",children:"Option 2: Interpret State Value Directly"}),"\n",(0,t.jsxs)(n.p,{children:["Instead of using ",(0,t.jsx)(n.code,{children:"icon_color"}),", read the sensor state and apply your own colors:"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Example: Custom colors for price level"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: custom:button-card\nentity: sensor.tibber_home_current_interval_price_level\nname: Current Price Level\nshow_state: true\nicon: mdi:cash\nstyles:\n    icon:\n        - color: |\n              [[[\n                const level = entity.state;\n                if (level === 'very_cheap') return '#00E676';    // Bright green\n                if (level === 'cheap') return '#66BB6A';         // Light green\n                if (level === 'normal') return '#9E9E9E';        // Gray\n                if (level === 'expensive') return '#FF9800';     // Orange\n                if (level === 'very_expensive') return '#F44336'; // Red\n                return 'var(--state-icon-color)';  // Fallback\n              ]]]\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Example: Custom colors for binary sensor"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: custom:button-card\nentity: binary_sensor.tibber_home_best_price_period\nname: Best Price Period\nshow_state: true\nicon: mdi:piggy-bank\nstyles:\n    icon:\n        - color: |\n              [[[\n                // Use state directly, not icon_color\n                return entity.state === 'on' ? '#4CAF50' : '#9E9E9E';\n              ]]]\n    card:\n        - background: |\n              [[[\n                return entity.state === 'on' ? 'rgba(76, 175, 80, 0.1)' : 'transparent';\n              ]]]\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Example: Custom colors for volatility"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: custom:button-card\nentity: sensor.tibber_home_volatility_today\nname: Volatility Today\nshow_state: true\nstyles:\n    icon:\n        - color: |\n              [[[\n                const volatility = entity.state;\n                if (volatility === 'low') return '#4CAF50';       // Green\n                if (volatility === 'moderate') return '#2196F3';  // Blue\n                if (volatility === 'high') return '#FF9800';      // Orange\n                if (volatility === 'very_high') return '#F44336'; // Red\n                return 'var(--state-icon-color)';\n              ]]]\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Example: Custom colors for price rating"})}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-yaml",children:"type: custom:button-card\nentity: sensor.tibber_home_current_interval_price_rating\nname: Price Rating\nshow_state: true\nstyles:\n    icon:\n        - color: |\n              [[[\n                const rating = entity.state;\n                if (rating === 'low') return '#00C853';      // Dark green\n                if (rating === 'normal') return '#78909C';   // Blue-gray\n                if (rating === 'high') return '#D32F2F';     // Dark red\n                return 'var(--state-icon-color)';\n              ]]]\n"})}),"\n",(0,t.jsx)(n.h3,{id:"which-approach-should-you-use",children:"Which Approach Should You Use?"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{children:"Use Case"}),(0,t.jsx)(n.th,{children:"Recommended Approach"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Want theme-consistent colors"}),(0,t.jsxs)(n.td,{children:["\u2705 Use ",(0,t.jsx)(n.code,{children:"icon_color"})," directly"]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Want light/dark mode support"}),(0,t.jsxs)(n.td,{children:["\u2705 Use ",(0,t.jsx)(n.code,{children:"icon_color"})," directly"]})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Want custom theme colors"}),(0,t.jsx)(n.td,{children:"\u2705 Override CSS variables in theme"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Want specific hardcoded colors"}),(0,t.jsx)(n.td,{children:"\u26a0\ufe0f Interpret state value directly"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{children:"Multiple themes with different colors"}),(0,t.jsxs)(n.td,{children:["\u2705 Use ",(0,t.jsx)(n.code,{children:"icon_color"})," directly"]})]})]})]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Recommendation:"})," Use ",(0,t.jsx)(n.code,{children:"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."]}),"\n",(0,t.jsx)(n.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Icons not changing color:"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:["Make sure you're using a card that supports custom styling (like custom",":button-card"," or card_mod)"]}),"\n",(0,t.jsxs)(n.li,{children:["Check that the entity actually has the ",(0,t.jsx)(n.code,{children:"icon_color"})," attribute (inspect in Developer Tools \u2192 States)"]}),"\n",(0,t.jsx)(n.li,{children:"Verify your Home Assistant theme supports the CSS variables"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Colors look wrong:"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"The colors are theme-dependent. Try switching themes to see if they appear correctly"}),"\n",(0,t.jsx)(n.li,{children:"Some custom themes may override the standard CSS variables with unexpected colors"}),"\n"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.strong,{children:"Want different colors?"})}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsx)(n.li,{children:"You can override the colors in your theme configuration"}),"\n",(0,t.jsxs)(n.li,{children:["Or use conditional logic in your card templates based on the state value instead of ",(0,t.jsx)(n.code,{children:"icon_color"})]}),"\n"]}),"\n",(0,t.jsx)(n.h2,{id:"see-also",children:"See Also"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"/hass.tibber_prices/user/sensors",children:"Sensors Reference"})," - Complete list of available sensors"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"/hass.tibber_prices/user/automation-examples",children:"Automation Examples"})," - Use color-coded sensors in automations"]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.a,{href:"/hass.tibber_prices/user/configuration",children:"Configuration Guide"})," - Adjust thresholds for price levels and ratings"]}),"\n"]})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(d,{...e})}):d(e)}}}]);