Skip to content

fix: restore input/dropdown backgrounds broken by HA 2026.4 #128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TilmanGriesel merged 2 commits into from
Apr 19, 2026
Merged

fix: restore input/dropdown backgrounds broken by HA 2026.4 #128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbd49d8
fix: restore input/dropdown backgrounds broken by HA 2026.3
michikrug Apr 16, 2026
64064d6
fix: provide dropdown item hover background
michikrug Apr 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions src/template.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,21 +200,21 @@ mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover)
# ..............................................................................
# Text Fields an Dropdown
input-background-color: var(--token-color-background-input-base)
input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent)
input-fill-color: var(--input-background-color)
input-ink-color: var(--token-color-text-primary)
input-label-ink-color: var(--token-color-text-primary)
input-disabled-fill-color: var(--input-background-token-color-disabled)
input-disabled-ink-color: var(--disabled-text-color)
input-disabled-label-ink-color: var(--disabled-text-color)
input-idle-line-color: var(--background-color)
input-idle-line-color: var(--primary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-hover-line-color: var(--primary-color)
input-disabled-line-color: var(--disabled-color)
mdc-select-fill-color: var(--input-fill-color)
mdc-select-ink-color: var(--input-ink-color)
mdc-select-label-ink-color: var(--input-label-ink-color)
mdc-select-idle-line-color: var(--token-color-background-base)
mdc-select-idle-line-color: var(--divider-color)
mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
mdc-select-hover-line-color: var(--input-hover-line-color)
mdc-text-field-fill-color: var(--input-fill-color)
Expand All @@ -226,6 +226,18 @@ input-outlined-idle-border-color: var(--divider-color)
input-outlined-hover-border-color: var(--primary-color)
input-outlined-disabled-border-color: var(--disabled-color)
paper-input-container-focus-color: var(--primary-color)
# HA 2026.3+ Web Awesome / semantic color variables
ha-color-form-background: var(--token-color-background-input-base)
ha-color-form-background-hover: var(--token-color-background-input-base)
ha-color-form-background-disabled: var(--token-color-background-input-disabled)
wa-color-surface-raised: var(--token-color-background-card)
# Dropdown/menu item hover fills (light defaults are near-white; override for dark themes)
ha-color-fill-neutral-quiet-resting: var(--token-color-background-card)
ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base)
ha-color-fill-neutral-quiet-active: var(--token-color-background-card)
ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary)
ha-color-fill-neutral-normal-hover: var(--token-color-background-card)
ha-color-fill-neutral-normal-active: var(--token-color-background-secondary)
# ..............................................................................
# Markdown
markdown-code-background-color: var(--code-editor-background-color)
Expand Down
7 changes: 6 additions & 1 deletion src/template_eink.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ mdc-ripple-hover-opacity: var(--token-opacity-ripple-hover)
# ..............................................................................
# Text Fields an Dropdown
input-background-color: var(--token-color-background-input-base)
input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent)
input-fill-color: var(--input-background-color)
input-ink-color: var(--token-color-text-primary)
input-label-ink-color: var(--token-color-text-primary)
Expand All @@ -212,6 +212,11 @@ input-outlined-idle-border-color: var(--divider-color)
input-outlined-hover-border-color: var(--primary-color)
input-outlined-disabled-border-color: var(--disabled-color)
paper-input-container-focus-color: var(--primary-color)
# HA 2026.3+ Web Awesome / semantic color variables
ha-color-form-background: var(--token-color-background-input-base)
ha-color-form-background-hover: var(--token-color-background-input-base)
ha-color-form-background-disabled: var(--token-color-background-input-disabled)
wa-color-surface-raised: var(--token-color-background-card)
# ..............................................................................
# Markdown
markdown-code-background-color: var(--code-editor-background-color)
Expand Down
40 changes: 32 additions & 8 deletions themes/graphite-auto.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,15 @@
modes:
light:

# Graphite is a contemporary theme that offers both a calm dark color scheme and a

Check warning on line 6 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.10) 

6:81 [line-length] line too long (88 > 80 characters)

Check warning on line 6 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.12) 

6:81 [line-length] line too long (88 > 80 characters)

Check warning on line 6 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.9) 

6:81 [line-length] line too long (88 > 80 characters)

Check warning on line 6 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.11) 

6:81 [line-length] line too long (88 > 80 characters)
# clean light theme, featuring native device fonts and a cohesive design
# language. Carefully crafted to be visually appealing and easy on the eyes,

Check warning on line 8 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.10) 

8:81 [line-length] line too long (82 > 80 characters)

Check warning on line 8 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.12) 

8:81 [line-length] line too long (82 > 80 characters)

Check warning on line 8 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.9) 

8:81 [line-length] line too long (82 > 80 characters)

Check warning on line 8 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.11) 

8:81 [line-length] line too long (82 > 80 characters)
# Graphite ensures a consistent user experience throughout the entire Home
# Assistant interface, including the administration panel and code editors.

Check warning on line 10 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.10) 

10:81 [line-length] line too long (81 > 80 characters)

Check warning on line 10 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.12) 

10:81 [line-length] line too long (81 > 80 characters)

Check warning on line 10 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.9) 

10:81 [line-length] line too long (81 > 80 characters)

Check warning on line 10 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.11) 

10:81 [line-length] line too long (81 > 80 characters)
# https://github.com/TilmanGriesel/graphite

#------------------------------------------------------
# This file was generated at 2026-02-08 15:08:56
# This file was generated at 2026-04-16 11:54:13
#------------------------------------------------------


Expand Down Expand Up @@ -143,7 +143,7 @@
# Opacity
# ..............................................................................
# Font
token-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"

Check warning on line 146 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.10) 

146:81 [line-length] line too long (174 > 80 characters)

Check warning on line 146 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.12) 

146:81 [line-length] line too long (174 > 80 characters)

Check warning on line 146 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.9) 

146:81 [line-length] line too long (174 > 80 characters)

Check warning on line 146 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.11) 

146:81 [line-length] line too long (174 > 80 characters)

# ------------------------------------------------------------------------------
# Definitions
Expand Down Expand Up @@ -347,21 +347,21 @@
# ..............................................................................
# Text Fields an Dropdown
input-background-color: var(--token-color-background-input-base)
input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent)

Check warning on line 350 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.10) 

350:81 [line-length] line too long (111 > 80 characters)

Check warning on line 350 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.12) 

350:81 [line-length] line too long (111 > 80 characters)

Check warning on line 350 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.9) 

350:81 [line-length] line too long (111 > 80 characters)

Check warning on line 350 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.11) 

350:81 [line-length] line too long (111 > 80 characters)
input-fill-color: var(--input-background-color)
input-ink-color: var(--token-color-text-primary)
input-label-ink-color: var(--token-color-text-primary)
input-disabled-fill-color: var(--input-background-token-color-disabled)
input-disabled-ink-color: var(--disabled-text-color)
input-disabled-label-ink-color: var(--disabled-text-color)
input-idle-line-color: var(--background-color)
input-idle-line-color: var(--primary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-hover-line-color: var(--primary-color)
input-disabled-line-color: var(--disabled-color)
mdc-select-fill-color: var(--input-fill-color)
mdc-select-ink-color: var(--input-ink-color)
mdc-select-label-ink-color: var(--input-label-ink-color)
mdc-select-idle-line-color: var(--token-color-background-base)
mdc-select-idle-line-color: var(--divider-color)
mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
mdc-select-hover-line-color: var(--input-hover-line-color)
mdc-text-field-fill-color: var(--input-fill-color)
Expand All @@ -373,6 +373,18 @@
input-outlined-hover-border-color: var(--primary-color)
input-outlined-disabled-border-color: var(--disabled-color)
paper-input-container-focus-color: var(--primary-color)
# HA 2026.3+ Web Awesome / semantic color variables
ha-color-form-background: var(--token-color-background-input-base)
ha-color-form-background-hover: var(--token-color-background-input-base)
ha-color-form-background-disabled: var(--token-color-background-input-disabled)
wa-color-surface-raised: var(--token-color-background-card)
# Dropdown/menu item hover fills (light defaults are near-white; override for dark themes)

Check warning on line 381 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.10) 

381:81 [line-length] line too long (96 > 80 characters)

Check warning on line 381 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.12) 

381:81 [line-length] line too long (96 > 80 characters)

Check warning on line 381 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.9) 

381:81 [line-length] line too long (96 > 80 characters)

Check warning on line 381 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.11) 

381:81 [line-length] line too long (96 > 80 characters)
ha-color-fill-neutral-quiet-resting: var(--token-color-background-card)
ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base)
ha-color-fill-neutral-quiet-active: var(--token-color-background-card)
ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary)
ha-color-fill-neutral-normal-hover: var(--token-color-background-card)
ha-color-fill-neutral-normal-active: var(--token-color-background-secondary)
# ..............................................................................
# Markdown
markdown-code-background-color: var(--code-editor-background-color)
Expand Down Expand Up @@ -409,14 +421,14 @@
# ------------------------------------------------
# HA Indicator Colors
# ------------------------------------------------
# Note: Amber is not safe to be modified, causes history-graph rendering issues.

Check warning on line 424 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.10) 

424:81 [line-length] line too long (86 > 80 characters)

Check warning on line 424 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.12) 

424:81 [line-length] line too long (86 > 80 characters)

Check warning on line 424 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.9) 

424:81 [line-length] line too long (86 > 80 characters)

Check warning on line 424 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.11) 

424:81 [line-length] line too long (86 > 80 characters)
# Potentially other color definitions could cause issues too.
# Full list: https://github.com/TilmanGriesel/graphite/blob/77ac1271aaeca8775bb999c32e0921a6bdb47620/src/template.yaml#L191

Check warning on line 426 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.10) 

426:81 [line-length] line too long (129 > 80 characters)

Check warning on line 426 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.12) 

426:81 [line-length] line too long (129 > 80 characters)

Check warning on line 426 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.9) 

426:81 [line-length] line too long (129 > 80 characters)

Check warning on line 426 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.11) 

426:81 [line-length] line too long (129 > 80 characters)
# ------------------------------------------------
# HA Primary Color Scale
# ------------------------------------------------
ha-color-primary-05: hsl(from rgb(var(--token-rgb-primary)) h s calc(l * 0.15))

Check warning on line 430 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.10) 

430:81 [line-length] line too long (85 > 80 characters)

Check warning on line 430 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.12) 

430:81 [line-length] line too long (85 > 80 characters)

Check warning on line 430 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.9) 

430:81 [line-length] line too long (85 > 80 characters)

Check warning on line 430 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.11) 

430:81 [line-length] line too long (85 > 80 characters)
ha-color-primary-10: hsl(from rgb(var(--token-rgb-primary)) h s calc(l * 0.25))

Check warning on line 431 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.10) 

431:81 [line-length] line too long (85 > 80 characters)

Check warning on line 431 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.12) 

431:81 [line-length] line too long (85 > 80 characters)

Check warning on line 431 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.9) 

431:81 [line-length] line too long (85 > 80 characters)

Check warning on line 431 in themes/graphite-auto.yaml

View workflow job for this annotation

GitHub Actions / test (3.11) 

431:81 [line-length] line too long (85 > 80 characters)
ha-color-primary-20: hsl(from rgb(var(--token-rgb-primary)) h s calc(l * 0.40))
ha-color-primary-30: hsl(from rgb(var(--token-rgb-primary)) h s calc(l * 0.70))
ha-color-primary-40: rgb(var(--token-rgb-primary))
Expand Down Expand Up @@ -570,7 +582,7 @@
# https://github.com/TilmanGriesel/graphite

#------------------------------------------------------
# This file was generated at 2026-02-08 15:08:56
# This file was generated at 2026-04-16 11:54:13
#------------------------------------------------------


Expand Down Expand Up @@ -906,21 +918,21 @@
# ..............................................................................
# Text Fields an Dropdown
input-background-color: var(--token-color-background-input-base)
input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent)
input-fill-color: var(--input-background-color)
input-ink-color: var(--token-color-text-primary)
input-label-ink-color: var(--token-color-text-primary)
input-disabled-fill-color: var(--input-background-token-color-disabled)
input-disabled-ink-color: var(--disabled-text-color)
input-disabled-label-ink-color: var(--disabled-text-color)
input-idle-line-color: var(--background-color)
input-idle-line-color: var(--primary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-hover-line-color: var(--primary-color)
input-disabled-line-color: var(--disabled-color)
mdc-select-fill-color: var(--input-fill-color)
mdc-select-ink-color: var(--input-ink-color)
mdc-select-label-ink-color: var(--input-label-ink-color)
mdc-select-idle-line-color: var(--token-color-background-base)
mdc-select-idle-line-color: var(--divider-color)
mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
mdc-select-hover-line-color: var(--input-hover-line-color)
mdc-text-field-fill-color: var(--input-fill-color)
Expand All @@ -932,6 +944,18 @@
input-outlined-hover-border-color: var(--primary-color)
input-outlined-disabled-border-color: var(--disabled-color)
paper-input-container-focus-color: var(--primary-color)
# HA 2026.3+ Web Awesome / semantic color variables
ha-color-form-background: var(--token-color-background-input-base)
ha-color-form-background-hover: var(--token-color-background-input-base)
ha-color-form-background-disabled: var(--token-color-background-input-disabled)
wa-color-surface-raised: var(--token-color-background-card)
# Dropdown/menu item hover fills (light defaults are near-white; override for dark themes)
ha-color-fill-neutral-quiet-resting: var(--token-color-background-card)
ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base)
ha-color-fill-neutral-quiet-active: var(--token-color-background-card)
ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary)
ha-color-fill-neutral-normal-hover: var(--token-color-background-card)
ha-color-fill-neutral-normal-active: var(--token-color-background-secondary)
# ..............................................................................
# Markdown
markdown-code-background-color: var(--code-editor-background-color)
Expand Down
9 changes: 7 additions & 2 deletions themes/graphite-eink-dark.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Graphite E-ink Dark:
# https://github.com/TilmanGriesel/graphite

#------------------------------------------------------
# This file was generated at 2026-02-08 15:08:56
# This file was generated at 2026-04-16 11:54:13
#------------------------------------------------------

card-mod-theme: Graphite E-ink Dark
Expand Down Expand Up @@ -343,7 +343,7 @@ Graphite E-ink Dark:
# ..............................................................................
# Text Fields an Dropdown
input-background-color: var(--token-color-background-input-base)
input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent)
input-fill-color: var(--input-background-color)
input-ink-color: var(--token-color-text-primary)
input-label-ink-color: var(--token-color-text-primary)
Expand All @@ -369,6 +369,11 @@ Graphite E-ink Dark:
input-outlined-hover-border-color: var(--primary-color)
input-outlined-disabled-border-color: var(--disabled-color)
paper-input-container-focus-color: var(--primary-color)
# HA 2026.3+ Web Awesome / semantic color variables
ha-color-form-background: var(--token-color-background-input-base)
ha-color-form-background-hover: var(--token-color-background-input-base)
ha-color-form-background-disabled: var(--token-color-background-input-disabled)
wa-color-surface-raised: var(--token-color-background-card)
# ..............................................................................
# Markdown
markdown-code-background-color: var(--code-editor-background-color)
Expand Down
9 changes: 7 additions & 2 deletions themes/graphite-eink-light.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Graphite E-ink Light:
# https://github.com/TilmanGriesel/graphite

#------------------------------------------------------
# This file was generated at 2026-02-08 15:08:56
# This file was generated at 2026-04-16 11:54:13
#------------------------------------------------------

card-mod-theme: Graphite E-ink Light
Expand Down Expand Up @@ -343,7 +343,7 @@ Graphite E-ink Light:
# ..............................................................................
# Text Fields an Dropdown
input-background-color: var(--token-color-background-input-base)
input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent)
input-fill-color: var(--input-background-color)
input-ink-color: var(--token-color-text-primary)
input-label-ink-color: var(--token-color-text-primary)
Expand All @@ -369,6 +369,11 @@ Graphite E-ink Light:
input-outlined-hover-border-color: var(--primary-color)
input-outlined-disabled-border-color: var(--disabled-color)
paper-input-container-focus-color: var(--primary-color)
# HA 2026.3+ Web Awesome / semantic color variables
ha-color-form-background: var(--token-color-background-input-base)
ha-color-form-background-hover: var(--token-color-background-input-base)
ha-color-form-background-disabled: var(--token-color-background-input-disabled)
wa-color-surface-raised: var(--token-color-background-card)
# ..............................................................................
# Markdown
markdown-code-background-color: var(--code-editor-background-color)
Expand Down
20 changes: 16 additions & 4 deletions themes/graphite-light.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Graphite Light:
# https://github.com/TilmanGriesel/graphite

#------------------------------------------------------
# This file was generated at 2026-02-08 15:08:56
# This file was generated at 2026-04-16 11:54:13
#------------------------------------------------------

card-mod-theme: Graphite Light
Expand Down Expand Up @@ -345,21 +345,21 @@ Graphite Light:
# ..............................................................................
# Text Fields an Dropdown
input-background-color: var(--token-color-background-input-base)
input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent)
input-fill-color: var(--input-background-color)
input-ink-color: var(--token-color-text-primary)
input-label-ink-color: var(--token-color-text-primary)
input-disabled-fill-color: var(--input-background-token-color-disabled)
input-disabled-ink-color: var(--disabled-text-color)
input-disabled-label-ink-color: var(--disabled-text-color)
input-idle-line-color: var(--background-color)
input-idle-line-color: var(--primary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-hover-line-color: var(--primary-color)
input-disabled-line-color: var(--disabled-color)
mdc-select-fill-color: var(--input-fill-color)
mdc-select-ink-color: var(--input-ink-color)
mdc-select-label-ink-color: var(--input-label-ink-color)
mdc-select-idle-line-color: var(--token-color-background-base)
mdc-select-idle-line-color: var(--divider-color)
mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
mdc-select-hover-line-color: var(--input-hover-line-color)
mdc-text-field-fill-color: var(--input-fill-color)
Expand All @@ -371,6 +371,18 @@ Graphite Light:
input-outlined-hover-border-color: var(--primary-color)
input-outlined-disabled-border-color: var(--disabled-color)
paper-input-container-focus-color: var(--primary-color)
# HA 2026.3+ Web Awesome / semantic color variables
ha-color-form-background: var(--token-color-background-input-base)
ha-color-form-background-hover: var(--token-color-background-input-base)
ha-color-form-background-disabled: var(--token-color-background-input-disabled)
wa-color-surface-raised: var(--token-color-background-card)
# Dropdown/menu item hover fills (light defaults are near-white; override for dark themes)
ha-color-fill-neutral-quiet-resting: var(--token-color-background-card)
ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base)
ha-color-fill-neutral-quiet-active: var(--token-color-background-card)
ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary)
ha-color-fill-neutral-normal-hover: var(--token-color-background-card)
ha-color-fill-neutral-normal-active: var(--token-color-background-secondary)
# ..............................................................................
# Markdown
markdown-code-background-color: var(--code-editor-background-color)
Expand Down
20 changes: 16 additions & 4 deletions themes/graphite.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Graphite:
# https://github.com/TilmanGriesel/graphite

#------------------------------------------------------
# This file was generated at 2026-02-08 15:08:56
# This file was generated at 2026-04-16 11:54:13
#------------------------------------------------------

card-mod-theme: Graphite
Expand Down Expand Up @@ -345,21 +345,21 @@ Graphite:
# ..............................................................................
# Text Fields an Dropdown
input-background-color: var(--token-color-background-input-base)
input-background-token-color-disabled: rgba(var(--input-background-color), 0.5)
input-background-token-color-disabled: color-mix(in srgb, var(--input-background-color) 50%, transparent)
input-fill-color: var(--input-background-color)
input-ink-color: var(--token-color-text-primary)
input-label-ink-color: var(--token-color-text-primary)
input-disabled-fill-color: var(--input-background-token-color-disabled)
input-disabled-ink-color: var(--disabled-text-color)
input-disabled-label-ink-color: var(--disabled-text-color)
input-idle-line-color: var(--background-color)
input-idle-line-color: var(--primary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-hover-line-color: var(--primary-color)
input-disabled-line-color: var(--disabled-color)
mdc-select-fill-color: var(--input-fill-color)
mdc-select-ink-color: var(--input-ink-color)
mdc-select-label-ink-color: var(--input-label-ink-color)
mdc-select-idle-line-color: var(--token-color-background-base)
mdc-select-idle-line-color: var(--divider-color)
mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color)
mdc-select-hover-line-color: var(--input-hover-line-color)
mdc-text-field-fill-color: var(--input-fill-color)
Expand All @@ -371,6 +371,18 @@ Graphite:
input-outlined-hover-border-color: var(--primary-color)
input-outlined-disabled-border-color: var(--disabled-color)
paper-input-container-focus-color: var(--primary-color)
# HA 2026.3+ Web Awesome / semantic color variables
ha-color-form-background: var(--token-color-background-input-base)
ha-color-form-background-hover: var(--token-color-background-input-base)
ha-color-form-background-disabled: var(--token-color-background-input-disabled)
wa-color-surface-raised: var(--token-color-background-card)
# Dropdown/menu item hover fills (light defaults are near-white; override for dark themes)
ha-color-fill-neutral-quiet-resting: var(--token-color-background-card)
ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base)
ha-color-fill-neutral-quiet-active: var(--token-color-background-card)
ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary)
ha-color-fill-neutral-normal-hover: var(--token-color-background-card)
ha-color-fill-neutral-normal-active: var(--token-color-background-secondary)
# ..............................................................................
# Markdown
markdown-code-background-color: var(--code-editor-background-color)
Expand Down
Loading