Themes not fully working with grid layout

[fpytloun]

My Home Assistant version: 2022.4.0

Layout-card version (FROM BROWSER CONSOLE): 2.4.2

Original issue in theme repository: https://github.com/JuanMTech/macOS-Theme/issues/4

What I am doing:

I am using macOS-Theme and it seems that theme variables aren't use properly in <hui-view> element. If I remove style attribute in this element, theme works fine.

Grid looks like following:

while it should look like this:

Element <hui-view> has following style attribute:

style="--state-icon-error-color:var(--error-state-color, var(--error-color)); --state-unavailable-color:var(--state-icon-unavailable-color, var(--disabled-text-color)); --sidebar-text-color:var(--primary-text-color); --sidebar-background-color:var(--card-background-color); --sidebar-selected-text-color:var(--primary-color); --sidebar-selected-icon-color:var(--primary-color); --sidebar-icon-color:rgba(var(--rgb-primary-text-color), 0.6); --switch-checked-color:var(--primary-color); --switch-checked-button-color:var(--switch-checked-color, var(--primary-background-color)); --switch-checked-track-color:var(--switch-checked-color, #000000); --switch-unchecked-button-color:#999999; --rgb-switch-unchecked-button-color:153,153,153; --switch-unchecked-track-color:#9b9b9b; --rgb-switch-unchecked-track-color:155,155,155; --slider-color:var(--primary-color); --slider-secondary-color:var(--light-primary-color); --slider-track-color:var(--scrollbar-thumb-color); --label-badge-background-color:var(--card-background-color); --label-badge-text-color:rgba(var(--rgb-primary-text-color), 0.8); --paper-listbox-background-color:var(--card-background-color); --paper-item-icon-color:var(--state-icon-color); --paper-item-icon-active-color:var(--state-icon-active-color); --table-row-background-color:var(--primary-background-color); --table-row-alternative-background-color:var(--secondary-background-color); --paper-slider-knob-color:var(--slider-color); --paper-slider-knob-start-color:var(--slider-color); --paper-slider-pin-color:var(--slider-color); --paper-slider-pin-start-color:var(--slider-color); --paper-slider-active-color:var(--slider-color); --paper-slider-secondary-color:var(--slider-secondary-color); --paper-slider-container-color:var(--slider-track-color); --data-table-background-color:var(--card-background-color); --markdown-code-background-color:var(--primary-background-color); --mdc-theme-primary:var(--primary-color); --mdc-theme-secondary:var(--accent-color); --mdc-theme-background:var(--primary-background-color); --mdc-theme-surface:var(--card-background-color); --mdc-theme-on-primary:var(--text-primary-color); --mdc-theme-on-secondary:var(--text-primary-color); --mdc-theme-on-surface:var(--primary-text-color); --mdc-theme-text-disabled-on-light:var(--disabled-text-color); --mdc-theme-text-primary-on-background:var(--primary-text-color); --mdc-theme-text-secondary-on-background:var(--secondary-text-color); --mdc-theme-text-hint-on-background:var(--secondary-text-color); --mdc-theme-text-icon-on-background:var(--secondary-text-color); --mdc-theme-error:var(--error-color); --app-header-text-color:#e1e1e1; --rgb-app-header-text-color:225,225,225; --app-header-background-color:#101e24; --rgb-app-header-background-color:16,30,36; --mdc-checkbox-unchecked-color:rgba(var(--rgb-primary-text-color), 0.54); --mdc-checkbox-disabled-color:var(--disabled-text-color); --mdc-radio-unchecked-color:rgba(var(--rgb-primary-text-color), 0.54); --mdc-radio-disabled-color:var(--disabled-text-color); --mdc-tab-text-label-color-default:var(--primary-text-color); --mdc-button-disabled-ink-color:var(--disabled-text-color); --mdc-button-outline-color:var(--divider-color); --mdc-dialog-scroll-divider-color:var(--divider-color); --mdc-text-field-idle-line-color:var(--input-idle-line-color); --mdc-text-field-hover-line-color:var(--input-hover-line-color); --mdc-text-field-disabled-line-color:var(--input-disabled-line-color); --mdc-text-field-outlined-idle-border-color:var(--input-outlined-idle-border-color); --mdc-text-field-outlined-hover-border-color:var(--input-outlined-hover-border-color); --mdc-text-field-outlined-disabled-border-color:var(--input-outlined-disabled-border-color); --mdc-text-field-fill-color:var(--input-fill-color); --mdc-text-field-disabled-fill-color:var(--input-disabled-fill-color); --mdc-text-field-ink-color:var(--input-ink-color); --mdc-text-field-label-ink-color:var(--input-label-ink-color); --mdc-text-field-disabled-ink-color:var(--input-disabled-ink-color); --mdc-select-idle-line-color:var(--input-idle-line-color); --mdc-select-hover-line-color:var(--input-hover-line-color); --mdc-select-outlined-idle-border-color:var(--input-outlined-idle-border-color); --mdc-select-outlined-hover-border-color:var(--input-outlined-hover-border-color); --mdc-select-outlined-disabled-border-color:var(--input-outlined-disabled-border-color); --mdc-select-fill-color:var(--input-fill-color); --mdc-select-disabled-fill-color:var(--input-disabled-fill-color); --mdc-select-ink-color:var(--input-ink-color); --mdc-select-label-ink-color:var(--input-label-ink-color); --mdc-select-disabled-ink-color:var(--input-disabled-ink-color); --mdc-select-dropdown-icon-color:var(--input-dropdown-icon-color); --mdc-select-disabled-dropdown-icon-color:var(--input-disabled-ink-color); --chip-background-color:rgba(var(--rgb-primary-text-color), 0.15); --material-body-text-color:var(--primary-text-color); --material-background-color:var(--card-background-color); --material-secondary-background-color:var(--secondary-background-color); --material-secondary-text-color:var(--secondary-text-color); --primary-background-color:#111111; --rgb-primary-background-color:17,17,17; --card-background-color:#1c1c1c; --rgb-card-background-color:28,28,28; --secondary-background-color:#202020; --rgb-secondary-background-color:32,32,32; --primary-text-color:#e1e1e1; --rgb-primary-text-color:225,225,225; --secondary-text-color:#9b9b9b; --rgb-secondary-text-color:155,155,155; --disabled-text-color:#6f6f6f; --rgb-disabled-text-color:111,111,111; --divider-color:rgba(225, 225, 225, 0.12); --mdc-ripple-color:#AAAAAA; --rgb-mdc-ripple-color:170,170,170; --input-idle-line-color:rgba(255, 255, 255, 0.42); --input-hover-line-color:rgba(255, 255, 255, 0.87); --input-disabled-line-color:rgba(255, 255, 255, 0.06); --input-outlined-idle-border-color:rgba(255, 255, 255, 0.38); --input-outlined-hover-border-color:rgba(255, 255, 255, 0.87); --input-outlined-disabled-border-color:rgba(255, 255, 255, 0.06); --input-fill-color:rgba(255, 255, 255, 0.05); --input-disabled-fill-color:rgba(255, 255, 255, 0.02); --input-ink-color:rgba(255, 255, 255, 0.87); --input-label-ink-color:rgba(255, 255, 255, 0.6); --input-disabled-ink-color:rgba(255, 255, 255, 0.37); --input-dropdown-icon-color:rgba(255, 255, 255, 0.54); --codemirror-keyword:#C792EA; --rgb-codemirror-keyword:199,146,234; --codemirror-operator:#89DDFF; --rgb-codemirror-operator:137,221,255; --codemirror-variable:#f07178; --rgb-codemirror-variable:240,113,120; --codemirror-variable-2:#EEFFFF; --rgb-codemirror-variable-2:238,255,255; --codemirror-variable-3:#DECB6B; --rgb-codemirror-variable-3:222,203,107; --codemirror-builtin:#FFCB6B; --rgb-codemirror-builtin:255,203,107; --codemirror-atom:#F78C6C; --rgb-codemirror-atom:247,140,108; --codemirror-number:#FF5370; --rgb-codemirror-number:255,83,112; --codemirror-def:#82AAFF; --rgb-codemirror-def:130,170,255; --codemirror-string:#C3E88D; --rgb-codemirror-string:195,232,141; --codemirror-string-2:#f07178; --rgb-codemirror-string-2:240,113,120; --codemirror-comment:#545454; --rgb-codemirror-comment:84,84,84; --codemirror-tag:#FF5370; --rgb-codemirror-tag:255,83,112; --codemirror-meta:#FFCB6B; --rgb-codemirror-meta:255,203,107; --codemirror-attribute:#C792EA; --rgb-codemirror-attribute:199,146,234; --codemirror-property:#C792EA; --rgb-codemirror-property:199,146,234; --codemirror-qualifier:#DECB6B; --rgb-codemirror-qualifier:222,203,107; --codemirror-type:#DECB6B; --rgb-codemirror-type:222,203,107; --energy-grid-return-color:#a280db; --rgb-energy-grid-return-color:162,128,219;"

But these values are not coming from theme: https://github.com/JuanMTech/macOS-Theme/blob/master/themes/macos_theme.yaml

If I remove style of <hui-view>, theme looks fine.

---

By putting an X in the boxes ([X]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• [x] Have made sure I am using the latest version of the plugin.
• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.