# Theme based on the macOS light and dark mode UI # Creator: Juan - @juanmtech # Website: https://www.juanmtech.com # YouTube Channel: https://youtube.com/juanmtech # My Home Assistant Config files: https://github.com/JuanMTech/Home_Assistant_files # # macOS Theme: modes: light: # Header: app-header-background-color: rgb(243, 245, 244) app-header-text-color: var(--primary-text-color) app-header-selection-bar-color: var(--primary-color) # Main Interface Colors primary-color: rgb(0, 122, 255) primary-background-color: rgb(255, 255, 255) secondary-background-color: rgb(243, 245, 244) divider-color: rgb(210, 210, 210) accent-color: var(--primary-color) # Text primary-text-color: rgb(39, 39, 39) secondary-text-color: rgb(85, 85, 85) text-primary-color: var(--primary-text-color) disabled-text-color: rgb(85, 85, 85) # Sidebar Menu sidebar-icon-color: rgb(85, 85, 85) sidebar-text-color: rgb(39, 39, 39) 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(70, 70, 70) 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(154, 153, 152) # Sliders paper-slider-knob-color: rgb(191, 191, 192) paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-active-color) paper-slider-active-color: rgb(0, 122, 255) paper-slider-secondary-color: var(--paper-slider-active-color) slider-track-color: rgb(203, 203, 205) # Labels label-badge-background-color: var(--secondary-background-color) label-badge-text-color: var(--primary-text-color) label-badge-red: rgb(253, 73, 67) label-badge-green: rgb(40, 205, 65) label-badge-blue: rgb(0, 122, 255) label-badge-yellow: rgb(255, 204, 0) label-badge-gray: rgb(142, 142, 147) # Cards card-background-color: rgb(243, 243, 244) ha-card-background, var: rgb(243, 243, 244) 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(255, 255, 255) switch-checked-track-color: rgb(0, 122, 255) switch-unchecked-button-color: var(--switch-checked-button-color) switch-unchecked-track-color: rgb(175, 177, 182) # 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(244, 244, 245) table-row-alternative-background-color: rgb(255, 255, 255) data-table-background-color: rgb(244, 244, 245) # 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(255, 255, 255) # Checkboxes mdc-checkbox-unchecked-color: rgb(154, 152, 152) mdc-checkbox-disable-color: var(--disabled-text-color) mdc-select-fill-color: rgb(228, 228, 231) 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(170, 170, 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(253, 73, 67) warning-color: rgb(255, 204, 0) sucess-color: rgb(40, 205, 65) info-color: rgb(0, 122, 255) # Progress bar ha-bar-background-color: var(--slider-track-color) # Mushroom Custom cards mush-rgb-state-entity: 1, 122, 255 mush-rgb-green: 40, 205, 65 mush-rgb-yellow: 255, 204, 0 mush-rgb-orange: 255, 149, 0 mush-rgb-cyan: 85, 190, 240 mush-rgb-purple: 175, 82, 222 mush-rgb-pink: 255, 45, 85 mush-rgb-red: 253, 73, 67 mush-rgb-gray: 142, 142, 147 mush-rgb-disabled: 70, 70, 70 mush-icon-border-radius: 30% mush-rgb-state-media-player: 0, 122, 255 #RGB rgb-primary-text-color: 0, 0, 0 rgb-primary-color: 0, 0, 0 rgb-accent-color: 0, 122, 255 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) # dark: # Header: app-header-background-color: rgb(48, 48, 49) app-header-text-color: var(--primary-text-color) app-header-selection-bar-color: var(--primary-color) # Main Interface Colors primary-color: rgb(0, 122, 255) primary-background-color: rgb(28, 29, 31) secondary-background-color: rgb(48, 48, 49) divider-color: rgb(22, 23, 24) accent-color: var(--primary-color) # Text primary-text-color: rgb(220, 221, 221) secondary-text-color: rgb(170, 170, 170) text-primary-color: var(--primary-text-color) disabled-text-color: rgb(170, 170, 170) # Sidebar Menu sidebar-icon-color: rgb(170, 170, 170) sidebar-text-color: rgb(220, 221, 221) 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(197, 197, 198) 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(90, 89, 88) # Sliders paper-slider-knob-color: rgb(141, 142, 143) paper-slider-knob-start-color: var(--paper-slider-knob-color) paper-slider-pin-color: var(--paper-slider-active-color) paper-slider-active-color: rgb(0, 122, 255) 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(255, 69, 58) label-badge-green: rgb(50, 215, 75) label-badge-blue: rgb(0, 122, 255) label-badge-yellow: rgb(255, 214, 10) label-badge-gray: rgb(90, 89, 88) # Cards card-background-color: rgb(50, 51, 53) ha-card-background: rgb(50, 51, 53) 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(202, 203, 204) switch-checked-track-color: rgb(22, 100, 218) switch-unchecked-button-color: var(--switch-checked-button-color) switch-unchecked-track-color: rgb(12, 13, 14) # 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(27, 29, 30) table-row-alternative-background-color: rgb(38, 40, 41) data-table-background-color: rgb(27, 29, 30) # 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(64, 64, 65) # Checkboxes mdc-checkbox-unchecked-color: rgb(204, 203, 203) mdc-checkbox-disable-color: var(--disabled-text-color) mdc-select-fill-color: rgb(43, 45, 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(170, 170, 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(255, 69, 58) warning-color: rgb(255, 214, 10) sucess-color: rgb(50, 215, 75) info-color: rgb(0, 122, 255) # Progress bar ha-bar-background-color: var(--slider-track-color) # Mushroom Custom cards mush-rgb-state-entity: 1, 122, 255 mush-rgb-green: 50, 215, 75 mush-rgb-yellow: 255, 214, 10 mush-rgb-orange: 255, 159, 10 mush-rgb-cyan: 90, 200, 245 mush-rgb-purple: 191, 90, 242 mush-rgb-pink: 255, 55, 95 mush-rgb-red: 255, 69, 58 mush-rgb-gray: 90, 89, 88 mush-rgb-disabled: 197, 197, 198 mush-icon-border-radius: 30% mush-rgb-state-media-player: 0, 122, 255 #RGB rgb-primary-text-color: 255, 255, 255 rgb-primary-color: 255, 255, 255 rgb-accent-color: 0, 122, 255 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)