Last active
December 5, 2025 10:20
-
-
Save Mariusthvdb/116b59a318332cfe1ac1811494c1a7e1 to your computer and use it in GitHub Desktop.
themes.yaml
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ########################################################################################## | |
| # My themes file, using some anchors to set generic parts for all themes, and dedicated | |
| # sections for dark and light themes. | |
| # | |
| # NOT using the light/dark_mode functionality, which doesnt fit my needs. | |
| # | |
| # config: | |
| # | |
| # frontend: | |
| # themes: !include_dir_merge_named /config/frontend_themes | |
| # | |
| # | |
| # Note 2025.8 introduces semantic color variables, and all themes below (except Dark Mode) | |
| # had a new scale based on what is going to be the new way for implementing color styles | |
| # In default theme that is like this, and Ive adapted that for all other themes based on | |
| # primary-color being color-primary-40 | |
| # ha-color-primary-05: '#001721' | |
| # ha-color-primary-10: '#002e3e' | |
| # ha-color-primary-20: '#004156' | |
| # ha-color-primary-30: '#006787' | |
| # ha-color-primary-40: '#009ac7' | |
| # ha-color-primary-50: '#18bcf2' | |
| # ha-color-primary-60: '#37c8fd' | |
| # ha-color-primary-70: '#7bd4fb' | |
| # ha-color-primary-80: '#b9e6fc' | |
| # ha-color-primary-90: '#dff3fc' | |
| # ha-color-primary-95: '#eff9fe' | |
| # However, not all of these are used in the ha-button, and what became obvious is that | |
| # only below variables are used in the Brand buttons. | |
| # Brand color palette | |
| # ha-color-primary-05: | (not used in button) | |
| # ha-color-primary-10: | (not used in button) | |
| # ha-color-primary-20: | (not used in button) | |
| # ha-color-primary-30: | background accent hover | |
| # ha-color-primary-40: | background accent, text filled, text plain | |
| # ha-color-primary-50: | text outlined | |
| # ha-color-primary-60: | (not used in button) | |
| # ha-color-primary-70: | (not used in button) | |
| # ha-color-primary-80: | background hover filled | |
| # ha-color-primary-90: | background filled | |
| # ha-color-primary-95: | background outlined hover, plain hover | |
| # because the text on Accent button is not set by any of the variables above I use | |
| # ha-color-on-primary-loud: '#e4e6e9' #text accent | |
| # # ha-color-on-primary-normal: green text filled, plain | |
| # # ha-color-on-primary-quiet: yellow text outlined | |
| # | |
| # as documented in the resource | |
| # https://github.com/home-assistant/frontend/blob/dev/src/resources/theme/color/wa.globals.ts#L21 | |
| # added Brand palettes and singled out Brand accent text | |
| # @mariusthvdb last_update 20251205 | |
| # versions: | |
| # HA 2025.12.0 | |
| # Kiosk-mode 9.0.3 | |
| # Custom-sidebar 10.7.3 | |
| # Card_mod 4.1.0 | |
| # Fold-entity-row 2.3.2-dcapslock.3 | |
| # Auto-entities 1.16.1-dcapslock.8 | |
| # credits to all mentioned repo code-owners and maintainers without whom none of this | |
| # would be possible, special thanks to @dcapslock for card-mod fixes and development of | |
| # auto-entities and fold-entity-row | |
| # you can find the former complete palettes in my theme-former gist | |
| ########################################################################################## | |
| # background: color-mix(in srgb, var(--sidebar-selected-icon-color) 50%, transparent) | |
| Dark blue: | |
| # 'lochmara': { | |
| # '50': '#f1f7fe', | |
| # '100': '#e3eefb', | |
| # '200': '#c0ddf7', | |
| # '300': '#88c1f1', | |
| # '400': '#49a2e7', | |
| # '500': '#2286d5', | |
| # '600': '#1675c9', | |
| # '700': '#115493', | |
| # '800': '#12497a', | |
| # '900': '#153e65', | |
| # '950': '#0e2743', | |
| # } | |
| # Brand color palette | |
| ha-color-on-primary-loud: '#f1f7fe' | |
| ha-color-primary-30: '#115493' # background accent hover | |
| ha-color-primary-40: var(--primary-color) # background accent, text filled , text plain | |
| ha-color-primary-50: '#49a2e7' # text outlined | |
| ha-color-primary-80: '#88c1f1' # background hover filled | |
| ha-color-primary-90: '#c0ddf7' # background filled | |
| ha-color-primary-95: '#c0ddf7' # background outlined hover, plain hover | |
| <<: &generic | |
| ha-dialog-header-title-color: var(--primary-text-color) | |
| # settings required after 2025.12 which interferes with Markdown. Might be temporary | |
| # markdown-table-border-color: red | |
| markdown-table-border-width: 0px | |
| # ha-dialog-surface-background: var(--lovelace-background-linear) | |
| card-mod-theme: theme-mods | |
| # card-row-gap: 0px | |
| # entities-card-row-gap: 0px | |
| header-background: var(--lovelace-background-linear) #var(--background-color-off) | |
| rainbow-linear: linear-gradient(90deg, red, orange, yellow, green, blue, purple) | |
| rainbow-radial: radial-gradient(circle, red, orange, yellow, green, blue, purple) | |
| alert-background: linear-gradient(90deg, var(--alert-color) 30%,var(--card-background-color) 100%) | |
| alert-text-color: seashell # '#ffeeee' | |
| # icon-primary-color: red | |
| # app-header-text-color: skyblue | |
| # sl-color-neutral-600: black | |
| # text-align: start | |
| # custom-sidebar-background | |
| # custom-sidebar-menu-background | |
| # custom-sidebar-title-color | |
| # custom-sidebar-subtitle-color | |
| # custom-sidebar-button-color | |
| # custom-sidebar-text-color: var(--primary-color) | |
| # custom-sidebar-text-color-selected | |
| # custom-sidebar-icon-color | |
| # custom-sidebar-icon-color-selected | |
| # custom-sidebar-selection-background | |
| # custom-sidebar-info-color | |
| # custom-sidebar-info-color-selected | |
| custom-sidebar-notification-color: var(--primary-color) | |
| custom-sidebar-notification-text-color: ivory | |
| # custom-sidebar-selection-opacity | |
| # custom-sidebar-divider-color | |
| section-label-margin-left: 0px # used in fold-entity-row, and card-mod theme on section | |
| margin-bottom-final-fold: -8px # to reduce space under a final fold in a section/card | |
| fold-entity-row-padding: 0px | |
| fold-entity-row-label-margin-left: var(--section-label-margin-left) | |
| fold-entity-row-transition-duration: 1ms | |
| fold-entity-row-toggle-icon-width: 24px | |
| fold-entity-row-toggle-icon-color: var(--primary-color) | |
| # fold-entity-row-toggle-icon-ripple: rgba(from var(--primary-color) r g b /0.5) | |
| # Tile features generic setting | |
| # feature-border-radius: var(--ha-card-border-radius) | |
| # control-slider-border-radius: 0px | |
| # control-button-border-radius: 0px | |
| # control-select-border-radius: 0px | |
| # control-select-button-border-radius: 0px | |
| # control-select-menu-border-radius: 0px | |
| box-shadow-chip: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), | |
| 0px 1px 1px 0px rgba(0, 0, 0, 0.14), | |
| 0px 1px 3px 0px rgba(0, 0, 0, 0.12) | |
| # box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2) | |
| box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14), | |
| 0px 3px 1px -2px rgba(0, 0, 0, 0.12), | |
| 0px 1px 5px 0px rgba(0, 0, 0, 0.2) | |
| box-shadow-badges: var(--box-shadow) | |
| # test-hex-color: '#f4bd4a' | |
| # ha-card-box-shadow: var(--box-shadow) | |
| md-dialog-container-shape: var(--ha-card-border-radius) | |
| # md-dialog-container-shape-start-start: var(--ha-card-border-radius) | |
| # md-dialog-container-shape-start-end: var(--ha-card-border-radius) | |
| # md-dialog-container-shape-end-start: var(--ha-card-border-radius) | |
| # md-dialog-container-shape-end-end: var(--ha-card-border-radius) | |
| # https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/cards/hui-heading-card.ts | |
| # ha-heading-card-title-color: gold #var(--primary-text-color) | |
| # ha-heading-card-title-font-size: 30px #16px | |
| # ha-heading-card-title-font-weight: 400 | |
| # ha-heading-card-title-line-height: var(--ha-heading-card-title-font-size) # 24px | |
| # letter-spacing: 0.1px | |
| # mdc-icon-size: 18px | |
| # ha-heading-card-subtitle-color: var(--secondary-text-color) | |
| # ha-heading-card-subtitle-font-size: 14px | |
| # ha-heading-card-subtitle-font-weight: 500 | |
| # ha-heading-card-subtitle-line-height: 20px | |
| # New badges | |
| # https://github.com/home-assistant/frontend/tree/dev/src/panels/lovelace/badges | |
| # https://github.com/home-assistant/frontend/blob/dev/src/components/ha-heading-badge.ts | |
| # ha-heading-badge-text-color: var(--text-color-off) #var(--secondary-text-color) | |
| # ha-heading-badge-font-size: 14px | |
| # ha-heading-badge-font-weight: 400 | |
| # ha-heading-badge-line-height: 20px | |
| # Legacy Badges loaded as custom | |
| # https://github.com/home-assistant/frontend/blob/dev/src/components/entity/ha-state-label-badge.ts | |
| # label-badge-background-color: orange | |
| # label-badge-text-color: ivory | |
| # label-badge-red: var(--ha-color) | |
| # | |
| # ha-label-badge-font-size: 15px | |
| # ha-label-badge-size: 30px | |
| # ha-label-badge-border-radius: var(--ha-card-border-radius) | |
| # mush-chip-border-radius: var(--ha-card-border-radius) | |
| # X ha-label-badge-color: yellow | |
| # X ha-label-badge-label-text-transform: lowercase #capitalize|none|uppercase|lowercase | |
| # ha-label-badge-label-color: white | |
| # X ha-label-badge-label-background-color: ivory | |
| # ha-label-badge-title-font-size: 10px | |
| # ha-label-badge-title-font-weight: 400 | |
| # ha-label-badge-title-width: 50px | |
| # X ha-label-badge-title-color: white | |
| # need .label-badge .label span for label background-color, color, border-radius | |
| # see https://github.com/home-assistant/frontend/blob/dev/src/components/sl-tab-group.ts#L44 | |
| # decreasing to 1rem allows for 7 icons on mobile | |
| # requires HA 2025.7! | |
| # set in card-mod themes to make device dependent | |
| # ha-tab-padding-start: 1rem #14px | |
| # ha-tab-padding-end: 1rem #14px | |
| # new badge settings | |
| # https://github.com/home-assistant/frontend/blob/dev/src/components/ha-badge.ts | |
| # not required?? works fine without | |
| # ha-badge-border-radius: 24px #var(--ha-card-border-radius) | |
| # ha-badge-size: 36px | |
| ha-badge-icon-size: 24px | |
| # Generic HA settings | |
| app-header-selection-bar-color: var(--primary-color) | |
| # ha-tab-active-text-color: red | |
| # sl-color-primary-600: var(--active-color) | |
| # sl-color-neutral-600: var(--app-header-text-color) | |
| hover-color: var(--lovelace-background-linear) | |
| # https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/views/hui-sections-view.ts | |
| # ha-view-sections-row-gap: 4px #default 8px | |
| # ha-view-sections-extra-top-margin: 0 | |
| # ha-view-sections-column-gap: 8px #default 32px | |
| # ha-section-grid-row-gap: 8px #default | |
| # ha-section-grid-column-gap: 0px | |
| # ha-section-grid-row-height: auto # required to have the subview grids not create a big vertical gap | |
| scrollbar-thumb-color: var(--primary-color) # open issue using this in Safari, works in Chrome | |
| # ha-control-color: red | |
| ha-color: var(--light-blue-color) #'#03a9f4' # rgb(3,169,244) var(--color-primary-40) # #009ac7 # | |
| # ha-accent-color: var(--accent-color) #'#ff9800' is system default theme color | |
| # https://community.home-assistant.io/t/dev-tools-template-add-scrollbars/439175/27 | |
| ha-card-border-width: 0px | |
| # ha-card-border-color: transparent # test this is even necessary with width = 0? | |
| # https://github.com/home-assistant/frontend/blob/dev/src/resources/theme/core.globals.ts#L20 | |
| ha-card-border-radius: 0px #var(--border-radius-square) | |
| ha-dialog-border-radius: var(--ha-card-border-radius) | |
| # ha-config-card-border-radius: var(--ha-card-border-radius) | |
| # feature-border-radius: var(--ha-card-border-radius) | |
| # ha-card-features-border-radius: 0px | |
| # ha-tile-icon-border-radius: var(--ha-card-border-radius) | |
| ha-card-features-border-radius: var(--ha-card-border-radius) | |
| ha-button-border-radius: var(--ha-card-border-radius) | |
| popup-border-radius: var(--ha-card-border-radius) | |
| control-select-border-radius: var(--ha-card-border-radius) | |
| control-select-button-border-radius: var(--ha-card-border-radius) | |
| # dialog-content-padding: 8px 16px 16px 16px | |
| # these work: | |
| ha-tooltip-border-radius: var(--ha-card-border-radius) | |
| ha-tooltip-font-size: 12px | |
| ha-tooltip-arrow-size: 0px | |
| wa-tooltip-border-width: 2px | |
| wa-tooltip-border-style: solid | |
| wa-tooltip-border-color: var(--background-color-off) | |
| # these dont: | |
| wa-tooltip-background-color: orange | |
| wa-tooltip-content-color: green | |
| # ha-card-box-shadow: var(--box-shadow) #0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2) | |
| # https://github.com/iantrich/restriction-card?tab=readme-ov-file#theme-variables | |
| restriction-lock-row-margin-left: calc(90%) #100% - 25px | |
| restriction-regular-lock-color: var(--alert-color) | |
| restriction-success-lock-color: var(--success-color) | |
| restriction-lock-opacity: 0.8 | |
| # restriction-lock-icon-size: 20px | |
| alert-color: crimson | |
| # error-color: crimson In original HA styles #white taken out because it overrides the (error) colors in the integration panel | |
| # warning-color: black # In original ha styles | |
| no-power-color: dimgray #'#636B75' | |
| # https://github.com/home-assistant/frontend/blob/dev/src/resources/theme/color/color.globals.ts | |
| # energy-gas-color: black | |
| # energy-water-color: red | |
| # energy-solar-color: green | |
| # energy-grid-return-color: pink | |
| # energy-grid-consumption-color: white | |
| # energy-non-fossil-color: blue | |
| # energy-battery-in-color: yellow | |
| # energy-battery-out-color: purple | |
| # | |
| # graph-color-1: black | |
| # see https://github.com/home-assistant/frontend/blob/dev/src/components/ha-sidebar.ts | |
| # var(--sidebar-menu-button-text-color, --primary-text-color) | |
| # var(--sidebar-menu-button-background-color, --primary-background-color) | |
| # sidebar-background-color: red #ok also above view icons | |
| # sidebar-icon-color: pink #ok | |
| # sidebar-text-color: var(--primary-color) | |
| # sidebar-selected-background-color: orange # ?? | |
| sidebar-icon-color: var(--primary-color) | |
| # sidebar-selected-icon-color: purple #ok !! also sets sidebar-selected-background-color | |
| # sidebar-selected-text-color: yellow #ok | |
| # sidebar-menu-button-text-color: pink | |
| # sidebar-menu-button-background-color: black | |
| # sidebar-selected-icon-color: none | |
| # sidebar-selected-text-color: green | |
| state-active-color: var(--amber-color) | |
| # state-inactive-color: var(--grey-color) | |
| # state-unavailable-color: var(--disabled-color) #bdbdbd | |
| state-icon-color: var(--primary-color) | |
| state-alarm_control_panel-armed_away-color: var(--red-color) | |
| state-alarm_control_panel-armed_custom_bypass-color: var(--warning-color) | |
| state-alarm_control_panel-armed_home-color: var(--warning-color) | |
| state-alarm_control_panel-armed_night-color: var(--red-color) | |
| state-alarm_control_panel-armed_vacation-color: var(--warning-color) | |
| state-alarm_control_panel-arming-color: var(--warning-color) | |
| state-alarm_control_panel-disarmed-color: var(--success-color) | |
| state-alarm_control_panel-disarming-color: var(--info-color) | |
| state-alarm_control_panel-pending-color: var(--orange-color) | |
| state-alarm_control_panel-triggered-color: var(--alert-color) | |
| state-alert-on-color: var(--alert-color) | |
| state-alert-off-color: var(--success-color) | |
| state-automation-on-color: var(--active-color) | |
| state-binary_sensor-battery-off-color: var(--success-color) | |
| state-binary_sensor-battery-on-color: var(--alert-color) | |
| state-binary_sensor-door-off-color: var(--success-color) | |
| state-binary_sensor-door-on-color: var(--alert-color) | |
| state-binary_sensor-window-off-color: var(--success-color) | |
| state-binary_sensor-window-on-color: var(--alert-color) | |
| state-binary_sensor-safety-on-color: var(--alert-color) | |
| state-binary_sensor-safety-off-color: var(--success-color) | |
| state-binary_sensor-garage_door-off-color: var(--success-color) | |
| state-binary_sensor-garage_door-on-color: var(--alert-color) | |
| state-binary_sensor-moisture-on-color: var(--alert-color) | |
| state-binary_sensor-moisture-off-color: var(--success-color) | |
| state-binary_sensor-motion-on-color: var(--alert-color) | |
| state-binary_sensor-on-color: var(--active-color) | |
| state-binary_sensor-opening-off-color: var(--success-color) | |
| state-binary_sensor-opening-on-color: var(--alert-color) | |
| state-binary_sensor-problem-on-color: var(--alert-color) | |
| state-binary_sensor-problem-off-color: var(--success-color) | |
| state-binary_sensor-smoke-off-color: var(--success-color) | |
| state-binary_sensor-carbon_monoxide-off-color: var(--success-color) | |
| state-binary_sensor-update-on-color: var(--alert-color) #'#f44336' | |
| state-binary_sensor-update-off-color: var(--success-color) #'#f44336' | |
| state-binary_sensor-active-on-color: var(--alert-color) #'#f44336' | |
| state-climate-auto-color: var(--primary-color) #override default var(--green-color) | |
| # state-climate-cool-color: var(--blue-color) | |
| # state-climate-dry-color: var(--orange-color) | |
| # state-climate-fan_only-color: var(--cyan-color) | |
| # state-climate-heat-color: var(--deep-orange-color) | |
| # state-climate-heat-cool-color: var(--amber-color) | |
| state-humidifier-on-color: var(--deep-orange-color) | |
| state-cover-closed-color: midnightblue #var(--primary-color) #midnightblue | |
| state-cover-closing-color: var(--warning-color) | |
| state-cover-open-color: deepskyblue | |
| state-cover-opening-color: var(--warning-color) | |
| state-cover-unknown-color: slategray | |
| # state-cover-active-color: var(--purple-color) | |
| state-device_tracker-home-color: var(--success-color) | |
| state-device_tracker-not-home-color: var(--no-power-color) | |
| # state-device_tracker-active-color: var(--blue-color) | |
| state-fan-on-color: lightskyblue | |
| state-fan-off-color: lightgray | |
| # state-fan-active-color: var(--cyan-color) | |
| state-group-active-color: var(--active-color) | |
| state-input_boolean-on-color: var(--active-color) | |
| # state-media_player-off-color: pink | |
| state-person-home-color: var(--success-color) | |
| state-person-not-home-color: var(--no-power-color) | |
| state-person-zone-color: mediumslateblue | |
| state-script-on-color: var(--alert-color) | |
| state-sun-below_horizon-color: skyblue #midnightblue | |
| state-sun-above_horizon-color: gold | |
| state-switch-on-color: var(--active-color) | |
| state-update-on-color: var(--alert-color) | |
| # state-valve-active-color: var(--blue-color); | |
| # # Sliders | |
| # md-slider-active-track-color: var(--secondary-text-color) | |
| # md-slider-inactive-track-color: var(--no-power-color) | |
| # md-slider-focus-handle-color: var(--alert-color) | |
| # md-slider-pressed-handle-color: white | |
| # md-slider-handle-color: var(--primary-color) | |
| # md-slider-hover-handle-color: var(--alert-color) | |
| # md-slider-handle-shadow-color: var(--alert-color) | |
| # md-slider-label-container-color: var(--no-power-color) | |
| # md-slider-label-text-color: var(--alert-color) | |
| <<: &select_quick | |
| # set colors on quickbar | |
| # mdc-text-field-fill-color: var(--card-background-color) # quickbar header | |
| # mdc-text-field-ink-color: var(--primary-text-color) #var(--mdc-theme-primary) | |
| # set colors on input_select | |
| mdc-select-label-ink-color: var(--secondary-text-color) | |
| # mdc-select-fill-color: var(--card-background-color) | |
| mdc-shape-small: var(--ha-card-border-radius) | |
| # set colors on expanded attributes in more-info | |
| input-fill-color: var(--card-background-color) | |
| input-ink-color: var(--primary-text-color) | |
| <<: &dark-theme | |
| # https://github.com/home-assistant/frontend/blob/dev/src/components/map/ha-map.ts#L685 | |
| map-filter: 'invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)' | |
| mush-rgb-disabled: 111, 111, 111 | |
| rgb-disabled: 111, 111, 111 | |
| # power-color: var(--active-color) | |
| app-header-text-color: var(--primary-text-color) | |
| # app-header-background-color: var(--lovelace-background) # using a radial via card_mod theming | |
| # modes: | |
| # dark: | |
| # disabled-text-color: gray | |
| # use dark mode on devices, changing the Map backgrounds to not stand out lightly | |
| # also, try and make the dev tools template more readable | |
| lovelace-background: radial-gradient(var(--primary-color),var(--card-background-color)) | |
| lovelace-background-linear: linear-gradient(90deg, var(--card-background-color) 0%, var(--primary-color) 100%) | |
| background-color-on: var(--primary-color) | |
| background-color-off: var(--card-background-color) | |
| text-color-on: var(--card-background-color) | |
| text-color-off: var(--primary-color) | |
| icon-color-on: var(--card-background-color) | |
| icon-color-off: var(--primary-color) | |
| codemirror-keyword: red #if else endif | |
| codemirror-operator: yellow # > < + * | | |
| codemirror-property: pink # is_state( , ) | |
| codemirror-variable: '#696969' | |
| # codemirror-qualifier: | |
| codemirror-def: orange | |
| codemirror-number: lightblue # {% %} | |
| codemirror-comment: slategray | |
| # codemirror-meta: | |
| # codemirror-atom: | |
| codemirror-string: sandybrown | |
| background-opacity-on: rgba(var(--primary-rgb),0.8) | |
| background-opacity-off: rgba(var(--card-background),0.8) | |
| # error-color: var(--primary-color) #white taken out because it overrides the (error) colors in the integration panel | |
| # mdc-text-field-fill-color: var(--primary-color) # quickbar header | |
| # ha-card-background: linear-gradient(180deg, var(--primary-color) 0%, var(--card-background-color) 100%) #werkt wel | |
| ########################################################################################## | |
| # lovelace-background: radial-gradient(var(--primary-color),var(--sidebar-background-color)) | |
| active-color: gold #'#F9C536' | |
| accent-color: '#1A78C2' # Accent color | |
| power-color: orange | |
| # Main colors | |
| primary-color: '#1675C9' # Header | |
| primary-rgb: 22,117,201 | |
| dark-primary-color: '#245188' # Hyperlinks | |
| light-primary-color: var(--accent-color) # Horizontal line in about | |
| # Text colors | |
| primary-text-color: '#e3eefb' # ivory #'#FFFFFF' # Primary text colour, here is referencing dark-primary-color | |
| # text-primary-color: var(--primary-text-color) # Primary text colour | |
| secondary-text-color: '#5294E2' # For secondary titles in more info boxes etc. | |
| disabled-text-color: var(--no-power-color) # Disabled text colour | |
| sidebar-text-color: var(--primary-color) | |
| # Background colors | |
| card-background-color: '#0e2743' #434954' # Card background colour | |
| card-background: 14, 39, 67 #67,73,84 | |
| primary-background-color: '#115493' #'#2E3545' # Settings background | |
| secondary-background-color: '#2E3545' # Main card UI background | |
| divider-color: var(--primary-color) # Divider | |
| # # Table rows | |
| table-row-background-color: var(--card-background-color) # Table row | |
| # table-row-alternative-background-color: '#12497a' # Table row alternative | |
| data-table-background-color: '#0e2743' # Make text standout in dark themes | |
| ha-card-header-color: var(--accent-color) # Card header text colour | |
| ########################################################################################## | |
| Midnight: | |
| # https://community.home-assistant.io/t/midnight-theme/28598 | |
| # 'havelock-blue': { | |
| # '50': '#f1f7fd', | |
| # '100': '#dfedfa', | |
| # '200': '#c6e0f7', | |
| # '300': '#9fccf1', | |
| # '400': '#71b0e9', | |
| # '500': '#5294e2', | |
| # '600': '#3b77d5', | |
| # '700': '#3164c4', | |
| # '800': '#2e519f', | |
| # '900': '#2a477e', | |
| # '950': '#1e2d4d', | |
| # }, | |
| # Brand color palette | |
| ha-color-on-primary-loud: '#f1f7fd' | |
| ha-color-primary-30: '#3164c4' # background accent hover | |
| ha-color-primary-40: var(--primary-color) # background accent, text filled , text plain | |
| ha-color-primary-50: '#49a2e7' # text outlined | |
| ha-color-primary-80: '#9fccf1' # background hover filled | |
| ha-color-primary-90: '#dfedfa' # background filled | |
| ha-color-primary-95: '#c6e0f7' # background outlined hover, plain hover | |
| <<: *generic | |
| <<: *dark-theme | |
| ########################################################################################## | |
| # Main colors | |
| active-color: gold | |
| power-color: orange | |
| primary-color: '#5294E2' # Header | |
| primary-rgb: 82,148,226 | |
| accent-color: '#E45E65' # Accent color | |
| dark-primary-color: '#44679a' #var(--primary-text-color) # Hyperlinks | |
| light-primary-color: var(--primary-text-color) # Horizontal line in about | |
| # Text colors | |
| primary-text-color: '#FFFFFF' # Primary text colour, here is referencing dark-primary-color | |
| # text-primary-color: var(--primary-text-color) # Primary text colour | |
| secondary-text-color: '#5294E2' # For secondary titles in more info boxes etc. | |
| disabled-text-color: var(--no-power-color) # Disabled text colour | |
| sidebar-text-color: var(--primary-color) | |
| # Background colors | |
| card-background-color: '#434954' # Card background colour | |
| card-background: 67,73,84 | |
| primary-background-color: '#383C45' # Settings background | |
| secondary-background-color: '#383C45' # Main card UI background | |
| divider-color: rgba(0,0,0,.12) # Divider | |
| # Table rows | |
| table-row-background-color: '#353840' # Table row | |
| table-row-alternative-background-color: '#3E424B' # Table row alternative | |
| ha-card-header-color: var(--accent-color) # Card header text colour | |
| ########################################################################################## | |
| Teal: | |
| # 'aquamarine': { | |
| # '50': '#eafff7', | |
| # '100': '#cbffeb', | |
| # '200': '#9cfedc', | |
| # '300': '#5df8cc', | |
| # '400': '#1de9b6', | |
| # '500': '#00d0a1', | |
| # '600': '#00aa85', | |
| # '700': '#00886e', | |
| # '800': '#006b57', | |
| # '900': '#00584a', | |
| # '950': '#00322b', | |
| # }, | |
| # Brand color palette | |
| ha-color-on-primary-loud: '#006b57' | |
| ha-color-primary-30: '#00aa85' # background accent hover | |
| ha-color-primary-40: '#1de9b6' # background accent, text filled , text plain | |
| ha-color-primary-50: '#5df8cc' # text outlined | |
| ha-color-primary-80: '#00584a' # background hover filled | |
| ha-color-primary-90: '#00886e' # background filled | |
| ha-color-primary-95: '#00886e' # background outlined hover, plain hover | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: gold | |
| power-color: orange | |
| ########################################################################################## | |
| accent-color: var(--primary-color) | |
| # Main Stuff # | |
| primary-color: '#1DE9B6' # Primary (most of the UI) | |
| primary-rgb: 29,233,182 | |
| dark-primary-color: '#4ca081' | |
| card-background-color: '#424242' | |
| card-background: 66,66,66 | |
| primary-background-color: '#303030' # Primary background colour (dialogs, e.t.c) | |
| secondary-background-color: '#303030' # Secondary background colour (main UI background) | |
| primary-text-color: '#FFFFFF' # Primary text colour | |
| secondary-text-color: rgba(255,255,255,0.7) # Secondary text colour | |
| sidebar-text-color: var(--primary-color) | |
| disabled-text-color: rgba(255,255,255,0.5) # Disabled text colour | |
| divider-color: rgba(255,255,255,0.12) # Divider colour | |
| ha-card-header-color: '#FFFFFF' # Card header text colour | |
| ########################################################################################## | |
| Dark orange: | |
| # 'west-side': { | |
| # '50': '#fffbec', | |
| # '100': '#fff6d3', | |
| # '200': '#ffeaa5', | |
| # '300': '#ffd86d', | |
| # '400': '#ffbb32', | |
| # '500': '#ffa40a', | |
| # '600': '#ff8c00', | |
| # '700': '#cc6702', | |
| # '800': '#a14f0b', | |
| # '900': '#82420c', | |
| # '950': '#462004', | |
| # } | |
| # Brand color palette | |
| ha-color-on-primary-loud: '#fff6d3' # text accent | |
| ha-color-primary-30: '#a14f0b' # background accent hover | |
| ha-color-primary-40: var(--primary-color) # background accent, text filled , text plain | |
| ha-color-primary-50: '#ffa40a' # text outlined | |
| ha-color-primary-80: '#ffd86d' # background hover filled | |
| ha-color-primary-90: '#fff6d3' # background filled | |
| ha-color-primary-95: '#fff6d3' # background outlined hover, plain hover | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: gold | |
| power-color: orange | |
| ########################################################################################## | |
| accent-color: var(--primary-color) | |
| primary-color: darkorange | |
| primary-rgb: 255,140,0 | |
| light-primary-color: '#ffc947' | |
| dark-primary-color: '#c66900' #a86d27 | |
| # text-primary-color: ivory | |
| primary-background-color: '#37464f' | |
| icon-color: '#62717b' | |
| card-background-color: '#263137' | |
| card-background: 38,49,55 | |
| ha-card-header-color: var(--primary-text-color) | |
| secondary-background-color: var(--primary-background-color) | |
| primary-text-color: '#fffbec' #ivory | |
| secondary-text-color: var(--primary-color) | |
| sidebar-background-color: '#202020' | |
| sidebar-text-color: var(--primary-color) | |
| table-row-background-color: var(--card-background-color) | |
| table-row-alternative-background-color: var(--icon-color) | |
| ########################################################################################## | |
| Dark cyan: | |
| # 'scooter': { | |
| # '50': '#ebffff', | |
| # '100': '#cefdff', | |
| # '200': '#a2f8ff', | |
| # '300': '#63f0fd', | |
| # '400': '#1cdef4', | |
| # '500': '#00bcd4', | |
| # '600': '#039ab7', | |
| # '700': '#0a7a94', | |
| # '800': '#126278', | |
| # '900': '#145265', | |
| # '950': '#063646', | |
| # } | |
| # Brand color palette | |
| ha-color-on-primary-loud: '#ebffff' # text accent | |
| ha-color-primary-30: '#0a7a94' # background accent hover | |
| ha-color-primary-40: '#039ab7' # background accent, text filled , text plain | |
| ha-color-primary-50: '#00bcd4' # text outlined | |
| ha-color-primary-80: '#a2f8ff' # background hover filled | |
| ha-color-primary-90: '#cefdff' # background filled | |
| ha-color-primary-95: '#cefdff' # background outlined hover, plain hover | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: gold | |
| power-color: orange | |
| ########################################################################################## | |
| accent-color: var(--primary-color) | |
| # Main colors that can be changed | |
| primary-color: '#00bcd4' | |
| primary-rgb: 0,188,212 | |
| dark-primary-color: '#3a8192' | |
| disabled-text-color: '#545454' | |
| divider-color: 'rgba(255, 255, 255, 0.12)' | |
| sidebar-text-color: var(--primary-color) | |
| # card-background-color: '#4e4e4e' | |
| # card-background: 78,78,78 | |
| # | |
| # primary-background-color: '#303030' | |
| # secondary-background-color: '#2b2b2b' | |
| primary-text-color: '#cefdff' | |
| secondary-text-color: '#04a7bc' | |
| ha-card-header-color: var(--state-icon-color) #var(--paper-item-icon-color) | |
| # Background colors | |
| card-background-color: '#063646' # Card background colour | |
| card-background: 6, 54, 70 | |
| primary-background-color: '#126278' # Settings background | |
| secondary-background-color: '#0a7a94' # Main card UI background | |
| ########################################################################################## | |
| ## https://community.home-assistant.io/c/projects/themes | |
| ## https://community.home-assistant.io/t/dark-theme-or-night-mode-theme/446/56 | |
| ########################################################################################## | |
| Default adjusted: | |
| <<: *generic | |
| background-color-on: var(--primary-color) | |
| background-color-off: var(--card-background-color) | |
| background-opacity-on: rgba(var(--primary-rgb),0.8) | |
| background-opacity-off: rgba(var(--card-background),0.8) | |
| text-color-on: var(--card-background-color) | |
| text-color-off: var(--primary-color) | |
| icon-color-on: var(--accent-color) | |
| icon-color-off: var(--primary-color) | |
| active-color: gold | |
| accent-color: var(--state-icon-active-color) | |
| primary-rgb: 3,168,243 | |
| card-background: 255,255,255 | |
| ########################################################################################## | |
| Clear: | |
| # 'shuttle-gray': { | |
| # '50': '#f5f6f6', | |
| # '100': '#e4e6e9', | |
| # '200': '#cdd1d4', | |
| # '300': '#aab0b6', | |
| # '400': '#7f8891', | |
| # '500': '#636b75', | |
| # '600': '#565c64', | |
| # '700': '#494d55', | |
| # '800': '#414449', | |
| # '900': '#393b40', | |
| # '950': '#232529', | |
| # }, | |
| # https://github.com/home-assistant/frontend/blob/dev/src/resources/theme/color/wa.globals.ts#L21 | |
| ha-color-on-primary-loud: '#e4e6e9' #text accent | |
| # ha-color-on-primary-normal: green text filled, plain | |
| # ha-color-on-primary-quiet: yellow text outlined | |
| # Brand color palette | |
| # ha-color-primary-05: '#f5f6f6' | |
| # ha-color-primary-10: '#e4e6e9' | |
| # ha-color-primary-20: '#cdd1d4' | |
| # ha-color-primary-30: '#aab0b6' # background accent hover | |
| # ha-color-primary-40: '#7f8891' # background accent, text filled , text plain | |
| # ha-color-primary-50: '#636b75' # text outlined | |
| # ha-color-primary-60: '#565c64' | |
| # ha-color-primary-70: '#494d55' | |
| # ha-color-primary-80: '#414449' # background filled hover | |
| # ha-color-primary-90: '#393b40' # background filled | |
| # ha-color-primary-95: '#232529' # background outlined hover, plain hover | |
| ha-color-primary-30: '#494d55' # background accent hover | |
| ha-color-primary-40: '#636b75' # background accent, text filled , text plain | |
| ha-color-primary-50: '#636b75' # text outlined | |
| ha-color-primary-80: '#cdd1d4' # background filled hover | |
| ha-color-primary-90: '#e4e6e9' # background filled | |
| ha-color-primary-95: '#e4e6e9' # background outlined hover, plain hover | |
| <<: *generic | |
| <<: &light-theme | |
| lovelace-background: radial-gradient(var(--card-background-color),var(--primary-color)) | |
| lovelace-background-linear: linear-gradient(90deg, var(--primary-color) 0%, var(--card-background-color) 100%) | |
| background-color-on: var(--card-background-color) | |
| background-color-off: rgba(from var(--primary-color) r g b /0.8) #var(--primary-color) | |
| background-opacity-on: rgba(var(--card-background),0.8) | |
| background-opacity-off: rgba(var(--primary-rgb),0.8) | |
| text-color-on: var(--primary-color) | |
| text-color-off: var(--card-background-color) | |
| icon-color-on: var(--primary-color) | |
| icon-color-off: var(--card-background-color) | |
| # app-header-text-color: var(--text-color-off) | |
| active-color: gold | |
| # accent-color: var(--alert-color) | |
| power-color: darkorange | |
| ########################################################################################## | |
| # lovelace-background: radial-gradient(var(--sidebar-background-color),var(--primary-color)) | |
| # lovelace-background: radial-gradient(whitesmoke,slategray) | |
| # lovelace-background: center/cover no-repeat url('/local/wallpapers/.jpg') fixed | |
| text-color: pink # Grey text | |
| text-light-color: '#BAC0C6' # Light grey text | |
| primary-color: '#636B75' # Background | |
| primary-rgb: 99,107,117 | |
| dark-primary-color: '#464b51' | |
| # text-primary-color: '#FFF' # Text | |
| # primary-text-color: var(--primary-color) | |
| # secondary-text-color: whitesmoke | |
| # sidebar-background-color: var(--card-background-color) | |
| ha-card-header-color: var(--primary-color) # Title in settings | |
| primary-background-color: gainsboro # Background behind cards in states | |
| secondary-background-color: silver # Background behind cards and alternating in dev tools state | |
| card-background-color: whitesmoke #var(--background-card-color, 0.6) # Card Background | |
| card-background: 245,245,245 | |
| sidebar-text-color: var(--primary-color) | |
| ########################################################################################## | |
| Dark red: | |
| # | |
| # 'red-berry': { | |
| # '50': '#ffeeee', | |
| # '100': '#ffdada', | |
| # '200': '#ffbbbb', | |
| # '300': '#ff8b8b', | |
| # '400': '#ff4949', | |
| # '500': '#ff1111', | |
| # '600': '#ff0000', | |
| # '700': '#e70000', | |
| # '800': '#be0000', | |
| # '900': '#8b0000', | |
| # '950': '#560000', | |
| # } | |
| ha-color-on-primary-loud: '#ffeeee' #text accent | |
| # Brand color palette | |
| ha-color-primary-30: '#8b0000' # background accent hover | |
| ha-color-primary-40: '#be0000' # background accent, text filled, text plain | |
| ha-color-primary-50: '#ff1111' # text outlined | |
| ha-color-primary-80: '#ffdada' # background hover filled | |
| ha-color-primary-90: '#ffbbbb' # background filled | |
| ha-color-primary-95: '#ffbbbb' # background outlined hover, plain hover | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: gold | |
| power-color: orange | |
| ########################################################################################## | |
| accent-color: var(--primary-color) | |
| # text-primary-color: var(--primary-text-color) | |
| dark-primary-color: '#882c27' | |
| disabled-text-color: '#545454' | |
| divider-color: rgba(255,255,255,0.12) | |
| light-primary-color: '#e06c6c' | |
| card-background-color: '#1d1d1d' | |
| card-background: 29,29,29 | |
| primary-background-color: '#303030' | |
| primary-color: darkred #'#d32f2f' | |
| primary-rgb: 139, 0, 0 #211,47,47 | |
| sidebar-text-color: var(--primary-color) | |
| primary-text-color: '#ffeeee' | |
| secondary-background-color: '#131313' | |
| # Colors based on variables, see above | |
| ha-card-header-color: var(--state-icon-color) | |
| secondary-text-color: var(--primary-color) | |
| table-row-background-color: var(--card-background-color) | |
| # table-row-alternative-background-color: var(--sidebar-text_-_background) | |
| ########################################################################################## | |
| Matrix: | |
| # 'harlequin': { | |
| # '50': '#ebffe4', | |
| # '100': '#d3ffc4', | |
| # '200': '#a9ff90', | |
| # '300': '#72ff50', | |
| # '400': '#39ff14', | |
| # '500': '#1ee600', | |
| # '600': '#14b800', | |
| # '700': '#0f8b00', | |
| # '800': '#116d07', | |
| # '900': '#115c0b', | |
| # '950': '#023400', | |
| # } | |
| ha-color-on-primary-loud: '#023400' #text accent | |
| # Brand color palette | |
| # ha-color-primary-05: '#033014' | |
| # ha-color-primary-10: '#11562a' | |
| # ha-color-primary-20: '#126930' | |
| ha-color-primary-30: '#14b800' # background accent hover | |
| ha-color-primary-40: '#39FF14' # background accent, text filled, text plain | |
| ha-color-primary-50: '#1acd56' # text outlined | |
| # ha-color-primary-60: '#42e679' | |
| # ha-color-primary-70: '#81f4a7' | |
| ha-color-primary-80: '#115c0b' # background hover filled | |
| ha-color-primary-90: '#0f8b00' # background filled | |
| ha-color-primary-95: '#0f8b00' # background outlined hover, plain hover | |
| <<: *generic | |
| background-color-on: var(--primary-color) | |
| background-color-off: var(--card-background-color) | |
| background-opacity-on: rgba(var(--primary-rgb),0.8) | |
| background-opacity-off: rgba(var(--card-background),0.8) | |
| text-color-on: var(--card-background-color) | |
| text-color-off: var(--primary-color) | |
| icon-color-off: var(--primary-color) | |
| icon-color-on: var(--accent-color) | |
| active-color: var(--accent-color) | |
| power-color: '#39ff14' | |
| ########################################################################################## | |
| accent-color: hsl(var(--base-hue),90%,50%) #var(--primary-text-color) | |
| lovelace-background: center/cover no-repeat url('/local/wallpapers/matrix.png') fixed | |
| # MyVariables | |
| base-hue: 120 #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red | |
| base-sat: 46% #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation | |
| # MyVar | |
| huesat: 'var(--base-hue), var(--base-sat),' | |
| # Primary Color | |
| primary-color: hsl(var(--huesat) 50%) | |
| primary-rgb: 57, 255, 20 | |
| # dark-primary-color: '#232820' | |
| # Backgrounds | |
| primary-background-color: hsl(var(--huesat) 16%) | |
| secondary-background-color: hsl(var(--huesat) 16%) | |
| sidebar-background-color: hsl(var(--huesat) 12%) | |
| # sidebar-icon-color: var(--primary-color) | |
| sidebar-text-color: var(--primary-color) | |
| sidebar-selected-icon-color: var(--accent-color) | |
| sidebar-selected-text-color: var(--accent-color) | |
| card-background-color: hsl(var(--huesat) 12%) | |
| card-background: 2, 52, 0 #45,57,45 | |
| table-row-background-color: hsl(var(--huesat) 12%) | |
| table-row-alternative-background-color: hsl(var(--huesat) 10%) | |
| # Divider | |
| divider-color: hsla(0,0%,0%,0) | |
| dark-divider-opacity: 0 | |
| light-divider-opacity: 0 | |
| # Text colors | |
| primary-text-color: hsl(var(--huesat) 60%) | |
| text-primary-color: hsl(var(--huesat) 80%) | |
| secondary-text-color: hsl(var(--huesat) 60%) | |
| disabled-text-color: hsl(var(--huesat) 70%) | |
| ha-card-header-color: hsl(var(--base-hue),90%,50%) | |
| # Shadows | |
| shadow-elevation-2dp_-_box-shadow: inset 0px 0px 0px 4px hsl(var(--huesat) 18%) | |
| shadow-elevation-16dp_-_box-shadow: inset 0px 0px 0px 4px hsl(var(--huesat) 28%) | |
| # Switches | |
| switch-checked-color: hsl(var(--base-hue),90%,50%) | |
| switch-unchecked-color: hsl(var(--huesat) 25%) | |
| ########################################################################################## | |
| Kerst: | |
| # color palette | |
| # ha-color-primary-05: '#330202' # Deep crimson black, like midnight mulled wine | |
| # ha-color-primary-10: '#590505' # Dark holly berry red, moody and traditional | |
| # ha-color-primary-20: '#a01212' # Classic Santa suit red, bold and strong | |
| # ha-color-primary-30: '#b71515' # Festive centerpiece red, vivid and glowing | |
| # ha-color-primary-40: '#cc2e2e' # Bright ornament red, eye-catching and warm | |
| # ha-color-primary-50: '#dd4747' # Cheerful candy apple red, rich and inviting | |
| # ha-color-primary-60: '#e76767' # Lively poinsettia red, soft yet saturated | |
| # ha-color-primary-70: '#f08f8f' # Blush pink with warmth, like ribbon or gift wrap | |
| # ha-color-primary-80: '#f8c4c4' # Gentle peppermint tint, sweet and cozy | |
| # ha-color-primary-90: '#fbecec' # Soft snow-kissed pink, delicate and light | |
| # ha-color-primary-95: '#fdf7f7' # Icy rose white, festive with a whisper of warmth | |
| ha-color-on-primary-loud: '#effef3' #text accent | |
| # Brand color palette | |
| # ha-color-primary-05: '#033014' | |
| # ha-color-primary-10: '#11562a' | |
| # ha-color-primary-20: '#126930' | |
| ha-color-primary-30: 'green' # background accent hover | |
| ha-color-primary-40: '#cc2e2e' # background accent, text filled, text plain | |
| ha-color-primary-50: '#a01212' # text outlined | |
| # ha-color-primary-60: '#42e679' | |
| # ha-color-primary-70: '#81f4a7' | |
| ha-color-primary-80: '#b8facd' # background hover filled | |
| ha-color-primary-90: '#dafee5' # background filled | |
| ha-color-primary-95: '#fdf7f7' # background outlined hover, plain hover | |
| card-mod-theme: theme-mods | |
| tab-active-color: ivory | |
| app-header-text-color: white | |
| app-header-background-color: green | |
| # app-header-edit-background-color: var(--token-color-background-card) | |
| table-row-background-color: ivory # Table row | |
| table-row-alternative-background-color: skyblue # Table row alternative | |
| background-color-off: var(--primary-color) | |
| background-color-on: var(--card-background-color) | |
| background-opacity-on: rgba(var(--primary-rgb),0.8) | |
| background-opacity-off: rgba(var(--card-background),0.8) | |
| text-color-off: var(--card-background-color) | |
| text-color-on: saddlebrown #var(--primary-color) ook card header color..... | |
| state-icon-color: green | |
| icon-color-off: var(--accent-color) | |
| icon-color-on: var(--primary-color) | |
| ha-card-border-radius: 25px | |
| ha-card-border-width: 0px | |
| ha-card-box-shadow: 0px 0px 0px 2px green # , 0px 0px 1px 0px var(--primary-color, 1) | |
| restriction-lock-row-margin-left: calc(100% - 25px) #95% | |
| <<: *select_quick | |
| ########################################################################################## | |
| lovelace-background: radial-gradient(var(--primary-color),var(--accent-color)) | |
| #center/cover no-repeat url('/local/wallpapers/snow.mp4') fixed | |
| ha-card-header-color: saddlebrown | |
| card-background-color: ivory | |
| card-background: 255,255,240 | |
| alert-color: var(--primary-color) | |
| accent-color: green | |
| active-color: var(--accent-color) | |
| dark-primary-color: saddlebrown | |
| disabled-text-color: green | |
| divider-color: green | |
| sidebar-icon-color: saddlebrown | |
| sidebar-background-color: var(--card-background-color) | |
| sidebar-text: green | |
| sidebar-text-color: var(--primary-color) | |
| primary-background-color: silver #Necessary for sidebar slideout background | |
| primary-color: '#B71515' | |
| primary-rgb: 183,21,21 | |
| primary-text-color: green | |
| secondary-background-color: lightgreen | |
| secondary-text-color: saddlebrown | |
| # text-primary-color: ivory | |
| power-color: red | |
| ########################################################################################## | |
| #experimental | |
| Trippy: | |
| ha-color-primary-05: '#1a0021' # Deep Purple | |
| ha-color-primary-10: '#400080' # Electric Indigo | |
| ha-color-primary-20: '#ff00ff' # Hot Magenta | |
| ha-color-primary-30: '#ff0080' # Neon Pink | |
| ha-color-primary-40: '#ff6600' # Bright Orange | |
| ha-color-primary-50: '#ffea00' # Neon Yellow | |
| ha-color-primary-60: '#b4ff00' # Lime Green | |
| ha-color-primary-70: '#00ff99' # Aqua Green | |
| ha-color-primary-80: '#00ccff' # Electric Cyan | |
| ha-color-primary-90: '#0080ff' # Bright Blue | |
| ha-color-primary-95: '#6600ff' # Vivid Violet | |
| # ha-color-primary-05: '#FFF600' # Lemon Yellow | |
| # ha-color-primary-10: '#EBEBFF' # Indigo White | |
| # ha-color-primary-20: '#FF6BB5' # Hot Pink | |
| # ha-color-primary-30: '#FF5D38' # Psychedelic Orange | |
| # ha-color-primary-40: '#D5306C' # Muted Crimson | |
| # ha-color-primary-50: '#35A79B' # Turquoise Green | |
| # ha-color-primary-60: '#8A2CE2' # Psychedelic Purple | |
| # ha-color-primary-70: '#6A5BCD' # Crimson Blue | |
| # ha-color-primary-80: '#1F1F9E' # Electric Blue | |
| # ha-color-primary-90: '#4B0D82' # Deep Violet | |
| # ha-color-primary-95: '#690571' # Clairvoyant Purple | |
| # # Accent (full rainbow) | |
| # ha-color-accent-05: '#1a0021' | |
| # ha-color-accent-10: '#400080' | |
| # ha-color-accent-20: '#ff00ff' | |
| # ha-color-accent-30: '#ff0080' | |
| # ha-color-accent-40: '#ff6600' | |
| # ha-color-accent-50: '#ffea00' | |
| # ha-color-accent-60: '#b4ff00' | |
| # ha-color-accent-70: '#00ff99' | |
| # ha-color-accent-80: '#00ccff' | |
| # ha-color-accent-90: '#0080ff' | |
| # ha-color-accent-95: '#6600ff' | |
| # Backgrounds & text | |
| lovelace-background: 'radial-gradient(circle, | |
| #ff00ff 0%, | |
| #ff6600 15%, | |
| #ffea00 30%, | |
| #00ff99 45%, | |
| #00ccff 60%, | |
| #6600ff 75%, | |
| #ff00ff 90%)' | |
| # | |
| # extra-css: | | |
| # @keyframes psychedelicBackground { | |
| # 0% { background-position: 0% 50%; } | |
| # 50% { background-position: 100% 50%; } | |
| # 100% { background-position: 0% 50%; } | |
| # } | |
| primary-background-color: '#000000' # Pure black background | |
| secondary-background-color: '#0a0a0a' # Slightly lighter black | |
| card-background-color: 'radial-gradient(circle, | |
| #ff00ff 0%, | |
| #6600ff 15%, | |
| #00ccff 30%, | |
| #00ff99 45%, | |
| #ffea00 60%, | |
| #ff6600 75%, | |
| #ff00ff 90%)' #'#111111' # Dark grey for cards | |
| primary-color: '#9c00d9' | |
| primary-text-color: '#b4ff00' | |
| # text-accent-color: '#ff00ff' # Magenta text accents | |
| power-color: '#400080' |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment