How to create a test sheet for theme colors

trying to create a test sheet, so I can easily identify the color settings for my themes and their respective variable names. Not so evident apparently, because markdown doesn’t show these colors correctly at all?

I’ve started with this, (will add all other theme variables of course once this is working…):

type: custom:hui-element
card_type: markdown

content: >
  ### Color test sheet for theme:

  ## {{states('input_select.theme')|capitalize}}

  - <font color = var(--background-color-on)> background-color-on</font>

  - <font color = var(--background-color-off)>background-color-off</font>

  - <font color = var(--text-color-on)>text-color-on</font>

  - <font color = var(--text-color-off)>text-color-off</font>

  - <font color = var(--icon-color-on)>icon-color-on</font>

  - <font color = var(--icon-color-off)>icon-color-off</font>

  - <font color = var(--active-color)>active-color</font>

  - <font color = var(--paper-item-icon-active-color)> paper-item-icon-active-color</font>

resulting in:


Is this a limitation of the markdown card, and if yes, what could we doto create this test sheet?
thanks for having a look.

I am also trying to use the markdown card to colour the font according to the theme colours. Displayed colours are incorrect. When using var(–state-icon-color), for example, instead of the default blue-grey colour (’#44739E’) it displays as a bright green. Is this a bug, or is there a way to get these colour variables to display correctly?

haven’t found it yet, seems the color name variables form the themes are not available to the mark down card. So far, Ive only been able too use either the html color names, or their # hex value. Even rgb() values are not understood. see also: How to use rgb values in markdown

Petro once handed me this, but it only proofs the color variables dont work in Markdown:

type: custom:hui-element
card_type: markdown

content: >
  ### Color test sheet for theme:

  ## {{states('input_select.theme')|capitalize}}

  - <font color = var(--background-color-on)> background-color-on</font>

  - <font color = var(--background-color-off)>background-color-off</font>

  - <font color = var(--text-color-on)>text-color-on</font>

  - <font color = var(--text-color-off)>text-color-off</font>

  - <font color = var(--icon-color-on)>icon-color-on</font>

  - <font color = var(--icon-color-off)>icon-color-off</font>

  - <font color = var(--active-color)>active-color</font>

  - <font color = var(--paper-item-icon-active-color)> paper-item-icon-active-color</font>

  ### Color test sheet for theme:

  ## {{states('input_select.theme')|capitalize}}
  {%- set vars = ['--accent-color', '--alarm-color-armed', '--alarm-color-disarmed',
                  '--alarm-color-pending', '--alarm-color-triggered', '--alarm-state-color',
                  '--app-header-background-color', '--app-header-border-bottom',
                  '--app-header-text-color', '--auto-color', '--brightness-font-size',
                  '--button-toggle-icon-size', '--button-toggle-size', '--card-background-color',
                  '--code-editor-background-color', '--code-font-family', '--code-mirror-direction',
                  '--code-mirror-height', '--code-mirror-max-height', '--codemirror-atom',
                  '--codemirror-attribute', '--codemirror-builtin', '--codemirror-comment',
                  '--codemirror-def', '--codemirror-keyword', '--codemirror-meta', '--codemirror-number',
                  '--codemirror-operator', '--codemirror-property', '--codemirror-qualifier',
                  '--codemirror-string', '--codemirror-string-2', '--codemirror-tag', '--codemirror-type',
                  '--codemirror-variable', '--codemirror-variable-2', '--codemirror-variable-3',
                  '--color-on-error', '--cool-color', '--dark-background-color', '--dark-color',
                  '--dark-divider-opacity', '--dark-primary-opacity', '--dark-secondary-opacity',
                  '--dark-text-color', '--data-table-background-color', '--data-table-border-width',
                  '--dialog-content-padding', '--dialog-content-position', '--dialog-surface-position',
                  '--dialog-surface-top', '--dialog-z-index', '--disabled-text-color', '--divider-color',
                  '--dry-color', '--eco-color', '--entities-divider-color', '--error-color',
                  '--error-state-color', '--fan_only-color', '--fc-theme-standard-border-color',
                  '--gauge-color', '--glance-column-width', '--google-red-300', '--ha-bar-background-color',
                  '--ha-bar-border-radius', '--ha-bar-primary-color', '--ha-card-border-radius',
                  '--ha-card-header-color', '--ha-card-header-font-family', '--ha-card-header-font-size',
                  '--ha-icon-button-active-color', '--ha-icon-button-inactive-color', '--ha-icon-display',
                  '--ha-label-badge-color', '--ha-label-badge-font-size', '--ha-label-badge-label-color',
                  '--ha-label-badge-label-text-transform', '--ha-label-badge-padding', '--ha-label-badge-size',
                  '--ha-label-badge-title-font-size', '--ha-label-badge-title-font-weight',
                  '--ha-label-badge-title-width', '--heat-color', '--idle-color', '--justify-action-buttons',
                  '--label-badge-background-color', '--label-badge-blue', '--label-badge-green',
                  '--label-badge-grey', '--label-badge-red', '--label-badge-text-color',
                  '--label-badge-yellow', '--layout-fit_-_bottom', '--layout-fit_-_left',
                  '--layout-fit_-_position', '--layout-fit_-_right', '--layout-fit_-_top',
                  '--light-primary-color', '--light-theme-disabled-color', '--lovelace-background',
                  '--manual-color', '--markdown-code-background-color', '--markdown-svg-background-color',
                  '--markdown-svg-color', '--material-font-family', '--mdc-dialog-min-height',
                  '--mdc-dialog-scroll-divider-color', '--mdc-icon-button-ripple-opacity',
                  '--mdc-icon-size', '--mdc-theme-on-primary', '--mdc-theme-surface',
                  '--mdc-typography-font-family', '--mdc-typography-headline6-font-size',
                  '--mdc-typography-headline6-font-weight', '--mdc-typography-headline6-letter-spacing',
                  '--mdc-typography-headline6-line-height', '--mdc-typography-headline6-text-decoration',
                  '--mdc-typography-headline6-text-transform', '--media-browse-item-size',
                  '--mode-color', '--name-font-size', '--off-color', '--paper-blue-400',
                  '--paper-dialog-background-color', '--paper-dialog-color',
                  '--paper-font-body1_-_-webkit-font-smoothing', '--paper-font-body1_-_font-family',
                  '--paper-font-body1_-_font-size', '--paper-font-body1_-_font-weight',
                  '--paper-font-body1_-_line-height', '--paper-font-common-base_-_font-family',
                  '--paper-font-display1_-_font-family', '--paper-font-display1_-_font-size',
                  '--paper-font-display1_-_font-weight', '--paper-font-display1_-_letter-spacing',
                  '--paper-font-display1_-_line-height', '--paper-font-headline-_font-weight',
                  '--paper-font-headline_-_-webkit-font-smoothing', '--paper-font-headline_-_font-family',
                  '--paper-font-headline_-_font-size', '--paper-font-headline_-_font-weight',
                  '--paper-font-headline_-_letter-spacing', '--paper-font-headline_-_line-height',
                  '--paper-font-headline_-_overflow', '--paper-font-headline_-_text-overflow',
                  '--paper-font-headline_-_white-space', '--paper-font-subhead_-_-webkit-font-smoothing',
                  '--paper-font-subhead_-_font-family', '--paper-font-subhead_-_font-size',
                  '--paper-font-subhead_-_font-weight', '--paper-font-subhead_-_line-height',
                  '--paper-font-subhead_-_overflow', '--paper-font-subhead_-_text-overflow',
                  '--paper-font-subhead_-_white-space', '--paper-font-title_-_-webkit-font-smoothing',
                  '--paper-font-title_-_font-family', '--paper-font-title_-_font-size',
                  '--paper-font-title_-_font-weight', '--paper-font-title_-_letter-spacing',
                  '--paper-font-title_-_line-height', '--paper-font-title_-_overflow',
                  '--paper-font-title_-_text-overflow', '--paper-font-title_-_white-space',
                  '--paper-green-400', '--paper-grey-500', '--paper-input-container-color',
                  '--paper-input-container-focus-color', '--paper-item-icon-active-color',
                  '--paper-item-icon-color', '--paper-orange-400', '--paper-progress-height',
                  '--primary-background-color', '--primary-color', '--primary-text-color',
                  '--rgb-card-background-color', '--rgb-primary-color', '--rgb-primary-text-color',
                  '--scrollbar-thumb-color', '--secondary-background-color', '--secondary-text-color',
                  '--sidebar-background-color', '--sidebar-icon-color', '--sidebar-selected-icon-color',
                  '--sidebar-selected-text-color', '--sidebar-text-color', '--slider-bar-color',
                  '--slider-color', '--slider-secondary-color', '--state-icon-active-color',
                  '--state-icon-color', '--state-icon-unavailable-color', '--success-color',
                  '--switch-checked-button-color', '--switch-checked-color', '--switch-checked-track-color',
                  '--switch-unchecked-button-color', '--switch-unchecked-color', '--switch-unchecked-track-color',
                  '--text-accent-color', '--text-dark-color', '--text-light-primary-color',
                  '--text-primary-color', '--unknown-color', '--vertial-align-dialog', '--warning-color',
                  '--weather-icon-cloud-back-color', '--weather-icon-cloud-front-color',
                  '--weather-icon-moon-color', '--weather-icon-rain-color', '--weather-icon-sun-color'] %}
  {%- for var in vars %}
  - <font color = var({{ var }})>{{ var[2:] }}</font>

  {%- endfor %}
1 Like

Did you ever solve this? It’s the only thing holding me back from having fully dynamic themes :frowning:

no, this simply does not work.

Thanks for the response, that’s the way I thought this going to go :frowning: ah well, now I need a new plan :slight_smile: