Skip to content

Instantly share code, notes, and snippets.

@Mariusthvdb

Mariusthvdb/themes-former.yaml

Last active August 20, 2025 07:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Mariusthvdb/73e64dac944209b82fd774cd525d05d7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Mariusthvdb/73e64dac944209b82fd774cd525d05d7 to your computer and use it in GitHub Desktop.
Download ZIP
themes
Raw
themes-former.yaml
##########################################################################################
# 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)
# have 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' # Deep midnight blue, calm and immersive
# ha-color-primary-10: '#002e3e' # Dark ocean blue, stable and grounded
# ha-color-primary-20: '#004156' # Strong navy teal, cool and confident
# ha-color-primary-30: '#006787' # Bright steel blue, energetic but balanced
# ha-color-primary-40: '#009ac7' # Vibrant sky blue (base), fresh and modern
# ha-color-primary-50: '#18bcf2' # Clear cyan, lively and engaging
# ha-color-primary-60: '#37c8fd' # Soft electric blue, light and airy
# ha-color-primary-70: '#7bd4fb' # Pastel blue glow, bright and friendly
# ha-color-primary-80: '#b9e6fc' # Pale sky tint, gentle and clean
# ha-color-primary-90: '#dff3fc' # Very light ice blue, near white
# ha-color-primary-95: '#eff9fe' # Almost pure white with a cool blue hint
#
# added flipped color palettes for the Dark-themes
# @mariusthvdb
# last_update 20250807 using HA 2025.8.0, Custom-sidebar v10.3.0 and card_mod 3.5.0!!
##########################################################################################
# background: color-mix(in srgb, var(--sidebar-selected-icon-color) 50%, transparent)
Dark blue:
# color palette
# flipped
ha-color-primary-0: '#f1f6fa' # Near-white with a whisper of blue
ha-color-primary-10: '#e1ecf4' # Soft ice blue
ha-color-primary-20: '#c2d6e6' # Subtle pastel blue-gray
ha-color-primary-30: '#9fbad1' # Muted powder blue
ha-color-primary-40: '#7fa2bb' # Balanced cool blue-gray (primary accent)
ha-color-primary-50: '#5e87a3' # Slate blue
ha-color-primary-60: '#4a6f87' # Desaturated steel blue
ha-color-primary-70: '#3f586b' # Muted navy-gray
ha-color-primary-80: '#384453' # Deep slate (use for surfaces)
ha-color-primary-90: '#2c3541' # Very dark slate gray
ha-color-primary-95: '#1f252d' # Near-black with a cool undertone
# ha-color-primary-0: '#001321' # Near-black blue
# ha-color-primary-10: '#012744' # Deep navy
# ha-color-primary-20: '#06457a' # Strong marine blue
# ha-color-primary-30: '#0d60ad' # Punchy cobalt
# ha-color-primary-40: '#1675C9' # Base primary blue
# ha-color-primary-50: '#3d85b6' # Softened azure
# ha-color-primary-60: '#5e99c4' # Muted sky blue
# ha-color-primary-70: '#7faac9' # Dusty blue-gray
# ha-color-primary-80: '#9cb9cc' # Balanced pale steel blue
# ha-color-primary-90: '#b9cad7' # Soft ice-slate blue
# ha-color-primary-95: '#d0dbe4' # Hushed blue-gray mist
<<: &generic
card-mod-theme: theme-mods
# 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
# 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
# box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2)
box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 3px 1px -2px, rgba(0, 0, 0, 0.2) 0px 1px 5px 0px
box-shadow-badges: var(--box-shadow)
test-hex-color: '#f4bd4a'
# ha-card-box-shadow: var(--box-shadow)
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/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
# 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(--active-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)
# 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)
ha-color: var(--light-blue-color) #'#03a9f4' # rgb(3,169,244) var(--color-primary-40) # #009ac7 #
ha-accent-color: '#ff9800'
# 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/013d603ba00d08a05b3299865b011944d348e44c/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-button-border-radius: var(--ha-card-border-radius)
# dialog-content-padding: 8px 16px 16px 16px
# 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
# ok-color: forestgreen using success-color from ha Styles
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: orange In original ha styles
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(--success-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: 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 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)
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: midnightblue
# state-sun-above_horizon-color: skyblue # must remain 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#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))
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
# 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
sidebar-text-color: var(--primary-color)
# 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
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
##########################################################################################
# https://community.home-assistant.io/t/midnight-theme/28598
Midnight:
# color palette
# flipped
ha-color-primary-0: '#f6f9fe' # Nearly pure white with a cool whisper (text)
ha-color-primary-10: '#edf4fd' # Very soft blue-tinted white
ha-color-primary-20: '#dbe9fb' # Pale sky blue, clean and uplifting
ha-color-primary-30: '#b9d6f8' # Gentle pastel blue, very soft
ha-color-primary-40: '#96c1f5' # Light powder blue, muted
ha-color-primary-50: '#6fa6e4' # Softened periwinkle-blue
ha-color-primary-60: '#4c80b6' # Muted medium blue, blends with dark bg
ha-color-primary-70: '#395f84' # Dark royal blue, subdued
ha-color-primary-80: '#2b4663' # Deep blue-gray with low saturation
ha-color-primary-90: '#1e3044' # Very dark navy, close to background tone
ha-color-primary-95: '#141f31' # Almost black navy, minimal contrast
# ha-color-primary-0: '#0a1220' # Very dark navy, almost black with a bluish tone
# ha-color-primary-10: '#142441' # Deep navy-blue, serious and cool
# ha-color-primary-20: '#2a4d84' # Strong royal blue, grounded and professional
# ha-color-primary-30: '#3f73bd' # Muted cornflower blue, versatile and clean
# ha-color-primary-40: '#5294E2' # Balanced periwinkle blue (base), calm and engaging
# ha-color-primary-50: '#73aaf0' # Softer azure blue, bright but not harsh
# ha-color-primary-60: '#96c1f5' # Light powder blue with a modern feel
# ha-color-primary-70: '#b9d6f8' # Gentle pastel blue, ideal for subtle UI elements
# ha-color-primary-80: '#dbe9fb' # Pale sky blue, clean and uplifting
# ha-color-primary-90: '#edf4fd' # Very soft blue-tinted white
# ha-color-primary-95: '#f6f9fe' # Nearly pure white with a cool whisper
<<: *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
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
# 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:
# color palette
ha-color-primary-0: '#01181c' # Nearly black with a deep oceanic teal tone
ha-color-primary-10: '#032f36' Very dark teal-blue, cold and mysterious
ha-color-primary-20: '#05646f' # Rich dark-cyan, bold and deep
ha-color-primary-30: '#0891a4' # Mid-tone aqua teal, modern and refreshing
ha-color-primary-40: '#0ab9d0' # Bright, electric cyan (base), energetic and fresh
ha-color-primary-50: '#26c8dc' # Lively sky blue-cyan blend, softening the edge
ha-color-primary-60: '#5ad8e7' # Clear light teal, ideal for highlighting
ha-color-primary-70: '#91e8f2' # Pale aqua, calm and breezy
ha-color-primary-80: '#c9f4f9' # Very light pastel cyan, clean and soft
ha-color-primary-90: '#e9fbfd' # Near-white with a cool refreshing tint
ha-color-primary-95: '#f4fefe' # Almost pure white with just a whisper of aqua
<<: *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%)]
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%)
ha-card-header-color: hsla(0,0%,0%,0.5)
ha-slider-background-color: var(--primary-background-color)
# 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)
##########################################################################################
Teal:
# color palette
ha-color-primary-0: '#002019' # Almost black with a deep green-teal undertone
ha-color-primary-10: '#004036' # Very dark teal green, rich and grounding
ha-color-primary-20: '#007d65' # Strong jungle teal, vivid and deep
ha-color-primary-30: '#0fc598' # Bright emerald-teal, lively and fresh
ha-color-primary-40: '#1DE9B6' # Vibrant tropical teal (base), eye-catching
ha-color-primary-50: '#48f0c6' # Crisp aqua-mint, still punchy but lighter
ha-color-primary-60: '#78f5d5' # Softened seafoam, clean and playful
ha-color-primary-70: '#a6f9e4' # Pastel mint-teal, fresh and airy
ha-color-primary-80: '#d0fcf1' # Pale coastal teal, great for backgrounds
ha-color-primary-90: '#eafdf7' # Near-white with a hint of aqua freshness
ha-color-primary-95: '#f5fefb' # Almost pure white with subtle teal whisper
<<: *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)
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:
# color palette
# flipped
ha-color-primary-0: '#fffaf0' # Almost white with a warm sunny glow (text)
ha-color-primary-10: '#fff5e6' # Very light cream with an orange tint
ha-color-primary-20: '#ffeccc' # Pale peachy tone, ideal for gentle backgrounds
ha-color-primary-30: '#ffdb99' # Light apricot, soft and inviting
ha-color-primary-40: '#ffc566' # Warm golden orange, sweet and cheerful
ha-color-primary-50: '#ffa733' # Lively tangerine, slightly softened
ha-color-primary-60: '#FF8C00' # Bright dark orange (base), bold and festive
ha-color-primary-70: '#994b00' # Warm copper orange, vivid and grounded
ha-color-primary-80: '#663000' # Deep golden-brown, strong and earthy
ha-color-primary-90: '#331a00' # Very dark amber-brown, rich and warm
ha-color-primary-95: '#1a0e00' # Almost black with a deep burnt umber hue (background)
# ha-color-primary-0: '#1a0e00' # Almost black with a deep burnt umber hue
# ha-color-primary-1: '#331a00' # Very dark amber-brown, rich and warm
# ha-color-primary-20: '#663000' # Deep golden-brown, strong and earthy
# ha-color-primary-30: '#994b00' # Warm copper orange, vivid and grounded
# ha-color-primary-40: '#FF8C00' # Bright dark orange (base), bold and festive
# ha-color-primary-50: '#ffa733' # Lively tangerine, slightly softened
# ha-color-primary-60: '#ffc566' # Warm golden orange, sweet and cheerful
# ha-color-primary-70: '#ffdb99' # Light apricot, soft and inviting
# ha-color-primary-80: '#ffeccc' # Pale peachy tone, ideal for gentle backgrounds
# ha-color-primary-90: '#fff5e6' # Very light cream with an orange tint
# ha-color-primary-95: '#fffaf0' # Almost white with a warm sunny glow
<<: *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(--primary-text-color)
secondary-background-color: var(--primary-background-color)
primary-text-color: ivory
secondary-text-color: var(--primary-color)
sidebar-background-color: '#202020'
sidebar-text-color: var(--primary-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(--primary-text-color)
# label-badge-grey: ???
table-row-background-color: var(--card-background-color)
table-row-alternative-background-color: var(--icon-color)
##########################################################################################
Dark cyan:
# color palette
# flipped
ha-color-primary-0: '#f2fcfd' # Almost pure white with a whisper of blue-green (text)
ha-color-primary-10: '#e0f9fb' # Near-white with a cool aquatic touch
ha-color-primary-20: '#bdf3f8' # Pale aqua tint, clean and bright
ha-color-primary-30: '#8ce9f2' # Soft pastel teal, energetic but airy
ha-color-primary-40: '#58dceb' # Gentle, breezy cyan, very fresh
ha-color-primary-50: '#26cfe2' # Lightened aqua, still vivid and clear
ha-color-primary-60: '#00b2c0' # Softer turquoise-cyan, less punchy
ha-color-primary-70: '#008492' # Muted strong aqua, fresher but calmer
ha-color-primary-80: '#005f6a' # Muted deep teal-cyan, subdued and clean
ha-color-primary-90: '#003e45' # Very dark cyan, toned down, professional
ha-color-primary-95: '#002624' # Almost black with a soft teal undertone (background)
# ha-color-primary-0: '#002124' # Almost black with a deep teal undertone
# ha-color-primary-1: '#004047' # Very dark cyan, cool and professional
# ha-color-primary-20: '#006973' # Deep teal-cyan, bold and clean
# ha-color-primary-30: '#0095a8' # Strong aqua, fresh and vibrant
# ha-color-primary-40: '#00bcd4' # Bright turquoise-cyan (base), punchy and modern
# ha-color-primary-50: '#26cfe2' # Lightened aqua, still vivid and clear
# ha-color-primary-60: '#58dceb' # Gentle, breezy cyan, very fresh
# ha-color-primary-70: '#8ce9f2' # Soft pastel teal, energetic but airy
# ha-color-primary-80: '#bdf3f8' # Pale aqua tint, clean and bright
# ha-color-primary-90: '#e0f9fb' # Near-white with a cool aquatic touch
# ha-color-primary-95: '#f2fcfd' # Almost pure white with a whisper of blue-green
<<: *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)'
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: '#cfcfcf'
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(--state-icon-color) #var(--paper-item-icon-color)
##########################################################################################
Minimal:
# color palette
ha-color-primary-0: '#1e1b1c' # Deep muted charcoal with a soft purple cast
ha-color-primary-10: '#302c2e' # Dark gray with subtle mauve warmth
ha-color-primary-20: '#574e52' # Smoky plum-gray, slightly heavier
ha-color-primary-30: '#7a6d73' # Mid-toned dusty mauve, smooth and gentle
ha-color-primary-40: '#98878f' # Soft mauve-gray (base), calm and neutral
ha-color-primary-50: '#ab9ba2' # Balanced muted lavender-gray, elegant
ha-color-primary-60: '#bfb0b6' # Light, powdery mauve, understated and clean
ha-color-primary-70: '#d2c6cb' # Faded rose-gray, refined and soft
ha-color-primary-80: '#e4dde0' # Pale, quiet lavender-gray for backgrounds
ha-color-primary-90: '#f2eef0' # Almost-white with the faintest mauve tint
ha-color-primary-95: '#f9f7f8' # Near-pure white, with a whisper of warmth
<<: *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'
##########################################################################################
Stormy hues:
# color palette
ha-color-primary-0: '#0f0d0e' # Near-black with a cold, moody undertone
ha-color-primary-10: '#1a1819' # Very dark mauve-gray, quiet and somber
ha-color-primary-20: '#4a4548' # Smoky charcoal with soft plum influence
ha-color-primary-30: '#6a6569' # Dusty heather gray, muted and stormy
ha-color-primary-40: '#98878f' # Muted rose-gray (base), soft and nostalgic
ha-color-primary-50: '#aa9ca5' # Faded mauve, gentle and atmospheric
ha-color-primary-60: '#bfb4ba' # Light misty lilac-gray, subdued and airy
ha-color-primary-70: '#d2c9cd' # Pale mauve haze, cozy and faded
ha-color-primary-80: '#e4dbde' # Soft foggy white with a warm mauve tint
ha-color-primary-90: '#f2eded' # Whisper of pink-gray, delicate and clean
ha-color-primary-95: '#f8f7f7' # Almost white with a trace of muted rose
<<: *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'
sidebar-text-color: var(--primary-color)
##########################################################################################
Vintage:
# color palette
ha-color-primary-0: '#1a1c0c' # Very dark olive-brown, deep and grounded
ha-color-primary-10: '#2f3219' # Dark moss green with earthy undertone
ha-color-primary-20: '#5b5e37' # Muted army green, rich and aged
ha-color-primary-30: '#7a7e4d' # Olive drab, classic vintage military tone
ha-color-primary-40: '#636b46' # Soft olive green (base), worn and natural
ha-color-primary-50: '#8a8f66' # Dusty sage, warm and balanced
ha-color-primary-60: '#a9ad85' # Pale olive-gray, faded like aged parchment
ha-color-primary-70: '#c6c6a5' # Light antique green-beige, delicate vintage vibe
ha-color-primary-80: '#dedebf' # Creamy olive tint, very soft and desaturated
ha-color-primary-90: '#edeed5' # Pale paper tone with subtle green warmth
ha-color-primary-95: '#f5f6e3' # Off-white with the gentlest olive cast
<<: *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'
##########################################################################################
Done:
# color palette
ha-color-primary-0: ' #1a120a' # Deep brown-black, warm and rich
ha-color-primary-10: '#3a2615' # Dark chocolate brown
ha-color-primary-20: '#7a5e3a' # Earthy brown with a golden undertone
ha-color-primary-30: '#a07f5c' # Warm medium tan, slightly muted
ha-color-primary-40: '#C09F80' # Soft caramel tan (base)
ha-color-primary-50: '#d4b799' # Light sand with peachy warmth
ha-color-primary-60: '#e3cdb0' # Faded beige with warm cream notes
ha-color-primary-70: '#f0dfc3' # Very light parchment tone
ha-color-primary-80: '#f9eed5' # Pale golden ivory
ha-color-primary-90: '#fcf7e8' # Near-white with a buttery warmth
ha-color-primary-95: '#fefbf3' # Soft off-white with faint tan tint
<<: *generic
<<: &light-theme
lovelace-background: radial-gradient(var(--card-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-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)
power-color: var(--active-color)
active-color: gold
##########################################################################################
accent-color: var(--dark-primary-color)
primary-color: '#C09F80'
primary-rgb: 192,159,128
sidebar-text-color: var(--primary-color)
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-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:
# color palette
# ha-color-primary-0: '#0f1114' # Almost black, with a cool undertone
# ha-color-primary-10: '#1c1f23' # Cold charcoal gray
# ha-color-primary-20: '#363b41' # Steel gunmetal
# ha-color-primary-30: '#4c525b' # Dark slate gray
# ha-color-primary-40: '#636B75' # Core: graphite blue-gray
# ha-color-primary-50: '#7a838e' # Slightly cooler mid-gray
# ha-color-primary-60: '#959da7' # Cool cloud gray
# ha-color-primary-70: '#b0b8c2' # Pale iron
# ha-color-primary-80: '#cdd3d9' # Soft icy gray
# ha-color-primary-90: '#e4e8eb' # Frosty paper-white
# ha-color-primary-95: '#f3f6f8' # Whisper of icy gray
ha-color-primary-0: '#0f1114' # Deep charcoal black
ha-color-primary-10: '#1c1f23' # Charcoal gray, cool and solid
ha-color-primary-20: '#363b41' # Gunmetal gray, reserved and strong
ha-color-primary-30: '#4c525b' # Slate gray, professional and balanced
ha-color-primary-40: '#636B75' # Graphite blue-gray, base tone
ha-color-primary-50: '#7d8690' # Neutral gray-blue, calm and muted
ha-color-primary-60: '#99a1ab' # Cloud gray, light yet grounded
ha-color-primary-70: '#b5bcc5' # Soft concrete, neutral and quiet
ha-color-primary-80: '#cfd4d9' # Light stone gray, smooth and subtle
ha-color-primary-90: '#e5e8eb' # Pale ash, nearly off-white
ha-color-primary-95: '#f4f6f7' # Gentle gray-white, clean and modern
# ha-color-primary-0: '#0f1114'
# ha-color-primary-10: '#1c1f23'
# ha-color-primary-20: '#363b41'
# ha-color-primary-30: '#4c525b'
# ha-color-primary-40: '#636B75'
# ha-color-primary-50: '#7d8690'
# ha-color-primary-60: '#99a1ab'
# ha-color-primary-70: '#b5bcc5'
# ha-color-primary-80: '#d1d7db'
# ha-color-primary-90: '#e8edf0'
# ha-color-primary-95: '#f4f7f9'
<<: *generic
<<: *light-theme
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: 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:
# color palette
# flipped
ha-color-primary-0: '#faf4f4' # Almost white with faint warm red tint (text)
ha-color-primary-10: '#f1e6e6' # Very light rosy tint, near white
ha-color-primary-20: '#e0c8c8' # Pale blush pink, gentle background
ha-color-primary-30: '#cda3a3' # Soft dusty pink, more pastel-like
ha-color-primary-40: '#bb8383' # Dusty rose red, softened warmth
ha-color-primary-50: '#a86a6a' # Warm muted red, gentle punch
ha-color-primary-60: '#985151' # Muted dark red (base), softer and more subtle
ha-color-primary-70: '#844141' # Dark dusty ruby red, toned down boldness
ha-color-primary-80: '#673131' # Deep muted blood red, softened shadows
ha-color-primary-90: '#3a1a1a' # Very dark muted crimson, rich but less intense
ha-color-primary-95: '#1a0e0e' # Almost black with a deep muted red tint (background)
# ha-color-primary-0: '#140000' # Almost black with a hint of deep red
# ha-color-primary-10: '#2a0000' # Very dark crimson, rich and intense
# ha-color-primary-20: '#530000' # Deep blood red, intense and shadowy
# ha-color-primary-30: '#710000' # Dark ruby red, powerful and bold
# ha-color-primary-40: '#8B0000' # Classic dark red (base), strong and striking
# ha-color-primary-50: '#a32222' # Firm red with a slightly brighter punch
# ha-color-primary-60: '#bd4a4a' # Muted red with a softening warmth
# ha-color-primary-70: '#d37474' # Dusty rose-red, leaning more gentle
# ha-color-primary-80: '#e8b3b3' # Soft blush pink, pastel-like
# ha-color-primary-90: '#f4dede' # Very light rosy tint, great for backgrounds
# ha-color-primary-95: '#fbf1f1' # Near-white with the faintest warm red-pink tint
<<: *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: 139, 0, 0 #211,47,47
sidebar-text-color: var(--primary-color)
primary-text-color: '#cfcfcf'
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:
# color palette
ha-color-primary-0: '#010b06' # Near-black with a faint green hint, like the void of the Matrix
ha-color-primary-10: '#02170d' # Almost-black with subtle green shadow, intro terminal glow
ha-color-primary-20: '#04321c' # Very dark moss green, subdued but rich
ha-color-primary-30: '#08562f' # Deep code green, moody and encrypted
ha-color-primary-40: '#0fad44' # Neon matrix green (base), sharp and luminous
ha-color-primary-50: '#28c65a' # Brighter digital green, still cool and controlled
ha-color-primary-60: '#5edc87' # Muted lime glow, stylized for code trails
ha-color-primary-70: '#9befb8' # Soft neon green, echoes the Matrix rain
ha-color-primary-80: '#c7f6d7' # Pale green tint, like UI highlights in code terminals
ha-color-primary-90: '#e5fbec' # Faint green-washed white, ethereal and soft
ha-color-primary-95: '#f2fef7' # Almost white with the lightest green echo
# ha-color-primary-0: '#051204'
# ha-color-primary-10: '#0b220a'
# ha-color-primary-20: '#1a3a18'
# ha-color-primary-30: '#2a572a'
# ha-color-primary-40: '#3d6f3d'
# ha-color-primary-50: '#4a804a'
# ha-color-primary-60: '#7ab67a'
# ha-color-primary-70: '#a6dba6'
# ha-color-primary-80: '#c9efc9'
# ha-color-primary-90: '#e5f8e5'
# ha-color-primary-95: '#f3fbf3'
<<: *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)
##########################################################################################
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-rgb: 15,173,68 #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)
card-background-color: hsl(var(--huesat) 12%)
card-background: 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) 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%)
# 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%)
switch-unchecked-color: hsl(var(--huesat) 25%)
##########################################################################################
Kerst:
# color palette
ha-color-primary-0: '#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
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment