steampunk: # ===== font (classical, brass-engraved feel) ===== primary-font-family: '"Cormorant Garamond", "Playfair Display", "Crimson Text", Georgia, "Times New Roman", serif' paper-font-common-base_-_font-family: '"Cormorant Garamond", "Playfair Display", Georgia, serif' paper-font-body1_-_font-family: '"Cormorant Garamond", "Crimson Text", Georgia, serif' paper-font-subhead_-_font-family: '"Playfair Display", "Cormorant Garamond", Georgia, serif' paper-font-headline_-_font-family: '"Playfair Display", "Cormorant Garamond", Georgia, serif' paper-font-title_-_font-family: '"Playfair Display", "Cormorant Garamond", Georgia, serif' ha-card-header-font-family: '"Playfair Display", "Cormorant Garamond", Georgia, serif' # ===== background (aged leather, gaslight) ===== lovelace-background: 'radial-gradient(1200px 800px at 20% 20%, rgba(201, 166, 107, 0.18) 0%, transparent 55%), radial-gradient(1000px 700px at 80% 80%, rgba(184, 115, 51, 0.15) 0%, transparent 55%), linear-gradient(135deg, #2a1810 0%, #1a0e08 50%, #0e0704 100%)' primary-background-color: '#1a0e08' secondary-background-color: '#241610' app-header-background-color: 'rgba(26, 14, 8, 0.85)' app-header-text-color: '#d9b381' sidebar-background-color: 'rgba(26, 14, 8, 0.92)' sidebar-text-color: '#c7a870' sidebar-selected-text-color: '#e8c98c' sidebar-selected-background-color: 'rgba(201, 166, 107, 0.15)' sidebar-icon-color: '#8a6e46' sidebar-selected-icon-color: '#d9895f' # ===== card (aged parchment panel) ===== ha-card-background: 'rgba(38, 24, 16, 0.93)' card-background-color: 'rgba(38, 24, 16, 0.93)' ha-card-border-radius: '6px' ha-card-border-width: '1px' ha-card-border-color: 'rgba(201, 166, 107, 0.25)' ha-card-box-shadow: '0 6px 24px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(201, 166, 107, 0.12)' ha-card-header-color: '#e8c98c' # ===== more-info dialog / popup (opaque, readable) ===== mdc-theme-surface: '#261810' mdc-dialog-scrim-color: 'rgba(0, 0, 0, 0.80)' dialog-backdrop-filter: 'blur(10px)' ha-dialog-surface-background: '#261810' ha-dialog-border-radius: '8px' # ===== text ===== primary-text-color: '#f0dcaf' secondary-text-color: '#b89a66' text-primary-color: '#2a1810' disabled-text-color: '#6a5538' # ===== accents ===== primary-color: '#c9a66b' accent-color: '#d9895f' light-primary-color: '#e8c98c' dark-primary-color: '#8a6e46' label-badge-background-color: 'rgba(38, 24, 16, 0.90)' label-badge-text-color: '#e8c98c' label-badge-red: '#c44a2a' label-badge-green: '#6b8f47' label-badge-blue: '#4a7688' label-badge-yellow: '#d9b54f' label-badge-grey: '#8a6e46' # ===== state colors ===== state-icon-color: '#c9a66b' state-icon-active-color: '#d9895f' state-icon-unavailable-color: '#6a5538' paper-item-icon-color: '#b89a66' paper-item-icon-active-color: '#d9895f' # ===== domain states ===== state-binary-sensor-active-color: '#8fa054' state-light-active-color: '#e8b94a' state-switch-active-color: '#c9a66b' state-fan-active-color: '#c9a66b' state-media-player-active-color: '#d9895f' state-person-home-color: '#8fa054' state-person-not_home-color: '#8a6e46' # ===== toggles ===== switch-checked-color: '#d9895f' switch-checked-button-color: '#e8c98c' switch-checked-track-color: 'rgba(217, 137, 95, 0.45)' switch-unchecked-button-color: '#6a5538' switch-unchecked-track-color: 'rgba(106, 85, 56, 0.45)' # ===== sliders ===== paper-slider-knob-color: '#d9895f' paper-slider-knob-start-color: '#d9895f' paper-slider-pin-color: '#c9a66b' paper-slider-active-color: '#c9a66b' paper-slider-container-color: 'rgba(201, 166, 107, 0.30)' paper-slider-secondary-color: '#8a6e46' # ===== dividers / outlines ===== divider-color: 'rgba(201, 166, 107, 0.20)' outline-color: 'rgba(201, 166, 107, 0.22)' # ===== input elements ===== input-background-color: 'rgba(38, 24, 16, 0.80)' input-fill-color: 'rgba(38, 24, 16, 0.80)' input-ink-color: '#f0dcaf' input-label-ink-color: '#b89a66' input-idle-line-color: 'rgba(201, 166, 107, 0.30)' input-hover-line-color: '#c9a66b' input-focused-line-color: '#d9895f' # ===== MDC select + text-field (dropdowns inside cards/dialogs) ===== mdc-select-fill-color: 'rgba(38, 24, 16, 0.90)' mdc-select-ink-color: '#f0dcaf' mdc-select-label-ink-color: '#b89a66' mdc-select-dropdown-icon-color: '#d9895f' mdc-select-idle-line-color: 'rgba(201, 166, 107, 0.35)' mdc-select-hover-line-color: '#c9a66b' mdc-select-focused-label-color: '#d9895f' mdc-text-field-fill-color: 'rgba(38, 24, 16, 0.90)' mdc-text-field-ink-color: '#f0dcaf' mdc-text-field-label-ink-color: '#b89a66' mdc-text-field-idle-line-color: 'rgba(201, 166, 107, 0.35)' mdc-text-field-hover-line-color: '#c9a66b' mdc-text-field-focused-label-color: '#d9895f' mdc-text-field-disabled-fill-color: 'rgba(38, 24, 16, 0.60)' mdc-text-field-disabled-ink-color: '#b89a66' mdc-filled-text-field-container-color: 'rgba(38, 24, 16, 0.92)' mdc-filled-text-field-label-text-color: '#b89a66' mdc-filled-text-field-input-text-color: '#f0dcaf' ha-textfield-background: 'rgba(38, 24, 16, 0.92)' card-mod-theme: steampunk card-mod-root: | ha-voice-command-dialog $ ha-textfield { --mdc-text-field-fill-color: rgba(38, 24, 16, 0.95) !important; --mdc-text-field-ink-color: #f0dcaf !important; --mdc-text-field-label-ink-color: #b89a66 !important; } ha-voice-command-dialog $ ha-textfield $ .mdc-text-field__input { color: #f0dcaf !important; } # ===== buttons ===== mdc-theme-primary: '#c9a66b' mdc-theme-secondary: '#d9895f' mdc-theme-on-primary: '#1a0e08' mdc-theme-on-secondary: '#1a0e08' # ===== tables ===== table-row-background-color: 'transparent' table-row-alternative-background-color: 'rgba(201, 166, 107, 0.05)'