Last active
January 8, 2024 14:06
-
-
Save Mariusthvdb/d20160f987aecc51833a9282f7d6cfa0 to your computer and use it in GitHub Desktop.
Themes
This file contains 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 | |
| ########################################################################################## | |
| 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: gold | |
| tab-active-color: gold | |
| ha-color: '#18BCF2' | |
| ha-card-border-radius: 0px | |
| ha-card-border-width: 0px | |
| ha-dialog-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) | |
| restriction-lock-row-margin-left: calc(100% - 25px) #95% | |
| restriction-regular-lock-color: red | |
| restriction-lock-opacity: 0.8 | |
| alert-color: crimson | |
| error-color: crimson #white taken out because it overrides the (error) colors in the integration panel | |
| no-power-color: '#636B75' #dimgray | |
| # https://github.com/home-assistant/frontend/blob/master/src/resources/ha-style.ts | |
| badge-person-home-color: green | |
| badge-person-not-home-color: '#636B75' | |
| badge-person-zone-color: mediumslateblue | |
| state-alert-on-color: var(--alert-color) | |
| state-automation-on-color: gold | |
| state-binary_sensor-door-off-color: var(--primary-color) | |
| state-binary_sensor-door-on-color: var(--alert-color) | |
| state-binary_sensor-safety-on-color: var(--alert-color) | |
| state-binary_sensor-garage-off-color: var(--primary-color) | |
| state-binary_sensor-garage-on-color: var(--alert-color) | |
| state-binary_sensor-motion-on-color: var(--alert-color) | |
| state-binary_sensor-on-color: gold | |
| state-binary_sensor-opening-off-color: green | |
| state-binary_sensor-opening-on-color: var(--alert-color) | |
| state-binary_sensor-problem-on-color: var(--alert-color) | |
| state-binary_sensor-update-on-color: red #'#f44336' | |
| state-binary_sensor-active-on-color: red #'#f44336' | |
| state-cover-closed-color: midnightblue | |
| state-cover-closing-color: blue | |
| state-cover-open-color: gold | |
| state-cover-opening-color: orange | |
| state-cover-unknown-color: slategrey | |
| state-device_tracker-home-color: green | |
| state-device_tracker-not-home-color: '#636B75' #grey dimgray # | |
| state-fan-on-color: gold | |
| state-group-active-color: gold | |
| state-input_boolean-on-color: gold | |
| state-person-home-color: green | |
| state-person-not-home-color: '#636B75' | |
| state-person-zone-color: mediumslateblue | |
| state-script-on-color: red | |
| state-switch-on-color: gold | |
| state-update-on-color: red #'#f44336' | |
| # # 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 | |
| mush-rgb-disabled: 111, 111, 111 | |
| rgb-disabled: 111, 111, 111 | |
| power-color: gold | |
| app-header-text-color: var(--primary-text-color) | |
| # modes: | |
| # dark: | |
| # disabled-text-color: grey | |
| # 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)) | |
| # app-header-background-color: 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 | |
| # codemirror-variable-2: gold | |
| # codemirror-string-2: gold | |
| # 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: '#F9C536' | |
| accent-color: '#1A78C2' # Accent color | |
| # 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: grey # 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 | |
| # # Nav Menu | |
| #sidebar-menu-button-background-color: var(--primary-color) | |
| sidebar-icon-color: var(--primary-color) | |
| # sidebar-text-color: '#62717b' | |
| # sidebar-background-color: var(--paper-listbox-background-color) | |
| # paper-listbox-color: var(--primary-color) # Navigation menu selection hoover | |
| # paper-listbox-background-color: '#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 | |
| # paper-dialog-background-color: '#434954' # Card dialog background colour | |
| # paper-item-icon-color: var(--primary-color) # Icon color | |
| # paper-item-icon-active-color: gold #'#c96a16' # Icon color active | |
| # paper-item-icon_-_color: green | |
| # paper-item-selected_-_background-color: '#434954' # Popup item select | |
| # paper-tabs-selection-bar-color: green | |
| # # 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 | |
| # # Switches | |
| # paper-toggle-button-checked-button-color: var(--accent-color) | |
| # paper-toggle-button-checked-bar-color: var(--accent-color) | |
| # paper-toggle-button-checked-ink-color: var(--accent-color) | |
| # paper-toggle-button-unchecked-button-color: var(--disabled-text-color) | |
| # paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) | |
| # paper-toggle-button-unchecked-ink-color: var(--disabled-text-color) | |
| # 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 | |
| ########################################################################################## | |
| active-color: var(--paper-item-icon-active-color) | |
| # Main colors | |
| 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: grey # 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-color: '#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 | |
| paper-dialog-background-color: '#434954' # Card dialog background colour | |
| paper-item-icon-color: var(--primary-text-color) # Icon color | |
| paper-item-icon-active-color: var(--primary-color) #'#F9C536' # Icon color active | |
| paper-item-icon_-_color: green | |
| paper-item-selected_-_background-color: '#434954' # Popup item select | |
| paper-tabs-selection-bar-color: green | |
| # 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 | |
| # Switches | |
| # paper-toggle-button-checked-button-color: var(--accent-color) | |
| # paper-toggle-button-checked-bar-color: var(--accent-color) | |
| # paper-toggle-button-checked-ink-color: var(--accent-color) | |
| # paper-toggle-button-unchecked-button-color: var(--disabled-text-color) | |
| # paper-toggle-button-unchecked-bar-color: var(--disabled-text-color) | |
| # paper-toggle-button-unchecked-ink-color: var(--disabled-text-color) | |
| # Sliders | |
| # 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-background-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) | |
| # 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 | |
| active-color: var(--accent-color) | |
| ########################################################################################## | |
| accent-color: var(--paper-item-icon-active-color) | |
| # Primary Color | |
| 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) | |
| # Switches | |
| # paper-toggle-button-checked-button-color: hsl(192,0%,98%) | |
| # paper-toggle-button-checked-bar-color: hsl(192,0%,50%) | |
| # paper-toggle-button-unchecked-button-color: hsl(192,0%,98%) | |
| # paper-toggle-button-unchecked-bar-color: hsl(192,0%,85%) | |
| # Sliders | |
| # paper-slider-knob-color: var(--primary-color) | |
| # paper-slider-knob-start-color: hsl(0,0%,60%) | |
| # paper-slider-pin-color: var(--primary-color) | |
| # paper-slider-active-color: var(--primary-color) | |
| # paper-slider-container-color: hsl(0,0%,90%) | |
| # paper-slider-secondary-color: hsl(0,0%,90%) | |
| # paper-slider-disabled-active-color: hsl(0,0%,90%) | |
| # paper-slider-disabled-secondary-color: hsl(0,0%,90%) | |
| paper-dialog-color: hsl(0,0%,50%) | |
| ########################################################################################## | |
| Teal: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: var(--text-color-on) | |
| ########################################################################################## | |
| 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 | |
| # Switches # | |
| # paper-toggle-button-checked-ink-color: '#1DE9B6' | |
| # paper-toggle-button-checked-button-color: '#1DE9B6' | |
| # paper-toggle-button-checked-bar-color: '#1DE9B6' | |
| # Sliders # | |
| # paper-slider-knob-color: '#1DE9B6' | |
| # paper-slider-knob-start-color: '#1DE9B6' | |
| # paper-slider-pin-color: '#1DE9B6' | |
| # paper-slider-active-color: '#1DE9B6' | |
| # paper-slider-secondary-color: '#33F2D8' | |
| ########################################################################################## | |
| Dark orange: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: var(--text-primary-color) | |
| ########################################################################################## | |
| 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-slider-knob-color: var(--primary-color) | |
| # paper-slider-knob-start-color: var(--primary-color) | |
| # paper-slider-pin-color: var(--primary-color) | |
| # paper-slider-active-color: var(--primary-color) | |
| # paper-slider-secondary-color: var(--light-primary-color) | |
| # paper-slider-container-color: var(--icon-color) | |
| paper-progress-secondary-color: var(--icon-color) | |
| paper-item-selected_-_background-color: var(--primary-color) | |
| paper-item-icon_-_color: var(--text-primary-color) | |
| paper-item-icon-color: var(--icon-color) | |
| paper-item-icon-active-color: var(--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: var(--text-color_on) | |
| ########################################################################################## | |
| 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) | |
| paper-item-icon-active-color: var(--primary-color) | |
| paper-item-icon_-_color: var(--primary-text-color) | |
| # paper-slider-active-color: var(--primary-color) | |
| # paper-slider-knob-color: var(--primary-color) | |
| # paper-slider-knob-start-color: var(--primary-color) | |
| # paper-slider-pin-color: var(--primary-color) | |
| # paper-slider-secondary-color: var(--light-primary-color) | |
| paper-toggle-button-checked-ink-color: var(--dark-primary-color) | |
| paper-toggle-button-checked-button-color: var(--primary-color) | |
| paper-toggle-button-checked-bar-color: var(--light-primary-color) | |
| paper-toggle-button-unchecked-bar-color: var(--primary-text-color) | |
| ########################################################################################## | |
| Minimal: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: var(--text-color-on) | |
| ########################################################################################## | |
| 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' | |
| # paper-slider-knob-color: '#494e6b' | |
| # paper-slider-knob-start-color: '#494e6b' | |
| # paper-slider-pin-color: '#494e6b' | |
| # paper-slider-active-color: '#494e6b' | |
| ########################################################################################## | |
| Stormy hues: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: var(--accent-color) | |
| ########################################################################################## | |
| 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' | |
| # paper-slider-knob-color: '#494e6b' | |
| # paper-slider-knob-start-color: '#494e6b' | |
| # paper-slider-pin-color: '#494e6b' | |
| # paper-slider-active-color: '#494e6b' | |
| ########################################################################################## | |
| Vintage: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: var(--accent-color) | |
| ########################################################################################## | |
| 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' | |
| # paper-slider-knob-color: '#cda34f' | |
| # paper-slider-knob-start-color: '#cda34f' | |
| # paper-slider-pin-color: '#cda34f' | |
| # paper-slider-active-color: '#cda34f' | |
| ########################################################################################## | |
| Done: | |
| <<: *generic | |
| <<: &light-theme | |
| mush-rgb-disabled: 189, 189, 189 | |
| rgb-disabled: 189, 189, 189 | |
| 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: orange | |
| active-color: var(--accent-color) | |
| ########################################################################################## | |
| accent-color: var(--dark-primary-color) | |
| background-color: '#F7F8F9' # Light grey background | |
| dark-primary-color: '#83705c' | |
| primary-color: '#C09F80' | |
| primary: 192,159,128 | |
| card-background-color: '#fff' | |
| card-background: 255,255,255 | |
| ha-card-header-color: var(--primary-color) | |
| light-primary-color: '#D7CEC7' | |
| paper-toggle-button-checked-ink-color: '#76323F' | |
| paper-toggle-button-checked-button-color: '#76323F' | |
| paper-toggle-button-checked-bar-color: '#76323F' | |
| # paper-slider-knob-color: '#76323F' | |
| # paper-slider-knob-start-color: '#76323F' | |
| # paper-slider-pin-color: '#76323F' | |
| # paper-slider-active-color: '#76323F' | |
| # paper-slider-secondary-color: '#FFE0B2' | |
| ########################################################################################## | |
| ## 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: var(--accent-color) | |
| accent_color: var(--state-icon-active-color) | |
| primary: 3,168,243 | |
| card-background: 255,255,255 | |
| Clear: | |
| <<: *generic | |
| <<: *light-theme | |
| active-color: var(--accent-color) | |
| accent-color: var(--primary-color) | |
| # paper-item-icon-active-color: gold #var(--primary-color) | |
| # paper-item-icon-color: var(--primary-color) | |
| state-icon-color: var(--primary-color) | |
| # 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 | |
| # background-color: var(--primary-background-color) #'#F7F8F9' # Light grey background | |
| # border-color: '#EAEAEA' # Light grey border | |
| # Header | |
| primary-color: '#636B75' #'var(--text-color)' # Background | |
| primary: 99,107,117 | |
| dark-primary-color: '#464b51' #var(--text-color) | |
| text-primary-color: '#FFF' # Text | |
| # Left Menu | |
| sidebar-background-color: whitesmoke | |
| # UI | |
| 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 | |
| # paper-listbox-background-color: var(--card-background-color) # select Background | |
| card-background-color: whitesmoke #var(--background-card-color, 0.6) # Card Background | |
| card-background: 245,245,245 | |
| ########################################################################################## | |
| Dark red: | |
| <<: *generic | |
| <<: *dark-theme | |
| active-color: var(--text-color-on) | |
| ########################################################################################## | |
| accent-color: 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 # 'binary_sensor' 'off' | |
| ## codemirror-variable-2: gold | |
| ## codemirror-string-2: gold | |
| ## error-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' | |
| paper-item-icon-color: var(--primary-color) #'#d3d3d3' | |
| paper-listbox-background-color: '#202020' | |
| primary-background-color: '#303030' | |
| primary-color: darkred #'#d32f2f' | |
| primary: 139, 0, 0 #211,47,47 | |
| primary-text-color: '#cfcfcf' | |
| secondary-background-color: '#131313' | |
| sidebar-text_-_background: '#62717b' | |
| # Colors based on variables, see above | |
| ha-card-header-color: var(--paper-item-icon-color) | |
| paper-item-icon-active-color: gold #var(--primary-color) | |
| paper-item-icon_-_color: var(--primary-text-color) | |
| paper-listbox-color: var(--primary-text-color) | |
| paper-grey-50: var(--primary-text-color) | |
| # paper-slider-active-color: var(--primary-color) | |
| # paper-slider-knob-color: var(--primary-color) | |
| # paper-slider-knob-start-color: var(--primary-color) | |
| # paper-slider-pin-color: var(--primary-color) | |
| # paper-slider-secondary-color: var(--light-primary-color) | |
| paper-toggle-button-checked-ink-color: var(--dark-primary-color) | |
| paper-toggle-button-checked-button-color: var(--primary-color) | |
| paper-toggle-button-checked-bar-color: var(--light-primary-color) | |
| paper-toggle-button-unchecked-bar-color: 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%) | |
| # Paper card | |
| paper-item-icon-color: hsl(var(--huesat) 90%) | |
| paper-item-icon-active-color: var(--primary-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) | |
| # 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%) | |
| # Sliders | |
| # paper-slider-knob-color: hsl(var(--base-hue),90%,50%) | |
| # paper-slider-knob-start-color: hsl(var(--base-hue),80%,25%) | |
| # paper-slider-pin-color: hsl(var(--base-hue),90%,50%) | |
| # paper-slider-active-color: hsl(var(--base-hue),90%,50%) | |
| # paper-slider-container-color: hsl(var(--huesat) 28%) | |
| # paper-slider-secondary-color: hsl(var(--huesat) 90%) | |
| # paper-slider-disabled-active-color: hsl(var(--base-hue),80%,25%) | |
| # paper-slider-disabled-secondary-color: hsl(var(--base-hue),80%,25%) | |
| 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..... | |
| 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 | |
| paper-item-icon-color: green | |
| paper-item-icon-active-color: black | |
| sidebar-icon-color: saddlebrown | |
| sidebar-background-color: ivory | |
| sidebar-text: green | |
| # paper-slider-active-color: gold | |
| # paper-slider-knob-color: saddlebrown | |
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment