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 %}
