Rosé Pine: modes: dark: # Header: app-header-background-color: rgb(25, 23, 36) app-header-text-color: var(--primary-text-color) app-header-selection-bar-color: var(--primary-color) # Main Interface Colors primary-color: rgb(235, 111, 146) lovelace-background: rgb(31, 29, 46) primary-background-color: rgb(31, 29, 46) secondary-background-color: rgb(25, 23, 36) divider-color: rgb(38, 35, 58) accent-color: var(--primary-color) # Text primary-text-color: rgb(224, 222, 244) secondary-text-color: rgb(144, 140, 170) text-primary-color: var(--primary-text-color) disabled-text-color: rgb(110, 106, 134) # Sidebar Menu sidebar-icon-color: rgb(144, 140, 170) sidebar-text-color: rgb(224, 222, 244) sidebar-background-color: var(--app-header-background-color) sidebar-selected-icon-color: var(--primary-color) sidebar-selected-text-color: var(--sidebar-selected-icon-color) # Buttons paper-item-icon-color: rgb(144, 140, 170) paper-item-icon-active-color: var(--primary-color) # States and Badges state-icon-color: var(--paper-item-icon-color) state-icon-active-color: var(--paper-item-icon-active-color) state-icon-unavailable-color: rgb(110, 106, 134) # Sliders paper-slider-knob-color: rgb(144, 140, 170) paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-active-color) paper-slider-active-color: rgb(246, 193, 119) paper-slider-secondary-color: var(--paper-slider-active-color) slider-track-color: rgb(85 85 87) # Labels label-badge-background-color: var(--secondary-background-color) label-badge-text-color: var(--primary-text-color) label-badge-red: rgb(235, 111, 146) label-badge-green: rgb(156, 207, 216) label-badge-blue: rgb(49, 116, 143) label-badge-yellow: rgb(246, 193, 119) label-badge-gray: rgb(64, 61, 82) # Cards card-background-color: rgb(38, 35, 58) ha-card-background: rgb(38, 35, 58) ha-card-border-color: none ha-card-border-width: 0px paper-dialog-background-color: var(--card-background-color) paper-listbox-background-color: var(--card-background-color) paper-card-background-color: var(--card-background-color) # Switches switch-checked-button-color: rgb(144, 140, 170) switch-checked-track-color: rgb(49, 116, 143) switch-unchecked-button-color: var(--switch-checked-button-color) switch-unchecked-track-color: rgb(38, 35, 58) # Toggles paper-toggle-button-checked-button-color: var(--switch-checked-button-color) paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) # Table table-row-background-color: rgb(64, 61, 82) table-row-alternative-background-color: rgb(82, 79, 103) data-table-background-color: rgb(33, 32, 46) # Dropdowns material-background-color: var(--table-row-background-color) material-secondary-background-color: var(--table-row-alternative-background-color) mdc-theme-surface: var(--secondary-background-color) # Pre/Code markdown-code-background-color: rgb(82, 79, 103) # Checkboxes mdc-checkbox-unchecked-color: rgb(144, 140, 170) mdc-checkbox-disable-color: var(--disabled-text-color) mdc-select-fill-color: rgb(33, 32, 46) mdc-select-ink-color: var(--primary-text-color) mdc-select-label-ink-color: var(--secondary-text-color) mdc-select-idle-line-color: var(--primary-text-color) mdc-select-dropdown-icon-color: rgb(144, 140, 170) mdc-select-hover-line-color: var(--accent-color) mdc-text-field-fill-color: var(--mdc-select-fill-color) # Input input-fill-color: var(--secondary-background-color) input-dropdown-icon-color: var(--secondary-text-color) input-ink-color: var(--primary-text-color) input-label-ink-color: var(--secondary-text-color) input-idle-line-color: var(--primary-text-color) input-hover-line-color: var(--accent-color) # Error, Warning, Success and Info colors error-color: rgb(235, 111, 146) warning-color: rgb(246, 193, 119) sucess-color: rgb(49, 116, 143) info-color: rgb(235, 188, 186) # Progress bar ha-bar-background-color: var(--slider-track-color) # Mushroom Custom cards mush-rgb-state-entity: 156, 207, 216 mush-rgb-green: 49, 116, 143 mush-rgb-yellow: 246, 193, 119 mush-rgb-orange: 235, 188, 186 mush-rgb-cyan: 156, 207, 216 mush-rgb-purple: 196, 167, 231 mush-rgb-pink: 235, 111, 146 mush-rgb-red: 235, 111, 146 mush-rgb-gray: 64, 61, 82 mush-rgb-disabled: 110, 106, 134 mush-icon-border-radius: 25% mush-rgb-state-media-player: 156, 207, 216 #RGB rgb-primary-text-color: 224, 222, 244 rgb-primary-color: 224, 222, 244 rgb-accent-color: 156, 207, 216 rgb-state-switch-color: var(--rgb-accent-color) rgb-state-light-color: var(--rgb-accent-color) rgb-state-fan-color: var(--rgb-accent-color) rgb-state-script-color: var(--rgb-accent-color) rgb-state-vacuum-color: var(--rgb-accent-color) rgb-state-remote-color: var(--rgb-accent-color) rgb-state-input-boolean-color: var(--rgb-accent-color) rgb-state-humidifier-color: var(--rgb-accent-color) rgb-state-cover-color: var(--rgb-accent-color) light: # Header: app-header-background-color: rgb(250, 244, 237) app-header-text-color: var(--primary-text-color) app-header-selection-bar-color: var(--primary-color) # Main Interface Colors primary-color: rgb(180, 99, 122) lovelace-background: rgb(255, 250, 243) primary-background-color: rgb(255, 250, 243) secondary-background-color: rgb(250, 244, 237) divider-color: rgb(242, 233, 222) accent-color: var(--primary-color) # Text primary-text-color: rgb(87, 82, 121) secondary-text-color: rgb(121, 117, 147) text-primary-color: var(--primary-text-color) disabled-text-color: rgb(152, 147, 165) # Sidebar Menu sidebar-icon-color: rgb(121, 117, 147) sidebar-text-color: rgb(87, 82, 121) sidebar-background-color: var(--app-header-background-color) sidebar-selected-icon-color: var(--primary-color) sidebar-selected-text-color: var(--sidebar-selected-icon-color) # Buttons paper-item-icon-color: rgb(121, 117, 147) paper-item-icon-active-color: var(--primary-color) # States and Badges state-icon-color: var(--paper-item-icon-color) state-icon-active-color: var(--paper-item-icon-active-color) state-icon-unavailable-color: rgb(152, 147, 165) # Sliders paper-slider-knob-color: rgb(121, 117, 147) paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-active-color) paper-slider-active-color: rgb(234, 157, 52) paper-slider-secondary-color: var(--paper-slider-active-color) slider-track-color: rgb(85 85 87) # Labels label-badge-background-color: var(--secondary-background-color) label-badge-text-color: var(--primary-text-color) label-badge-red: rgb(180, 99, 122) label-badge-green: rgb(86, 148, 159) label-badge-blue: rgb(40, 105, 131) label-badge-yellow: rgb(234, 157, 52) label-badge-gray: rgb(223, 218, 217) # Cards card-background-color: rgb(242, 233, 222) ha-card-background: rgb(242, 233, 222) ha-card-border-color: none ha-card-border-width: 0px paper-dialog-background-color: var(--card-background-color) paper-listbox-background-color: var(--card-background-color) paper-card-background-color: var(--card-background-color) # Switches switch-checked-button-color: rgb(121, 117, 147) switch-checked-track-color: rgb(40, 105, 131) switch-unchecked-button-color: var(--switch-checked-button-color) switch-unchecked-track-color: rgb(242, 233, 222) # Toggles paper-toggle-button-checked-button-color: var(--switch-checked-button-color) paper-toggle-button-checked-bar-color: var(--switch-checked-track-color) paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color) paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color) # Table table-row-background-color: rgb(223, 218, 217) table-row-alternative-background-color: rgb(206, 202, 205) data-table-background-color: rgb(244, 237, 232) # Dropdowns material-background-color: var(--table-row-background-color) material-secondary-background-color: var(--table-row-alternative-background-color) mdc-theme-surface: var(--secondary-background-color) # Pre/Code markdown-code-background-color: rgb(206, 202, 205) # Checkboxes mdc-checkbox-unchecked-color: rgb(121, 117, 147) mdc-checkbox-disable-color: var(--disabled-text-color) mdc-select-fill-color: rgb(244, 237, 232) mdc-select-ink-color: var(--primary-text-color) mdc-select-label-ink-color: var(--secondary-text-color) mdc-select-idle-line-color: var(--primary-text-color) mdc-select-dropdown-icon-color: rgb(121, 117, 147) mdc-select-hover-line-color: var(--accent-color) mdc-text-field-fill-color: var(--mdc-select-fill-color) # Input input-fill-color: var(--secondary-background-color) input-dropdown-icon-color: var(--secondary-text-color) input-ink-color: var(--primary-text-color) input-label-ink-color: var(--secondary-text-color) input-idle-line-color: var(--primary-text-color) input-hover-line-color: var(--accent-color) # Error, Warning, Success and Info colors error-color: rgb(180, 99, 122) warning-color: rgb(234, 157, 52) sucess-color: rgb(40, 105, 131) info-color: rgb(215, 130, 126) # Progress bar ha-bar-background-color: var(--slider-track-color) # Mushroom Custom cards mush-rgb-state-entity: 86, 148, 159 mush-rgb-green: 40, 105, 131 mush-rgb-yellow: 234, 157, 52 mush-rgb-orange: 215, 130, 126 mush-rgb-cyan: 86, 148, 159 mush-rgb-purple: 144, 122, 169 mush-rgb-pink: 180, 99, 122 mush-rgb-red: 180, 99, 122 mush-rgb-gray: 223, 218, 217 mush-rgb-disabled: 152, 147, 165 mush-icon-border-radius: 25% mush-rgb-state-media-player: 86, 148, 159 #RGB rgb-primary-text-color: 87, 82, 121 rgb-primary-color: 87, 82, 121 rgb-accent-color: 86, 148, 159 rgb-state-switch-color: var(--rgb-accent-color) rgb-state-light-color: var(--rgb-accent-color) rgb-state-fan-color: var(--rgb-accent-color) rgb-state-script-color: var(--rgb-accent-color) rgb-state-vacuum-color: var(--rgb-accent-color) rgb-state-remote-color: var(--rgb-accent-color) rgb-state-input-boolean-color: var(--rgb-accent-color) rgb-state-humidifier-color: var(--rgb-accent-color) rgb-state-cover-color: var(--rgb-accent-color)