Last active
May 6, 2025 12:09
-
-
Save Mariusthvdb/d20160f987aecc51833a9282f7d6cfa0 to your computer and use it in GitHub Desktop.
Themes
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 dark_mode functionality, which doesnt | |
| # fit my needs. | |
| # config: | |
| # | |
| # frontend: | |
| # themes: !include_dir_merge_named /config/frontend_themes | |
| # | |
| # @mariusthvdb | |
| ########################################################################################## | |
| # background: color-mix(in srgb, var(--sidebar-selected-icon-color) 50%, transparent) | |
| Dark blue: | |
| <<: &generic | |
| card-mod-theme: theme-mods | |
| # swiper-pagination-color: white | |
| # swiper-theme-color: white | |
| # swiper-navigation-color: white | |
| # swiper-navigation-size: 40px | |
| # swiper-preloader-color: var(--active-color) | |
| # Tile features generic setting | |
| # feature-border-radius: var(--ha-card-border-radius) | |
| # control-slider-border-radius: 0 | |
| # control-button-border-radius: 0 | |
| # control-select-border-radius: 0 | |
| # control-select-button-border-radius: 0 | |
| # control-select-menu-border-radius: 0 | |
| # 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 | |
| # Legacy Badges loaded as custom | |
| # https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/badges/hui-state-label-badge.ts | |
| # 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 | |
| # new badge settings | |
| ha-badge-border-radius: var(--ha-card-border-radius) | |
| ha-badge-size: 48px | |
| # Generic HA settings | |
| tab-active-color: var(--active-color) | |
| hover-color: var(--lovelace-background) | |
| # 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-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 | |
| ha-color: '#03a9f4' # rgb(3, 169, 244) | |
| ha-accent-color: '#ff9800' | |
| ha-card-border-width: 0 | |
| # ha-card-border-color: transparent # test this is even necessary with width = 0? | |
| ha-card-border-radius: 0 | |
| 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) | |
| # dialog-content-padding: 8px 16px 16px 16px | |
| ha-card-box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19) | |
| # https://github.com/iantrich/restriction-card?tab=readme-ov-file#theme-variables | |
| restriction-lock-row-margin-left: calc(100% - 25px) #95% | |
| restriction-regular-lock-color: var(--alert-color) | |
| restriction-success-lock-color: var(--ok-color) | |
| restriction-lock-opacity: 0.8 | |
| restriction-lock-icon-size: 20px | |
| ok-color: forestgreen | |
| alert-color: crimson | |
| error-color: crimson #white taken out because it overrides the (error) colors in the integration panel | |
| no-power-color: dimgray #'#636B75' | |
| # https://github.com/home-assistant/frontend/blob/master/src/resources/ha-style.ts | |
| # not used at all??? | |
| # badge-person-home-color: var(--ok-color) | |
| # badge-person-not-home-color: var(--no-power-color) | |
| # badge-person-zone-color: mediumslateblue | |
| # energy-gas-color: black | |
| # energy-water-color: red | |
| # energy-solar-color: green | |
| # energy-grid-return-color: pink | |
| # energy-grid-consumption-color: white | |
| # 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: green #ok #primary-text-color | |
| # sidebar-selected-background-color: orange # ?? | |
| # 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 color */ | |
| # 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) | |
| sidebar-icon-color: var(--primary-color) | |
| state-alarm_control_panel-armed_away-color: var(--red-color) | |
| state-alarm_control_panel-armed_custom_bypass-color: var(--red-color) | |
| state-alarm_control_panel-armed_home-color: var(--red-color) | |
| state-alarm_control_panel-armed_night-color: var(--red-color) | |
| state-alarm_control_panel-armed_vacation-color: var(--red-color) | |
| state-alarm_control_panel-arming-color: var(--orange-color) | |
| state-alarm_control_panel-disarmed-color: var(--ok-color) | |
| state-alarm_control_panel-disarming-color: var(--orange-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(--ok-color) | |
| state-automation-on-color: var(--active-color) | |
| state-binary_sensor-battery-off-color: var(--ok-color) | |
| state-binary_sensor-battery-on-color: var(--alert-color) | |
| state-binary_sensor-door-off-color: var(--ok-color) | |
| state-binary_sensor-door-on-color: var(--alert-color) | |
| state-binary_sensor-window-off-color: var(--ok-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(--ok-color) | |
| state-binary_sensor-garage_door-off-color: var(--ok-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(--ok-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(--ok-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(--ok-color) | |
| state-binary_sensor-smoke-off-color: var(--ok-color) | |
| state-binary_sensor-carbon_monoxide-off-color: var(--ok-color) | |
| state-binary_sensor-update-on-color: var(--alert-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: var(--primary-color) #midnightblue | |
| state-cover-closing-color: skyblue | |
| state-cover-open-color: var(--active-color) | |
| state-cover-opening-color: orange | |
| state-cover-unknown-color: slategray | |
| # state-cover-active-color: var(--purple-color) | |
| state-device_tracker-home-color: var(--ok-color) | |
| state-device_tracker-not-home-color: var(--no-power-color) | |
| # state-device_tracker-active-color: var(--blue-color) | |
| state-fan-on-color: skyblue | |
| state-fan-off-color: var(--no-power-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(--ok-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: purple | |
| 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) | |
| # paper-slider-knob-color: var(--accent-color) | |
| # paper-slider-knob-start-color: var(--accent-color) | |
| # paper-slider-pin-color: var(--accent-color) | |
| # paper-slider-active-color: var(--accent-color) | |
| # paper-slider-container-color: linear-gradient(var(--primary-color), var(--secondary-background-color)) no-repeat | |
| # paper-slider-secondary-color: var(--secondary-background-color) | |
| # paper-slider-disabled-active-color: var(--disabled-text-color) | |
| # paper-slider-disabled-secondary-color: var(--disabled-text-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-ink-color: var(--primary-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#L559 | |
| # https://github.com/home-assistant/frontend/blob/dev/src/resources/styles-data.ts#L54 | |
| 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) | |
| # 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-inversed: radial-gradient(var(--card-background-color),var(--primary-color)) | |
| # app-header-background: radial-gradient(var(--primary-color),var(--card-background-color)) #werkt niet | |
| background-color-on: var(--primary-color) | |
| background-color-off: var(--card-background-color) | |
| # background-opacity-on: rgba(var(--primary),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(--card-background-color) | |
| icon-color-off: var(--primary-color) | |
| codemirror-keyword: red #if else endif | |
| codemirror-operator: yellow # > < + * | | |
| codemirror-property: green # is_state( , ) | |
| codemirror-variable: '#696969' | |
| # codemirror-qualifier: | |
| codemirror-def: orange | |
| codemirror-number: lightblue # {% %} | |
| codemirror-comment: slategray | |
| # codemirror-meta: | |
| # codemirror-atom: | |
| codemirror-string: sandybrown | |
| # 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: 22,117,201 | |
| dark-primary-color: '#245188' # Hyperlinks | |
| light-primary-color: var(--accent-color) # Horizontal line in about | |
| # Text colors | |
| primary-text-color: 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 | |
| label-badge-border-color: green # Label badge border, just a reference value | |
| # Background colors | |
| card-background-color: '#434954' # Card background colour | |
| card-background: 67,73,84 | |
| primary-background-color: '#2E3545' # Settings background | |
| secondary-background-color: '#2E3545' # 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 | |
| data-table-background-color: '#353840' # Make text standout in dark themes | |
| # # Paper card | |
| ha-card-header-color: var(--accent-color) # Card header text colour | |
| # # Labels | |
| # label-badge-red: var(--accent-color) # References the brand colour label badge border | |
| # label-badge-text-color: var(--primary-text-color) # Now same as label badge border but that's a matter of taste | |
| # label-badge-background-color: '#2E333A' # Same, but can also be set to transparent here | |
| # Google colors | |
| google-red-500: '#E45E65' | |
| google-green-500: '#39E949' | |
| # Shadows | |
| # shadow-elevation-2dp_-_box-shadow: inset 0px 0px 0px 1px #3A526B | |
| # shadow-elevation-16dp_-_box-shadow: inset 0px 0px 0px 1px #3A526B | |
| # # Text Adjustments | |
| # paper-font-headline_-_letter-spacing: -0.4px | |
| # paper-font-headline_-_font-weight: 400 | |
| # paper-font-body1_-_font-weight: 400 | |
| ########################################################################################## | |
| # https://community.home-assistant.io/t/midnight-theme/28598 | |
| Midnight: | |
| <<: *generic | |
| <<: *dark-theme | |
| ########################################################################################## | |
| # Main colors | |
| active-color: gold | |
| power-color: orange | |
| primary-color: '#5294E2' # Header | |
| primary: 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 | |
| label-badge-border-color: green # Label badge border, just a reference value | |
| # 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 | |
| # Nav Menu | |
| # paper-listbox-color: var(--primary-color) # Navigation menu selection hoover | |
| # | |
| # paper-listbox-background: '#2E333A' # Navigation menu background | |
| paper-grey-50: var(--primary-text-color) | |
| paper-grey-200: '#414A59' # Navigation menu selection | |
| # Paper card | |
| ha-card-header-color: var(--accent-color) # Card header text colour | |
| # Labels | |
| # label-badge-red: var(--accent-color) # References the brand colour label badge border | |
| # label-badge-text-color: var(--primary-text-color) # Now same as label badge border but that's a matter of taste | |
| # label-badge-background-color: '#2E333A' # Same, but can also be set to transparent here | |
| # Google colors | |
| google-red-500: '#E45E65' | |
| google-green-500: '#39E949' | |
| ########################################################################################## | |
| # https://community.home-assistant.io/t/share-your-themes/22018/38 | |
| Pmx default: | |
| <<: *generic | |
| <<: *dark-theme | |
| ########################################################################################## | |
| # Primary Color | |
| active-color: gold | |
| power-color: orange | |
| primary-color: 'hsl(192, 96%, 48%)' | |
| primary: 5,193,240 | |
| # Backgrounds | |
| card-background-color: var(--primary-background-color) | |
| card-background: 250,250,250 | |
| primary-background-color: hsl(0,0%,98%) | |
| secondary-background-color: hsl(0,0%,95%)] | |
| # paper-listbox-background-color: var(--primary-background-color) | |
| # paper-dialog-background-color: var(--primary-background-color) | |
| table-row-background-color: hsl(0,0%,96%) | |
| table-row-alternative-background-color: var(--primary-background-color) | |
| # Divider | |
| divider-color: hsla(0,0%,0%,0) | |
| dark-divider-opacity: '0' | |
| light-divider-opacity: '0' | |
| # Text colors | |
| primary-text-color: hsl(0 0%,50%) | |
| text-primary-color: hsl(0,0%,60%) | |
| secondary-text-color: hsl(0,0%,60%) | |
| disabled-text-color: hsl(0,0%,70%) | |
| label-badge-border-color: hsl(0,0%,100%) | |
| sidebar-text_-_color: hsl(0,0%,90%) | |
| sidebar-text-color: hsl(0,0%,90%) | |
| # Text Adjustments | |
| paper-font-headline_-_letter-spacing: -0.5px | |
| paper-font-headline_-_font-weight: 500 | |
| paper-font-body1_-_font-weight: 500 | |
| # Nav Menu | |
| paper-listbox-color: hsl(0,0%,85%) | |
| paper-grey-50: hsl(0,0%,85%) | |
| paper-grey-200: hsl(0,0%,95%) | |
| # Paper card | |
| ha-card-header-color: hsla(0,0%,0%,0.5) | |
| paper-item-icon-color: hsl(0,0%,80%) | |
| paper-item-icon-active-color: var(--primary-color) #var(--paper-item-icon-color) | |
| paper-item-icon_-_color: var(--paper-item-icon-color) | |
| paper-item-selected_-_background-color: hsla(0,0%,0%,0.2) | |
| paper-tabs-selection-bar-color: hsla(0,0%,0%,0.2) | |
| ha-slider-background-color: var(--primary-background-color) | |
| # paper-slider-bar-color: var(--primary-background-color) | |
| # Labels | |
| # label-badge-red: var(--primary-color) | |
| # label-badge-background-color: var(--card-background-color) | |
| # label-badge-text-color: hsl(0,0%,60%) | |
| # Shadows | |
| shadow-elevation-2dp_-_box-shadow: inset 0px 0px 0px 3px hsl(0,0%,88%) | |
| shadow-elevation-4dp_-_box-shadow: var(--shadow-elevation-2dp_-_box-shadow) | |
| shadow-elevation-6dp_-_box-shadow: var(--shadow-elevation-2dp_-_box-shadow) | |
| shadow-elevation-8dp_-_box-shadow: var(--shadow-elevation-2dp_-_box-shadow) | |
| shadow-elevation-10dp_-_box-shadow: var(--shadow-elevation-2dp_-_box-shadow) | |
| shadow-elevation-12dp_-_box-shadow: var(--shadow-elevation-2dp_-_box-shadow) | |
| shadow-elevation-14dp_-_box-shadow: var(--shadow-elevation-2dp_-_box-shadow) | |
| shadow-elevation-16dp_-_box-shadow: 0px 0px 0px 4px var(--primary-color) | |
| paper-dialog-color: hsl(0,0%,50%) | |
| ########################################################################################## | |
| Teal: | |
| <<: *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: 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) | |
| # paper-item-icon-color: '#1DE9B6' # Icon colour | |
| primary-text-color: '#FFFFFF' # Primary text colour | |
| secondary-text-color: rgba(255,255,255,0.7) # Secondary text colour | |
| 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 | |
| # Nav Menu # | |
| # paper-listbox-background-color: '#424242' # Listbox background colour | |
| paper-listbox-color: '#FFFFFF' # Listbox text colour | |
| paper-grey-200: '#616161' # Listbox selected item background colour | |
| ########################################################################################## | |
| Dark orange: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: gold | |
| power-color: black | |
| ########################################################################################## | |
| accent-color: var(--primary-color) | |
| primary-color: darkorange | |
| primary: 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(--text-primary-color) | |
| secondary-background-color: var(--primary-background-color) | |
| primary-text-color: var(--text-primary-color) | |
| secondary-text-color: var(--primary-color) | |
| # sidebar-icon-color: '#62717b' | |
| sidebar-background-color: '#202020' | |
| sidebar-text-color: '#62717b' | |
| # paper-listbox-background-color: '#202020' | |
| paper-toggle-button-checked-ink-color: var(--dark-primary-color) | |
| paper-toggle-button-checked-button-color: var(--dark-primary-color) | |
| paper-toggle-button-checked-bar-color: var(--dark-primary-color) | |
| paper-grey-50: var(--sidebar-text_-_background) | |
| paper-grey-200: var(--primary-background-color) | |
| # label-badge-background-color: var(--icon-color) | |
| # label-badge-text-color: var(--text-primary-color) | |
| # label-badge-red: var(--primary-color) | |
| label-badge-blue: var(--light-primary-color) | |
| label-badge-green: var(--dark-primary-color) | |
| label-badge-yellow: var(--text-primary-color) | |
| label-badge-grey: var(--paper-grey-500) | |
| table-row-background-color: var(--card-background-color) | |
| table-row-alternative-background-color: var(--icon-color) | |
| ########################################################################################## | |
| Dark cyan: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: gold | |
| ########################################################################################## | |
| accent-color: var(--primary-color) | |
| # Main colors that can be changed | |
| primary-color: '#00bcd4' | |
| primary: 0,188,212 | |
| dark-primary-color: '#3a8192' | |
| disabled-text-color: '#545454' | |
| divider-color: 'rgba(255, 255, 255, 0.12)' | |
| card-background-color: '#4e4e4e' | |
| card-background: 78,78,78 | |
| paper-grey-200: '#191919' | |
| # paper-item-icon-color: '#d3d3d3' | |
| paper-listbox-background-color: '#202020' | |
| paper-listbox-color: '#FFFFFF' | |
| primary-background-color: '#303030' | |
| primary-text-color: '#cfcfcf' | |
| secondary-background-color: '#2b2b2b' | |
| secondary-text-color: '#04a7bc' | |
| # Colors based on variables, see above | |
| # label-badge-background-color: var(--secondary-background-color) | |
| # label-badge-text-color: var(--text-primary-color) | |
| ha-card-header-color: var(--paper-item-icon-color) | |
| paper-grey-50: var(--primary-text-color) | |
| ########################################################################################## | |
| Minimal: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: gold | |
| ########################################################################################## | |
| accent-color: var(--primary-color) | |
| dark-primary-color: '#685f64' #'#192231' | |
| primary-color: '#98878f' | |
| primary: 152,135,143 | |
| ha-card-header-color: var(--primary-color) | |
| card-background-color: '#fff' | |
| card-background: 255,255,255 | |
| light-primary-color: '#98878f' | |
| paper-toggle-button-checked-ink-color: '#494e6b' | |
| paper-toggle-button-checked-button-color: '#494e6b' | |
| paper-toggle-button-checked-bar-color: '#494e6b' | |
| ########################################################################################## | |
| Stormy hues: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: gold | |
| ########################################################################################## | |
| accent-color: var(--primary-color) | |
| dark-primary-color: '#685f64' #'#192231' | |
| primary-color: '#98878f' | |
| primary: 152,135,143 | |
| card-background-color: '#fff' | |
| card-background: 255,255,255 | |
| light-primary-color: '#98878f' | |
| paper-toggle-button-checked-ink-color: '#494e6b' | |
| paper-toggle-button-checked-button-color: '#494e6b' | |
| paper-toggle-button-checked-bar-color: '#494e6b' | |
| ########################################################################################## | |
| Vintage: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: gold | |
| ########################################################################################## | |
| accent-color: var(--primary-text-color) | |
| dark-primary-color: '#373f27' | |
| primary-color: '#636b46' | |
| primary: 99,107,70 | |
| card-background-color: '#fff' #? | |
| card-background: 255,255,255 | |
| light-primary-color: '#e9e7da' | |
| paper-toggle-button-checked-ink-color: '#cda34f' | |
| paper-toggle-button-checked-button-color: '#cda34f' | |
| paper-toggle-button-checked-bar-color: '#cda34f' | |
| ########################################################################################## | |
| Done: | |
| <<: *generic | |
| <<: &light-theme | |
| lovelace-background: radial-gradient(var(--sidebar-background-color),var(--primary-color)) | |
| background-color-on: var(--card-background-color) | |
| background-color-off: var(--primary-color) | |
| background-opacity-on: rgba(var(--card-background),0.8) | |
| background-opacity-off: rgba(var(--primary),0.8) | |
| text-color-on: var(--primary-color) | |
| text-color-off: var(--card-background-color) | |
| icon-color-on: var(--accent-color) | |
| icon-color-off: var(--card-background-color) | |
| power-color: var(--active-color) | |
| active-color: gold | |
| ########################################################################################## | |
| accent-color: var(--dark-primary-color) | |
| primary-color: '#C09F80' | |
| primary: 192,159,128 | |
| card-background-color: whitesmoke | |
| card-background: 245,245,245 | |
| ha-card-header-color: var(--primary-color) | |
| ########################################################################################## | |
| ## 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),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: 3,168,243 | |
| card-background: 255,255,255 | |
| Clear: | |
| <<: *generic | |
| <<: *light-theme | |
| active-color: gold | |
| accent-color: var(--primary-color) | |
| power-color: darkorange | |
| # state-climate-heat-color: '#800080' | |
| # state-climate-idle-color: '#000000' | |
| ########################################################################################## | |
| # 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: var(--primary-color) # Grey text | |
| text-light-color: '#BAC0C6' # Light grey text | |
| primary-color: '#636B75' #'var(--text-color)' # Background | |
| primary: 99,107,117 | |
| dark-primary-color: '#464b51' #var(--text-color) | |
| text-primary-color: '#FFF' # Text | |
| # secondary-text-color: whitesmoke | |
| sidebar-background-color: whitesmoke | |
| # ????????? nodig ?? | |
| ha-card-header-color: var(--text-color) # Title in settings | |
| primary-background-color: gainsboro # Background behind cards in states | |
| secondary-background-color: silver # Background behind cards and alternting in dev tools state | |
| card-background-color: whitesmoke #var(--background-card-color, 0.6) # Card Background | |
| card-background: 245,245,245 | |
| ########################################################################################## | |
| Dark red: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: gold | |
| ########################################################################################## | |
| 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 | |
| paper-grey-200: '#191919' | |
| primary-background-color: '#303030' | |
| primary-color: darkred #'#d32f2f' | |
| primary: 139, 0, 0 #211,47,47 | |
| primary-text-color: '#cfcfcf' | |
| secondary-background-color: '#131313' | |
| # Colors based on variables, see above | |
| ha-card-header-color: var(--paper-item-icon-color) | |
| paper-grey-50: var(--primary-text-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: | |
| <<: *generic | |
| background-color-on: var(--primary-color) | |
| background-color-off: var(--card-background-color) | |
| background-opacity-on: rgba(var(--primary),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) | |
| ########################################################################################## | |
| 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: 16% #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: 46,58,44 | |
| # 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) | |
| paper-listbox-background-color: var(--primary-color) | |
| card-background-color: hsl(var(--huesat) 12%) | |
| card-background: 45,57,45 | |
| paper-dialog-background-color: var(--card-background-color) | |
| 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) 60%) | |
| secondary-text-color: hsl(var(--huesat) 60%) | |
| disabled-text-color: hsl(var(--huesat) 70%) | |
| ha-card-header-color: hsl(var(--base-hue),90%,50%) | |
| # Text Adjustments | |
| paper-font-headline_-_letter-spacing: -0.5px | |
| paper-font-headline_-_font-weight: 500 | |
| paper-font-body1_-_font-weight: 500 | |
| # Nav Menu | |
| paper-listbox-color: hsl(var(--huesat) 50%) | |
| paper-grey-50: hsl(var(--huesat) 50%) | |
| paper-grey-200: hsla(var(--huesat) 26%) | |
| # Labels | |
| # label-badge-red: hsla(0,0%,0%,0) | |
| # label-badge-border-color: var(--label-badge-red) | |
| # label-badge-background-color: var(--card-background-color) | |
| # label-badge-text-color: var(--primary-text-color) | |
| # 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%) | |
| paper-toggle-button-checked-bar-color: hsl(var(--huesat) 25%) | |
| switch-unchecked-color: hsl(var(--huesat) 25%) | |
| paper-toggle-button-unchecked-bar-color: hsl(var(--huesat) 5%) | |
| paper-dialog-color: hsl(var(--base-hue),20%,80%) | |
| ########################################################################################## | |
| Kerst: | |
| 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),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: center/cover no-repeat url('/local/wallpapers/snow.mp4') fixed | |
| ha-card-header-color: saddlebrown | |
| card-background-color: ivory | |
| card-background: 255,255,240 | |
| # Navbar | |
| accent-color: green | |
| active-color: var(--accent-color) | |
| dark-primary-color: saddlebrown | |
| disabled-text-color: green | |
| divider-color: green | |
| paper-grey-200: green | |
| sidebar-icon-color: saddlebrown | |
| sidebar-background-color: ivory | |
| sidebar-text: green | |
| paper-toggle-button-checked-bar-color: gold | |
| paper-toggle-button-checked-button-color: saddlebrown | |
| primary-background-color: silver #Necessary for sidebar slideout background | |
| primary-color: '#B71515' | |
| primary: 183,21,21 | |
| primary-text-color: green | |
| secondary-background-color: lightgreen | |
| secondary-text-color: saddlebrown | |
| text-primary-color: ivory |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
updated with several card-mod-theme settings, and testing the new themed section headers variables in HA 2024.10