mirror of
https://github.com/jpawlowski/hass.tibber_prices.git
synced 2026-03-29 21:03:40 +00:00
146 lines
No EOL
107 KiB
HTML
146 lines
No EOL
107 KiB
HTML
<!doctype html>
|
||
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-icon-colors" data-has-hydrated="false">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="generator" content="Docusaurus v3.9.2">
|
||
<title data-rh="true">Dynamic Icon Colors | Tibber Prices Integration</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:image" content="https://jpawlowski.github.io/hass.tibber_prices/user/img/social-card.png"><meta data-rh="true" name="twitter:image" content="https://jpawlowski.github.io/hass.tibber_prices/user/img/social-card.png"><meta data-rh="true" property="og:url" content="https://jpawlowski.github.io/hass.tibber_prices/user/icon-colors"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Dynamic Icon Colors | Tibber Prices Integration"><meta data-rh="true" name="description" content="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."><meta data-rh="true" property="og:description" content="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."><link data-rh="true" rel="icon" href="/hass.tibber_prices/user/img/logo.svg"><link data-rh="true" rel="canonical" href="https://jpawlowski.github.io/hass.tibber_prices/user/icon-colors"><link data-rh="true" rel="alternate" href="https://jpawlowski.github.io/hass.tibber_prices/user/icon-colors" hreflang="en"><link data-rh="true" rel="alternate" href="https://jpawlowski.github.io/hass.tibber_prices/user/icon-colors" hreflang="x-default"><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Dynamic Icon Colors","item":"https://jpawlowski.github.io/hass.tibber_prices/user/icon-colors"}]}</script><link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap"><link rel="stylesheet" href="/hass.tibber_prices/user/assets/css/styles.be4f3d68.css">
|
||
<script src="/hass.tibber_prices/user/assets/js/runtime~main.624760e0.js" defer="defer"></script>
|
||
<script src="/hass.tibber_prices/user/assets/js/main.0445d6e2.js" defer="defer"></script>
|
||
</head>
|
||
<body class="navigation-with-keyboard">
|
||
<svg style="display: none;"><defs>
|
||
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
|
||
</defs></svg>
|
||
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><link rel="preload" as="image" href="/hass.tibber_prices/user/img/logo.svg"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/hass.tibber_prices/user/"><div class="navbar__logo"><img src="/hass.tibber_prices/user/img/logo.svg" alt="Tibber Prices Integration Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/hass.tibber_prices/user/img/logo.svg" alt="Tibber Prices Integration Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">Tibber Prices HA</b></a><a class="navbar__item navbar__link" href="/hass.tibber_prices/user/intro">User Guide</a><a href="https://jpawlowski.github.io/hass.tibber_prices/developer/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Developer Docs<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/hass.tibber_prices/user/icon-colors">Next 🚧</a><a href="https://github.com/jpawlowski/hass.tibber_prices" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input id="search_input_react" type="search" placeholder="Loading..." aria-label="Search" class="navbar__search-input search-bar" disabled=""></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/hass.tibber_prices/user/intro"><span title="User Documentation" class="linkLabel_WmDU">User Documentation</span></a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/installation"><span title="🚀 Getting Started" class="categoryLinkLabel_W154">🚀 Getting Started</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/installation"><span title="Installation" class="linkLabel_WmDU">Installation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/configuration"><span title="Configuration" class="linkLabel_WmDU">Configuration</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/concepts"><span title="📖 Core Concepts" class="categoryLinkLabel_W154">📖 Core Concepts</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/concepts"><span title="Core Concepts" class="linkLabel_WmDU">Core Concepts</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/glossary"><span title="Glossary" class="linkLabel_WmDU">Glossary</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret menu__link--active" role="button" aria-expanded="true" href="/hass.tibber_prices/user/sensors"><span title="📊 Features" class="categoryLinkLabel_W154">📊 Features</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/sensors"><span title="Sensors" class="linkLabel_WmDU">Sensors</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/period-calculation"><span title="Period Calculation" class="linkLabel_WmDU">Period Calculation</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/dynamic-icons"><span title="Dynamic Icons" class="linkLabel_WmDU">Dynamic Icons</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/hass.tibber_prices/user/icon-colors"><span title="Dynamic Icon Colors" class="linkLabel_WmDU">Dynamic Icon Colors</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/actions"><span title="Actions (Services)" class="linkLabel_WmDU">Actions (Services)</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/dashboard-examples"><span title="🎨 Visualization" class="categoryLinkLabel_W154">🎨 Visualization</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/dashboard-examples"><span title="Dashboard Examples" class="linkLabel_WmDU">Dashboard Examples</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/chart-examples"><span title="Chart Examples" class="linkLabel_WmDU">Chart Examples</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/automation-examples"><span title="🤖 Automation" class="categoryLinkLabel_W154">🤖 Automation</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/automation-examples"><span title="Automation Examples" class="linkLabel_WmDU">Automation Examples</span></a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="categoryLink_byQd menu__link menu__link--sublist menu__link--sublist-caret" role="button" aria-expanded="true" href="/hass.tibber_prices/user/faq"><span title="🔧 Help & Support" class="categoryLinkLabel_W154">🔧 Help & Support</span></a></div><ul class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/faq"><span title="FAQ - Frequently Asked Questions" class="linkLabel_WmDU">FAQ - Frequently Asked Questions</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/hass.tibber_prices/user/troubleshooting"><span title="Troubleshooting" class="linkLabel_WmDU">Troubleshooting</span></a></li></ul></li></ul></nav><button type="button" title="Collapse sidebar" aria-label="Collapse sidebar" class="button button--secondary button--outline collapseSidebarButton_PEFL"><svg width="20" height="20" aria-hidden="true" class="collapseSidebarButtonIcon_kv0_"><g fill="#7a7a7a"><path d="M9.992 10.023c0 .2-.062.399-.172.547l-4.996 7.492a.982.982 0 01-.828.454H1c-.55 0-1-.453-1-1 0-.2.059-.403.168-.551l4.629-6.942L.168 3.078A.939.939 0 010 2.528c0-.548.45-.997 1-.997h2.996c.352 0 .649.18.828.45L9.82 9.472c.11.148.172.347.172.55zm0 0"></path><path d="M19.98 10.023c0 .2-.058.399-.168.547l-4.996 7.492a.987.987 0 01-.828.454h-3c-.547 0-.996-.453-.996-1 0-.2.059-.403.168-.551l4.625-6.942-4.625-6.945a.939.939 0 01-.168-.55 1 1 0 01.996-.997h3c.348 0 .649.18.828.45l4.996 7.492c.11.148.168.347.168.55zm0 0"></path></g></svg></button></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="theme-doc-version-banner alert alert--warning margin-bottom--md" role="alert"><div>This is unreleased documentation for <!-- -->Tibber Prices Integration<!-- --> <b>Next 🚧</b> version.</div><div class="margin-top--md">For up-to-date documentation, see the <b><a href="/hass.tibber_prices/user/icon-colors">latest version</a></b> (<!-- -->Next 🚧<!-- -->).</div></div><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/hass.tibber_prices/user/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item"><span class="breadcrumbs__link">📊 Features</span></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Dynamic Icon Colors</span></li></ul></nav><span class="theme-doc-version-badge badge badge--secondary">Version: Next 🚧</span><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Dynamic Icon Colors</h1></header>
|
||
<p>Many sensors in the Tibber Prices integration provide an <code>icon_color</code> 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.</p>
|
||
<p><strong>What makes icon_color special:</strong> Instead of writing complex if/else logic to interpret the sensor state, you can simply use the <code>icon_color</code> value directly - it already contains the appropriate CSS color variable for the current state.</p>
|
||
<blockquote>
|
||
<p><strong>Related:</strong> Many sensors also automatically change their <strong>icon</strong> based on state. See the <strong><a class="" href="/hass.tibber_prices/user/dynamic-icons">Dynamic Icons Guide</a></strong> for details.</p>
|
||
</blockquote>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="what-is-icon_color">What is icon_color?<a href="#what-is-icon_color" class="hash-link" aria-label="Direct link to What is icon_color?" title="Direct link to What is icon_color?" translate="no"></a></h2>
|
||
<p>The <code>icon_color</code> attribute contains a <strong>CSS variable name</strong> (not a direct color value) that changes based on the sensor's state. For example:</p>
|
||
<ul>
|
||
<li class=""><strong>Price level sensors</strong>: <code>var(--success-color)</code> for cheap, <code>var(--error-color)</code> for expensive</li>
|
||
<li class=""><strong>Binary sensors</strong>: <code>var(--success-color)</code> when in best price period, <code>var(--error-color)</code> during peak price</li>
|
||
<li class=""><strong>Volatility</strong>: <code>var(--success-color)</code> for low volatility, <code>var(--error-color)</code> for very high</li>
|
||
</ul>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="why-css-variables">Why CSS Variables?<a href="#why-css-variables" class="hash-link" aria-label="Direct link to Why CSS Variables?" title="Direct link to Why CSS Variables?" translate="no"></a></h3>
|
||
<p>Using CSS variables like <code>var(--success-color)</code> instead of hardcoded colors (like <code>#00ff00</code>) has important advantages:</p>
|
||
<ul>
|
||
<li class="">✅ <strong>Automatic theme adaptation</strong> - Colors change with light/dark mode</li>
|
||
<li class="">✅ <strong>Consistent with your theme</strong> - Uses your theme's color scheme</li>
|
||
<li class="">✅ <strong>Future-proof</strong> - Works with custom themes and future HA updates</li>
|
||
</ul>
|
||
<p>You can use the <code>icon_color</code> attribute directly in your card templates, or interpret the sensor state yourself if you prefer custom colors (see examples below).</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="which-sensors-support-icon_color">Which Sensors Support icon_color?<a href="#which-sensors-support-icon_color" class="hash-link" aria-label="Direct link to Which Sensors Support icon_color?" title="Direct link to Which Sensors Support icon_color?" translate="no"></a></h2>
|
||
<p>Many sensors provide the <code>icon_color</code> attribute for dynamic styling. To see if a sensor has this attribute:</p>
|
||
<ol>
|
||
<li class="">Go to <strong>Developer Tools</strong> → <strong>States</strong> in Home Assistant</li>
|
||
<li class="">Search for your sensor (e.g., <code>sensor.tibber_home_current_interval_price_level</code>)</li>
|
||
<li class="">Look for <code>icon_color</code> in the attributes section</li>
|
||
</ol>
|
||
<p><strong>Common sensor types with icon_color:</strong></p>
|
||
<ul>
|
||
<li class="">Price level sensors (e.g., <code>current_interval_price_level</code>)</li>
|
||
<li class="">Price rating sensors (e.g., <code>current_interval_price_rating</code>)</li>
|
||
<li class="">Volatility sensors (e.g., <code>volatility_today</code>)</li>
|
||
<li class="">Price trend sensors (e.g., <code>price_trend_next_3h</code>)</li>
|
||
<li class="">Binary sensors (e.g., <code>best_price_period</code>, <code>peak_price_period</code>)</li>
|
||
<li class="">Timing sensors (e.g., <code>best_price_time_until_start</code>, <code>best_price_progress</code>)</li>
|
||
</ul>
|
||
<p>The colors adapt to the sensor's state - cheaper prices typically show green, expensive prices red, and neutral states gray.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="when-to-use-icon_color-vs-state-value">When to Use icon_color vs. State Value<a href="#when-to-use-icon_color-vs-state-value" class="hash-link" aria-label="Direct link to When to Use icon_color vs. State Value" title="Direct link to When to Use icon_color vs. State Value" translate="no"></a></h2>
|
||
<p><strong>Use <code>icon_color</code> when:</strong></p>
|
||
<ul>
|
||
<li class="">✅ You can apply the CSS variable directly (icons, text colors, borders)</li>
|
||
<li class="">✅ Your card supports CSS variable substitution</li>
|
||
<li class="">✅ You want simple, clean code without if/else logic</li>
|
||
</ul>
|
||
<p><strong>Use the state value directly when:</strong></p>
|
||
<ul>
|
||
<li class="">⚠️ You need to convert the color (e.g., CSS variable → RGBA with transparency)</li>
|
||
<li class="">⚠️ You need different colors than what <code>icon_color</code> provides</li>
|
||
<li class="">⚠️ You're building complex conditional logic anyway</li>
|
||
</ul>
|
||
<p><strong>Example of when NOT to use icon_color:</strong></p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic"># ❌ DON'T: Converting icon_color requires if/else anyway</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">card</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">background</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> const color = entity.attributes.icon_color;</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (color === 'var(--success-color)') return 'rgba(76, 175, 80, 0.1)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (color === 'var(--error-color)') return 'rgba(244, 67, 54, 0.1)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> // ... more if statements</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic"># ✅ DO: Interpret state directly if you need custom logic</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">card</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">background</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> const level = entity.state;</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (level === 'very_cheap' || level === 'cheap') return 'rgba(76, 175, 80, 0.1)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (level === 'very_expensive' || level === 'expensive') return 'rgba(244, 67, 54, 0.1)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return 'transparent';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><br></span></code></pre></div></div>
|
||
<p>The advantage of <code>icon_color</code> is simplicity - if you need complex logic, you lose that advantage.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="how-to-use-icon_color-in-your-dashboard">How to Use icon_color in Your Dashboard<a href="#how-to-use-icon_color-in-your-dashboard" class="hash-link" aria-label="Direct link to How to Use icon_color in Your Dashboard" title="Direct link to How to Use icon_color in Your Dashboard" translate="no"></a></h2>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="method-1-custom-button-card-recommended">Method 1: Custom Button Card (Recommended)<a href="#method-1-custom-button-card-recommended" class="hash-link" aria-label="Direct link to Method 1: Custom Button Card (Recommended)" title="Direct link to Method 1: Custom Button Card (Recommended)" translate="no"></a></h3>
|
||
<p>The <a href="https://github.com/custom-cards/button-card" target="_blank" rel="noopener noreferrer" class="">custom<!-- -->:button-card</a> from HACS supports dynamic icon colors.</p>
|
||
<p><strong>Example: Icon color only</strong></p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Current Price Level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> mdi</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">cash</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.attributes.icon_color || 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><br></span></code></pre></div></div>
|
||
<p><strong>Example: Icon AND state value with same color</strong></p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Current Price Level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> mdi</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">cash</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.attributes.icon_color || 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.attributes.icon_color || 'var(--primary-text-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">font-weight</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> bold</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="method-2-entities-card-with-card_mod">Method 2: Entities Card with card_mod<a href="#method-2-entities-card-with-card_mod" class="hash-link" aria-label="Direct link to Method 2: Entities Card with card_mod" title="Direct link to Method 2: Entities Card with card_mod" translate="no"></a></h3>
|
||
<p>Use Home Assistant's built-in entities card with card_mod for icon and state colors:</p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> entities</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entities</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">card_mod</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">style</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">hui-generic-entity-row</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">$</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> state-badge {</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }} !important;</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> .info {</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }} !important;</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> }</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="method-3-mushroom-cards">Method 3: Mushroom Cards<a href="#method-3-mushroom-cards" class="hash-link" aria-label="Direct link to Method 3: Mushroom Cards" title="Direct link to Method 3: Mushroom Cards" translate="no"></a></h3>
|
||
<p>The <a href="https://github.com/piitaya/lovelace-mushroom" target="_blank" rel="noopener noreferrer" class="">Mushroom cards</a> support card_mod for icon and text colors:</p>
|
||
<p><strong>Icon color only:</strong></p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">mushroom</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">entity</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> binary_sensor.tibber_home_best_price_period</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Best Price Period</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> mdi</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">piggy</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">bank</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">card_mod</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">style</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ha-card {</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> --card-mod-icon-color: {{ state_attr('binary_sensor.tibber_home_best_price_period', 'icon_color') }};</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> }</span><br></span></code></pre></div></div>
|
||
<p><strong>Icon and state value:</strong></p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">mushroom</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">entity</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Price Level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">card_mod</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">style</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ha-card {</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> --card-mod-icon-color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }};</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> --primary-text-color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }};</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> }</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="method-4-glance-card-with-card_mod">Method 4: Glance Card with card_mod<a href="#method-4-glance-card-with-card_mod" class="hash-link" aria-label="Direct link to Method 4: Glance Card with card_mod" title="Direct link to Method 4: Glance Card with card_mod" translate="no"></a></h3>
|
||
<p>Combine multiple sensors with dynamic colors:</p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> glance</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entities</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_volatility_today</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> binary_sensor.tibber_home_best_price_period</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">card_mod</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">style</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ha-card div.entity:nth-child(1) state-badge {</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> color: {{ state_attr('sensor.tibber_home_current_interval_price_level', 'icon_color') }} !important;</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ha-card div.entity:nth-child(2) state-badge {</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> color: {{ state_attr('sensor.tibber_home_volatility_today', 'icon_color') }} !important;</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> }</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ha-card div.entity:nth-child(3) state-badge {</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> color: {{ state_attr('binary_sensor.tibber_home_best_price_period', 'icon_color') }} !important;</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> }</span><br></span></code></pre></div></div>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="complete-dashboard-example">Complete Dashboard Example<a href="#complete-dashboard-example" class="hash-link" aria-label="Direct link to Complete Dashboard Example" title="Direct link to Complete Dashboard Example" translate="no"></a></h2>
|
||
<p>Here's a complete example combining multiple sensors with dynamic colors:</p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> vertical</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">stack</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">cards</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Current price status</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> horizontal</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">stack</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">cards</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Price Level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.attributes.icon_color || 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_rating</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Price Rating</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.attributes.icon_color || 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Binary sensors for periods</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> horizontal</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">stack</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">cards</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> binary_sensor.tibber_home_best_price_period</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Best Price Period</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> mdi</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">piggy</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">bank</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.attributes.icon_color || 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> binary_sensor.tibber_home_peak_price_period</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Peak Price Period</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> mdi</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">alert</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">circle</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.attributes.icon_color || 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Volatility and trends</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> horizontal</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">stack</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">cards</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_volatility_today</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Volatility</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.attributes.icon_color || 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_price_trend_next_3h</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Next 3h Trend</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.attributes.icon_color || 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><br></span></code></pre></div></div>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="css-color-variables">CSS Color Variables<a href="#css-color-variables" class="hash-link" aria-label="Direct link to CSS Color Variables" title="Direct link to CSS Color Variables" translate="no"></a></h2>
|
||
<p>The integration uses Home Assistant's standard CSS variables for theme compatibility:</p>
|
||
<ul>
|
||
<li class=""><code>var(--success-color)</code> - Green (good/cheap/low)</li>
|
||
<li class=""><code>var(--info-color)</code> - Blue (informational)</li>
|
||
<li class=""><code>var(--warning-color)</code> - Orange (caution/expensive)</li>
|
||
<li class=""><code>var(--error-color)</code> - Red (alert/very expensive/high)</li>
|
||
<li class=""><code>var(--state-icon-color)</code> - Gray (neutral/normal)</li>
|
||
<li class=""><code>var(--disabled-color)</code> - Light gray (no data/inactive)</li>
|
||
</ul>
|
||
<p>These automatically adapt to your theme's light/dark mode and custom color schemes.</p>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="using-custom-colors">Using Custom Colors<a href="#using-custom-colors" class="hash-link" aria-label="Direct link to Using Custom Colors" title="Direct link to Using Custom Colors" translate="no"></a></h3>
|
||
<p>If you want to override the theme colors with your own, you have two options:</p>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="option-1-use-icon_color-but-override-in-your-theme">Option 1: Use icon_color but Override in Your Theme<a href="#option-1-use-icon_color-but-override-in-your-theme" class="hash-link" aria-label="Direct link to Option 1: Use icon_color but Override in Your Theme" title="Direct link to Option 1: Use icon_color but Override in Your Theme" translate="no"></a></h4>
|
||
<p>Define custom colors in your theme configuration (<code>themes.yaml</code>):</p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">my_custom_theme</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Override standard variables</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">success-color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"#00C853"</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Custom green</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">error-color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"#D32F2F"</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Custom red</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">warning-color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"#F57C00"</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Custom orange</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">info-color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"#0288D1"</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic"># Custom blue</span><br></span></code></pre></div></div>
|
||
<p>The <code>icon_color</code> attribute will automatically use your custom theme colors.</p>
|
||
<h4 class="anchor anchorTargetStickyNavbar_Vzrq" id="option-2-interpret-state-value-directly">Option 2: Interpret State Value Directly<a href="#option-2-interpret-state-value-directly" class="hash-link" aria-label="Direct link to Option 2: Interpret State Value Directly" title="Direct link to Option 2: Interpret State Value Directly" translate="no"></a></h4>
|
||
<p>Instead of using <code>icon_color</code>, read the sensor state and apply your own colors:</p>
|
||
<p><strong>Example: Custom colors for price level</strong></p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Current Price Level</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> mdi</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">cash</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> const level = entity.state;</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (level === 'very_cheap') return '#00E676'; // Bright green</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (level === 'cheap') return '#66BB6A'; // Light green</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (level === 'normal') return '#9E9E9E'; // Gray</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (level === 'expensive') return '#FF9800'; // Orange</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (level === 'very_expensive') return '#F44336'; // Red</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return 'var(--state-icon-color)'; // Fallback</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><br></span></code></pre></div></div>
|
||
<p><strong>Example: Custom colors for binary sensor</strong></p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> binary_sensor.tibber_home_best_price_period</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Best Price Period</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> mdi</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">piggy</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">bank</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> // Use state directly, not icon_color</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.state === 'on' ? '#4CAF50' : '#9E9E9E';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">card</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">background</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return entity.state === 'on' ? 'rgba(76, 175, 80, 0.1)' : 'transparent';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><br></span></code></pre></div></div>
|
||
<p><strong>Example: Custom colors for volatility</strong></p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_volatility_today</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Volatility Today</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> const volatility = entity.state;</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (volatility === 'low') return '#4CAF50'; // Green</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (volatility === 'moderate') return '#2196F3'; // Blue</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (volatility === 'high') return '#FF9800'; // Orange</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (volatility === 'very_high') return '#F44336'; // Red</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><br></span></code></pre></div></div>
|
||
<p><strong>Example: Custom colors for price rating</strong></p>
|
||
<div class="language-yaml codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_QJqH"><pre tabindex="0" class="prism-code language-yaml codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token key atrule" style="color:#00a4db">type</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> custom</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain">button</span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain">card</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">entity</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> sensor.tibber_home_current_interval_price_rating</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">name</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> Price Rating</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">show_state</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean important" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token key atrule" style="color:#00a4db">styles</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">icon</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">-</span><span class="token plain"> </span><span class="token key atrule" style="color:#00a4db">color</span><span class="token punctuation" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">|</span><span class="token scalar string" style="color:#e3116c"></span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> [[[</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> const rating = entity.state;</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (rating === 'low') return '#00C853'; // Dark green</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (rating === 'normal') return '#78909C'; // Blue-gray</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> if (rating === 'high') return '#D32F2F'; // Dark red</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> return 'var(--state-icon-color)';</span><br></span><span class="token-line" style="color:#393A34"><span class="token scalar string" style="color:#e3116c"> ]]]</span><br></span></code></pre></div></div>
|
||
<h3 class="anchor anchorTargetStickyNavbar_Vzrq" id="which-approach-should-you-use">Which Approach Should You Use?<a href="#which-approach-should-you-use" class="hash-link" aria-label="Direct link to Which Approach Should You Use?" title="Direct link to Which Approach Should You Use?" translate="no"></a></h3>
|
||
<table><thead><tr><th>Use Case</th><th>Recommended Approach</th></tr></thead><tbody><tr><td>Want theme-consistent colors</td><td>✅ Use <code>icon_color</code> directly</td></tr><tr><td>Want light/dark mode support</td><td>✅ Use <code>icon_color</code> directly</td></tr><tr><td>Want custom theme colors</td><td>✅ Override CSS variables in theme</td></tr><tr><td>Want specific hardcoded colors</td><td>⚠️ Interpret state value directly</td></tr><tr><td>Multiple themes with different colors</td><td>✅ Use <code>icon_color</code> directly</td></tr></tbody></table>
|
||
<p><strong>Recommendation:</strong> Use <code>icon_color</code> whenever possible for better theme integration. Only interpret the state directly if you need very specific color values that shouldn't change with themes.</p>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="troubleshooting">Troubleshooting<a href="#troubleshooting" class="hash-link" aria-label="Direct link to Troubleshooting" title="Direct link to Troubleshooting" translate="no"></a></h2>
|
||
<p><strong>Icons not changing color:</strong></p>
|
||
<ul>
|
||
<li class="">Make sure you're using a card that supports custom styling (like custom<!-- -->:button-card<!-- --> or card_mod)</li>
|
||
<li class="">Check that the entity actually has the <code>icon_color</code> attribute (inspect in Developer Tools → States)</li>
|
||
<li class="">Verify your Home Assistant theme supports the CSS variables</li>
|
||
</ul>
|
||
<p><strong>Colors look wrong:</strong></p>
|
||
<ul>
|
||
<li class="">The colors are theme-dependent. Try switching themes to see if they appear correctly</li>
|
||
<li class="">Some custom themes may override the standard CSS variables with unexpected colors</li>
|
||
</ul>
|
||
<p><strong>Want different colors?</strong></p>
|
||
<ul>
|
||
<li class="">You can override the colors in your theme configuration</li>
|
||
<li class="">Or use conditional logic in your card templates based on the state value instead of <code>icon_color</code></li>
|
||
</ul>
|
||
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="see-also">See Also<a href="#see-also" class="hash-link" aria-label="Direct link to See Also" title="Direct link to See Also" translate="no"></a></h2>
|
||
<ul>
|
||
<li class=""><a class="" href="/hass.tibber_prices/user/sensors">Sensors Reference</a> - Complete list of available sensors</li>
|
||
<li class=""><a class="" href="/hass.tibber_prices/user/automation-examples">Automation Examples</a> - Use color-coded sensors in automations</li>
|
||
<li class=""><a class="" href="/hass.tibber_prices/user/configuration">Configuration Guide</a> - Adjust thresholds for price levels and ratings</li>
|
||
</ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"><a href="https://github.com/jpawlowski/hass.tibber_prices/tree/main/docs/user/docs/icon-colors.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_Z9Sw" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"><span class="theme-last-updated">Last updated<!-- --> on <b><time datetime="2025-12-06T01:37:06.000Z" itemprop="dateModified">Dec 6, 2025</time></b></span></div></div></footer></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--prev" href="/hass.tibber_prices/user/dynamic-icons"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Dynamic Icons</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/hass.tibber_prices/user/actions"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Actions (Services)</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#what-is-icon_color" class="table-of-contents__link toc-highlight">What is icon_color?</a><ul><li><a href="#why-css-variables" class="table-of-contents__link toc-highlight">Why CSS Variables?</a></li></ul></li><li><a href="#which-sensors-support-icon_color" class="table-of-contents__link toc-highlight">Which Sensors Support icon_color?</a></li><li><a href="#when-to-use-icon_color-vs-state-value" class="table-of-contents__link toc-highlight">When to Use icon_color vs. State Value</a></li><li><a href="#how-to-use-icon_color-in-your-dashboard" class="table-of-contents__link toc-highlight">How to Use icon_color in Your Dashboard</a><ul><li><a href="#method-1-custom-button-card-recommended" class="table-of-contents__link toc-highlight">Method 1: Custom Button Card (Recommended)</a></li><li><a href="#method-2-entities-card-with-card_mod" class="table-of-contents__link toc-highlight">Method 2: Entities Card with card_mod</a></li><li><a href="#method-3-mushroom-cards" class="table-of-contents__link toc-highlight">Method 3: Mushroom Cards</a></li><li><a href="#method-4-glance-card-with-card_mod" class="table-of-contents__link toc-highlight">Method 4: Glance Card with card_mod</a></li></ul></li><li><a href="#complete-dashboard-example" class="table-of-contents__link toc-highlight">Complete Dashboard Example</a></li><li><a href="#css-color-variables" class="table-of-contents__link toc-highlight">CSS Color Variables</a><ul><li><a href="#using-custom-colors" class="table-of-contents__link toc-highlight">Using Custom Colors</a></li><li><a href="#which-approach-should-you-use" class="table-of-contents__link toc-highlight">Which Approach Should You Use?</a></li></ul></li><li><a href="#troubleshooting" class="table-of-contents__link toc-highlight">Troubleshooting</a></li><li><a href="#see-also" class="table-of-contents__link toc-highlight">See Also</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Documentation</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/hass.tibber_prices/user/intro">User Guide</a></li><li class="footer__item"><a href="https://jpawlowski.github.io/hass.tibber_prices/developer/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Developer Guide<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/jpawlowski/hass.tibber_prices/issues" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub Issues<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://community.home-assistant.io/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Home Assistant Community<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/jpawlowski/hass.tibber_prices" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li><li class="footer__item"><a href="https://github.com/jpawlowski/hass.tibber_prices/releases" target="_blank" rel="noopener noreferrer" class="footer__link-item">Release Notes<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Not affiliated with Tibber AS. Community-maintained custom integration. Built with Docusaurus.</div></div></div></footer></div>
|
||
</body>
|
||
</html> |