Skip to content

Instantly share code, notes, and snippets.

@Mariusthvdb

Mariusthvdb/themes.yaml

Last active September 3, 2026 09:14
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save Mariusthvdb/116b59a318332cfe1ac1811494c1a7e1 to your computer and use it in GitHub Desktop.
Download ZIP
themes.yaml
Raw
themes.yaml
##########################################################################################
# VERSIONING / ENVIRONMENT
#
# @mariusthvdb — last update: 2026.09.03
#
# Home Assistant: 2026.9.0
# Kiosk-mode: 14.1.0 https://github.com/NemesisRE/kiosk-mode
# Custom-sidebar: 17.1.0 https://github.com/elchininet/custom-sidebar
# UIX: 8.2.0-beta.11 https://github.com/Lint-Free-Technology/uix
# https://www.home-assistant.io/integrations/frontend/
# https://community.home-assistant.io/c/projects/themes
##########################################################################################
# THEMES ARCHITECTURE OVERVIEW
#
# This file defines:
# - A generic anchor (&generic) for UIX, switches, sliders, dialogs, shadows, badges,
# sidebar, state colors, etc.
# - Dedicated anchors for light (&light-theme) and dark (&dark-theme) themes
# - Per-theme brand palettes (ha-color-primary-XX)
#
# https://www.home-assistant.io/integrations/frontend/#dark-mode-support
# NOTE: I do NOT use Home Assistant's built‑in light/dark_mode functionality.
# Themes are manually selected and fully self-contained.
#
# Configuration:
# frontend:
# themes: !include_dir_merge_named /config/frontend_themes
##########################################################################################
##########################################################################################
# SEMANTIC COLOR SYSTEM
#
# Home Assistant introduced semantic color variables in 2025.8.
# All themes (except Dark Mode) now follow the new scale, based on the default theme:
#
# ha-color-primary-05: '#001721'
# ha-color-primary-10: '#002e3e'
# ha-color-primary-20: '#004156'
# ha-color-primary-30: '#006787' # background accent hover
# ha-color-primary-40: '#009ac7' # background accent, text filled, text plain
# ha-color-primary-50: '#18bcf2' # text outlined
# ha-color-primary-60: '#37c8fd'
# ha-color-primary-70: '#7bd4fb'
# ha-color-primary-80: '#b9e6fc' # background hover filled
# ha-color-primary-90: '#dff3fc' # background filled
# ha-color-primary-95: '#eff9fe' # background outlined hover, plain hover
#
# Only 30 / 40 / 50 / 80 / 90 / 95 are used by HA buttons.
#
# Accent text is NOT controlled by these variables, so I explicitly define:
# ha-color-on-primary-loud: '#e4e6e9'
#
# Reference:
# https://github.com/home-assistant/frontend/blob/dev/src/resources/theme/color/wa.globals.ts
##########################################################################################
##########################################################################################
# Misc experiments:
# background: color-mix(in srgb, var(--sidebar-selected-icon-color) 50%, transparent)
# lovelace-background: radial-gradient(var(--primary-color), var(--sidebar-background-color))
##########################################################################################
generic-theme-anchor: &generic
# ─────────────────────────────────────────────
# UIX in themes
# https://uix.lf.technology/using/themes/
# ─────────────────────────────────────────────
uix-theme: theme-mods
# ─────────────────────────────────────────────
# Switches
# https://github.com/home-assistant/frontend/blob/dev/src/components/ha-switch.ts
# ─────────────────────────────────────────────
ha-switch-background-color: var(--ha-color-primary-90)
ha-switch-background-color-hover: var(--ha-color-primary-95)
ha-switch-thumb-background-color: var(--ha-color-primary-90)
ha-switch-thumb-background-color-hover: var(--ha-color-primary-30)
ha-switch-thumb-box-shadow: var(--ha-box-shadow-s)
# ─────────────────────────────────────────────
# Sliders
# ─────────────────────────────────────────────
slider-entity-row-thumb-size: 14px
slider-entity-row-track-size: 2px
slider-entity-row-box-shadow: var(--ha-box-shadow-s)
# ─────────────────────────────────────────────
# Dialogs
# ─────────────────────────────────────────────
ha-dialog-scrim-backdrop-filter: blur(17px)
md-dialog-container-shape: var(--ha-card-border-radius)
# ─────────────────────────────────────────────
# Markdown / Tables
# ─────────────────────────────────────────────
markdown-table-border-width: 0px
# ─────────────────────────────────────────────
# Decorative / Gradients
# ─────────────────────────────────────────────
header-background: var(--lovelace-background-linear)
rainbow-linear: linear-gradient(90deg, red, orange, yellow, green, blue, purple)
rainbow-radial: radial-gradient(circle, red, orange, yellow, green, blue, purple)
alert-background: linear-gradient(90deg, var(--alert-color) 30%,var(--card-background-color) 100%)
alert-text-color: seashell
warning-background: linear-gradient(90deg, var(--warning-color) 30%,var(--card-background-color) 100%)
# ─────────────────────────────────────────────
# Custom Sidebar
# https://github.com/elchininet/custom-sidebar
# ─────────────────────────────────────────────
# custom-sidebar-notification-color: var(--primary-color)
# custom-sidebar-notification-text-color: ivory
# ─────────────────────────────────────────────
# Fold-entity-row
# https://github.com/Lint-Free-Technology/lovelace-fold-entity-row
# ─────────────────────────────────────────────
section-label-margin-left: 0px
# section-header-text-color: var(--primary-color)
margin-bottom-final-fold: -8px
fold-entity-row-padding: 0px
fold-entity-row-label-margin-left: var(--section-label-margin-left)
fold-entity-row-transition-duration: 1ms
fold-entity-row-toggle-icon-width: 24px
fold-entity-row-toggle-icon-color: var(--primary-color)
# ─────────────────────────────────────────────
# UIX more-info spark
# https://uix.lf.technology/forge/sparks/more-info/
# ─────────────────────────────────────────────
uix-more-info-details-no-info-outer-padding: 8px 16px
uix-more-info-details-outer-padding: 8px
uix-more-info-details-toggle-color: var(--primary-color)
uix-more-info-details-toggle-width: 24px
uix-more-info-details-head-padding: 0
# more styling on more-info spark card in Uix-theme
# ─────────────────────────────────────────────
# Horizon-card theme tokens
# https://github.com/rejuvenate/lovelace-horizon-card
# ─────────────────────────────────────────────
hc-lines: transparent
# hc-sunrise-line-color: var(--state-sun-above_horizon-color)
# hc-sunset-line-color: var(--state-sun-below_horizon-color)
hc-horizon-line-color: var(--primary-color)
hc-time-arrow-color: transparent
hc-sun-path-color: gold
# ─────────────────────────────────────────────
# Shadows
# ─────────────────────────────────────────────
box-shadow-chip: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
0px 1px 1px 0px rgba(0, 0, 0, 0.14),
0px 1px 3px 0px rgba(0, 0, 0, 0.12)
box-shadow: var(--ha-box-shadow-s)
box-shadow-badges: var(--ha-box-shadow-s)
# ─────────────────────────────────────────────
# Badges
# https://github.com/home-assistant/frontend/blob/dev/src/components/ha-badge.ts
# ─────────────────────────────────────────────
ha-badge-icon-size: 24px
# ─────────────────────────────────────────────
# Header / App Bar
# ─────────────────────────────────────────────
header-height: 48px
app-header-background-color: var(--primary-color) #also applies to notification tray
app-header-selection-bar-color: var(--primary-text-color)
# ─────────────────────────────────────────────
# Hover / Form / WA tokens
# https://github.com/home-assistant/frontend/blob/dev/src/resources/theme/color/semantic.globals.ts
# ─────────────────────────────────────────────
hover-color: var(--lovelace-background-linear)
ha-color-form-background: transparent
ha-color-form-background-hover: darkgray
ha-color-form-background-disabled: lightgray
wa-color-neutral-fill-normal: var(--disabled-color)
# ─────────────────────────────────────────────
# Lovelace Sections
# https://github.com/home-assistant/frontend/blob/dev/src/panels/lovelace/views/hui-sections-view.ts
# ─────────────────────────────────────────────
ha-view-sections-row-gap: 8px
ha-section-background-color: var(--primary-color)
ha-section-border-radius: 0px
scrollbar-thumb-color: var(--primary-color)
ha-color: var(--light-blue-color)
# ─────────────────────────────────────────────
# Card / Border / Radius
# https://github.com/home-assistant/frontend/blob/dev/src/resources/theme/core.globals.ts
# ─────────────────────────────────────────────
ha-card-border-width: 0px
ha-card-border-radius: 0px
ha-dialog-border-radius: 0px
ha-card-features-border-radius: 0px
ha-button-border-radius: 0px
popup-border-radius: 0px
# ─────────────────────────────────────────────
# More-info
# ─────────────────────────────────────────────
more-info-control-thickness: 85px
input-fill-color: var(--card-background-color)
# ─────────────────────────────────────────────
# Tooltip
# https://github.com/home-assistant/frontend/blob/dev/src/components/ha-tooltip.ts
# ─────────────────────────────────────────────
ha-tooltip-border-radius: 0px
ha-tooltip-font-size: 12px
ha-tooltip-arrow-size: 0px
wa-tooltip-border-width: 2px
wa-tooltip-border-style: solid
wa-tooltip-border-color: var(--background-color-off)
wa-tooltip-content-color: red
wa-tooltip-background-color: red
# ─────────────────────────────────────────────
# Alerts / Energy
# ─────────────────────────────────────────────
alert-color: crimson
critical-color: '#600000' #firebrick
critical-low-color: var(--light-blue-color)
no-power-color: dimgray
energy-grid-return-color: orange
energy-grid-consumption-color: darkblue
# ─────────────────────────────────────────────
# Sidebar
# https://github.com/home-assistant/frontend/blob/dev/src/components/ha-sidebar.ts
# ─────────────────────────────────────────────
sidebar-icon-color: var(--primary-color)
# sidebar-selected-icon-color: var(--info-color)
sidebar-text-color: var(--primary-color)
# sidebar-background-color: var(--card-background-color)
# sidebar-menu-button-background-color: var(--card-background-color) #var(--header-background)
upload-color: var(--success-color)
download-color: var(--info-color)
ping-color: var(--warning-color)
# ─────────────────────────────────────────────
# State Colors
# https://github.com/home-assistant/frontend/blob/dev/src/components/entity/state-badge.ts#L249
# https://github.com/home-assistant/frontend/blob/dev/src/resources/theme/color/color.globals.ts#L179
# ─────────────────────────────────────────────
state-active-color: var(--amber-color)
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)
state-binary_sensor-update-off-color: var(--success-color)
state-binary_sensor-active-on-color: var(--alert-color)
state-climate-auto-color: var(--primary-color)
state-humidifier-on-color: var(--deep-orange-color)
state-cover-closed-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-device_tracker-home-color: var(--success-color)
state-device_tracker-not-home-color: var(--no-power-color)
state-fan-on-color: lightskyblue
state-fan-off-color: lightgray
state-group-active-color: var(--active-color)
state-input_boolean-on-color: var(--active-color)
state-person-home-color: var(--success-color)
state-person-not-home-color: var(--no-power-color)
state-person-zone-color: mediumslateblue
state-script-on-color: var(--alert-color)
# state-sun-below_horizon-color: skyblue # var(--indigo-color)
# state-sun-above_horizon-color: gold # var(--amber-color)
state-switch-on-color: var(--active-color)
state-update-on-color: var(--alert-color)
##########################################################################################
# select-quick-anchor: &select-quick
# ─────────────────────────────────────────────
# Quickbar (mdc-text-field)
# Controls the search bar in the Quickbar
# ─────────────────────────────────────────────
# mdc-text-field-fill-color: var(--card-background-color) # Quickbar header background
# mdc-text-field-ink-color: var(--primary-text-color) # Quickbar text color
# ─────────────────────────────────────────────
# Input Select (mdc-select)
# ─────────────────────────────────────────────
# mdc-select-label-ink-color: var(--secondary-text-color)
# mdc-select-fill-color: var(--card-background-color)
# Shape tokens (Material Design 3)
# mdc-shape-small: var(--ha-card-border-radius)
# ─────────────────────────────────────────────
# More-info expanded attributes (inputs)
# ─────────────────────────────────────────────
# input-fill-color: var(--card-background-color)
# input-ink-color: var(--primary-text-color)
#######
# input-idle-line-color: rgba(0, 0, 0, 0.42)
# input-hover-line-color: rgba(0, 0, 0, 0.87)
# input-disabled-line-color: rgba(0, 0, 0, 0.06)
# input-outlined-idle-border-color: rgba(0, 0, 0, 0.38)
# input-outlined-hover-border-color: rgba(0, 0, 0, 0.87)
# input-outlined-disabled-border-color: rgba(0, 0, 0, 0.06)
# input-fill-color: rgb(245, 245, 245)
# input-disabled-fill-color: rgb(250, 250, 250)
# input-ink-color: rgba(0, 0, 0, 0.87)
# input-label-ink-color: rgba(0, 0, 0, 0.6)
# input-disabled-ink-color: rgba(0, 0, 0, 0.37)
# input-dropdown-icon-color: rgba(0, 0, 0, 0.54)
#
# control-select-color: red
# control-select-focused-opacity: 0.2
# control-select-selected-opacity: 1
# control-select-background: red
# control-select-background-opacity: 0.2
# control-select-thickness: 40px
# control-select-border-radius: 10px
# control-select-padding: 4px
# control-select-button-border-radius: calc(
# var(--control-select-border-radius) - var(--control-select-padding))
##########################################################################################
light-theme-anchor: &light-theme
lovelace-background: radial-gradient(var(--card-background-color), var(--primary-color))
lovelace-background-linear: linear-gradient(90deg, var(--primary-color) 0%, var(--card-background-color) 100%)
# ─────────────────────────────────────────────
# On / Off Background Colors
# ─────────────────────────────────────────────
background-color-on: var(--card-background-color)
background-color-off: rgba(from var(--primary-color) r g b / 0.8)
# ─────────────────────────────────────────────
# Opacity Layers
# ─────────────────────────────────────────────
background-opacity-on: rgba(var(--card-background), 0.8)
background-opacity-off: rgba(var(--primary-rgb), 0.8)
# ─────────────────────────────────────────────
# Text Colors
# ─────────────────────────────────────────────
text-color-on: var(--primary-color)
text-color-off: var(--card-background-color)
# ─────────────────────────────────────────────
# Icon Colors
# ─────────────────────────────────────────────
icon-color-on: var(--primary-color)
icon-color-off: var(--card-background-color)
# ─────────────────────────────────────────────
# Header / Chips
# ─────────────────────────────────────────────
app-header-text-color: var(--text-color-off)
header-chip-text-color: var(--primary-color)
##########################################################################################
dark-theme-anchor: &dark-theme
# ─────────────────────────────────────────────
# Active / Power Colors
# ─────────────────────────────────────────────
active-color: gold
power-color: orange
# ─────────────────────────────────────────────
# Text Field / Form Labels
# ─────────────────────────────────────────────
# mdc-text-field-label-ink-color: var(--primary-text-color)
# ─────────────────────────────────────────────
# Map Filter (Dark Mode)
# https://github.com/home-assistant/frontend/blob/dev/src/components/map/ha-map.ts#L880
# ─────────────────────────────────────────────
map-filter: 'invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)'
# ─────────────────────────────────────────────
# Disabled Colors
# ─────────────────────────────────────────────
mush-rgb-disabled: 111, 111, 111
rgb-disabled: 111, 111, 111
# ─────────────────────────────────────────────
# Header / Chips
# ─────────────────────────────────────────────
app-header-text-color: var(--primary-text-color)
header-chip-text-color: var(--primary-text-color)
# ─────────────────────────────────────────────
# Lovelace Backgrounds (Dark Mode)
# ─────────────────────────────────────────────
lovelace-background: radial-gradient(var(--primary-color), var(--card-background-color))
lovelace-background-linear: linear-gradient(90deg, var(--card-background-color) 0%, var(--primary-color) 100%)
# ─────────────────────────────────────────────
# On / Off Background Colors
# ─────────────────────────────────────────────
background-color-on: var(--primary-color)
background-color-off: var(--card-background-color)
# ─────────────────────────────────────────────
# Text Colors
# ─────────────────────────────────────────────
text-color-on: var(--card-background-color)
text-color-off: var(--primary-color)
# ─────────────────────────────────────────────
# Icon Colors
# ─────────────────────────────────────────────
icon-color-on: var(--card-background-color)
icon-color-off: var(--primary-color)
# ─────────────────────────────────────────────
# CodeMirror Syntax Highlighting
# ─────────────────────────────────────────────
codemirror-keyword: red
codemirror-operator: yellow
codemirror-property: pink
codemirror-variable: '#696969'
codemirror-def: orange
codemirror-number: lightblue
codemirror-comment: slategray
codemirror-string: sandybrown
# ─────────────────────────────────────────────
# Opacity Layers
# ─────────────────────────────────────────────
background-opacity-on: rgba(var(--primary-rgb), 0.8)
background-opacity-off: rgba(var(--card-background), 0.8)
##########################################################################################
Default adjusted:
<<: *generic
# ─────────────────────────────────────────────
# On / Off Background Colors
# ─────────────────────────────────────────────
background-color-on: var(--primary-color)
background-color-off: var(--card-background-color)
# ─────────────────────────────────────────────
# Opacity Layers
# ─────────────────────────────────────────────
background-opacity-on: rgba(var(--primary-rgb),0.8)
background-opacity-off: rgba(var(--card-background),0.8)
# ─────────────────────────────────────────────
# Text Colors
# ─────────────────────────────────────────────
text-color-on: var(--card-background-color)
text-color-off: var(--primary-color)
# ─────────────────────────────────────────────
# Icon Colors
# ─────────────────────────────────────────────
icon-color-on: var(--accent-color)
icon-color-off: var(--primary-color)
# ─────────────────────────────────────────────
# Accent / Active
# ─────────────────────────────────────────────
active-color: gold
accent-color: var(--state-icon-active-color)
# ─────────────────────────────────────────────
# Main Colors
# ─────────────────────────────────────────────
primary-rgb: 3,168,243
card-background: 255,255,255
##########################################################################################
Clear:
<<: *generic
<<: *light-theme
# 'shuttle-gray': {
# '50': '#f5f6f6',
# '100': '#e4e6e9',
# '200': '#cdd1d4',
# '300': '#aab0b6',
# '400': '#7f8891',
# '500': '#636b75',
# '600': '#565c64',
# '700': '#494d55',
# '800': '#414449',
# '900': '#393b40',
# '950': '#232529',
# }
ha-color-on-primary-loud: '#e4e6e9' # text accent
# Brand color palette
# ha-color-primary-05: '#f5f6f6'
# ha-color-primary-10: '#e4e6e9'
# ha-color-primary-20: '#cdd1d4'
# ha-color-primary-30: '#aab0b6'
# ha-color-primary-40: '#7f8891'
# ha-color-primary-50: '#636b75'
# ha-color-primary-60: '#565c64'
# ha-color-primary-70: '#494d55'
# ha-color-primary-80: '#414449'
# ha-color-primary-90: '#393b40'
# ha-color-primary-95: '#232529'
ha-color-primary-30: '#494d55' # background accent hover
ha-color-primary-40: '#636b75' # background accent, text filled, text plain
ha-color-primary-50: '#636b75' # text outlined
ha-color-primary-80: '#cdd1d4' # background filled hover
ha-color-primary-90: '#e4e6e9' # background filled
ha-color-primary-95: '#e4e6e9' # background outlined hover, plain hover
active-color: gold
power-color: darkorange
# lovelace-background: radial-gradient(var(--sidebar-background-color),var(--primary-color))
# lovelace-background: radial-gradient(whitesmoke,slategray)
# lovelace-background: center/cover no-repeat url('/local/wallpapers/.jpg') fixed
text-color: pink # Grey text
text-light-color: '#BAC0C6' # Light grey text
primary-color: '#636B75' # Background
primary-rgb: 99,107,117
dark-primary-color: '#464b51'
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 # Card Background
card-background: 245,245,245
##########################################################################################
Dark blue:
<<: *generic
<<: *dark-theme
# 'lochmara': {
# '50': '#f1f7fe',
# '100': '#e3eefb',
# '200': '#c0ddf7',
# '300': '#88c1f1',
# '400': '#49a2e7',
# '500': '#2286d5',
# '600': '#1675c9',
# '700': '#115493',
# '800': '#12497a',
# '900': '#153e65',
# '950': '#0e2743',
# }
# Brand color palette
ha-color-on-primary-loud: '#f1f7fe'
ha-color-primary-30: '#115493' # background accent hover
ha-color-primary-40: var(--primary-color) # background accent, text filled, text plain
ha-color-primary-50: '#49a2e7' # text outlined
ha-color-primary-80: '#88c1f1' # background hover filled
ha-color-primary-90: '#c0ddf7' # background filled
ha-color-primary-95: '#c0ddf7' # background outlined hover, plain hover
accent-color: '#1A78C2' # Accent color
# Main colors
primary-color: '#1675C9' # Header
primary-rgb: 22,117,201
dark-primary-color: '#245188' # Hyperlinks
light-primary-color: var(--accent-color) # Horizontal line in about
# Text colors
primary-text-color: '#e3eefb' # Primary text colour
secondary-text-color: '#5294E2' # Secondary titles in more-info
disabled-text-color: var(--no-power-color) # Disabled text colour
# Background colors
card-background-color: '#0e2743' # Card background colour
card-background: 14,39,67
primary-background-color: '#115493' # Settings background
secondary-background-color: '#2E3545' # Main card UI background
divider-color: var(--primary-color) # Divider
# Table rows
table-row-background-color: var(--card-background-color)
# table-row-alternative-background-color: '#12497a'
data-table-background-color: '#0e2743' # Make text standout in dark themes
ha-card-header-color: var(--accent-color) # Card header text colour
##########################################################################################
Midnight:
<<: *generic
<<: *dark-theme
# https://community.home-assistant.io/t/midnight-theme/28598
# 'havelock-blue': {
# '50': '#f1f7fd',
# '100': '#dfedfa',
# '200': '#c6e0f7',
# '300': '#9fccf1',
# '400': '#71b0e9',
# '500': '#5294e2',
# '600': '#3b77d5',
# '700': '#3164c4',
# '800': '#2e519f',
# '900': '#2a477e',
# '950': '#1e2d4d',
# }
# Brand color palette
ha-color-on-primary-loud: '#f1f7fd'
ha-color-primary-30: '#3164c4' # background accent hover
ha-color-primary-40: var(--primary-color) # background accent, text filled , text plain
ha-color-primary-50: '#49a2e7' # text outlined
ha-color-primary-80: '#9fccf1' # background hover filled
ha-color-primary-90: '#dfedfa' # background filled
ha-color-primary-95: '#c6e0f7' # background outlined hover, plain hover
# Main colors
primary-color: '#5294E2' # Header
primary-rgb: 82,148,226
accent-color: '#E45E65' # Accent color
dark-primary-color: '#44679a' # Hyperlinks
light-primary-color: var(--primary-text-color) # Horizontal line in about
# Text colors
primary-text-color: '#FFFFFF' # Primary text colour
secondary-text-color: '#5294E2' # Secondary titles in more info boxes etc.
disabled-text-color: var(--no-power-color) # Disabled text colour
# 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
# Header
ha-card-header-color: var(--accent-color)
##########################################################################################
Teal:
<<: *generic
<<: *dark-theme
# 'aquamarine': {
# '50': '#eafff7',
# '100': '#cbffeb',
# '200': '#9cfedc',
# '300': '#5df8cc',
# '400': '#1de9b6',
# '500': '#00d0a1',
# '600': '#00aa85',
# '700': '#00886e',
# '800': '#006b57',
# '900': '#00584a',
# '950': '#00322b',
# }
# Brand color palette
ha-color-on-primary-loud: '#006b57'
ha-color-primary-30: '#00aa85' # background accent hover
ha-color-primary-40: '#1de9b6' # background accent, text filled , text plain
ha-color-primary-50: '#5df8cc' # text outlined
ha-color-primary-80: '#00584a' # background hover filled
ha-color-primary-90: '#00886e' # background filled
ha-color-primary-95: '#00886e' # background outlined hover, plain hover
# Accent
accent-color: var(--primary-color)
# Main colors
primary-color: '#1DE9B6' # Primary (most of the UI)
primary-rgb: 29,233,182
dark-primary-color: '#4ca081'
# Background colors
card-background-color: '#424242'
card-background: 66,66,66
primary-background-color: '#303030' # Primary background colour (dialogs, etc.)
secondary-background-color: '#303030' # Secondary background colour (main UI background)
# Text colors
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
# Header
ha-card-header-color: '#FFFFFF' # Card header text colour
##########################################################################################
Dark orange:
<<: *generic
<<: *dark-theme
# 'west-side': {
# '50': '#fffbec',
# '100': '#fff6d3',
# '200': '#ffeaa5',
# '300': '#ffd86d',
# '400': '#ffbb32',
# '500': '#ffa40a',
# '600': '#ff8c00',
# '700': '#cc6702',
# '800': '#a14f0b',
# '900': '#82420c',
# '950': '#462004',
# }
# Brand color palette
ha-color-on-primary-loud: '#fff6d3' # text accent
ha-color-primary-30: '#a14f0b' # background accent hover
ha-color-primary-40: var(--primary-color) # background accent, text filled , text plain
ha-color-primary-50: '#ffa40a' # text outlined
ha-color-primary-80: '#ffd86d' # background hover filled
ha-color-primary-90: '#fff6d3' # background filled
ha-color-primary-95: '#fff6d3' # background outlined hover, plain hover
# Accent
accent-color: var(--primary-color)
# Main colors
primary-color: darkorange
primary-rgb: 255,140,0
light-primary-color: '#ffc947'
dark-primary-color: '#c66900' #a86d27
# Background colors
primary-background-color: '#37464f'
secondary-background-color: var(--primary-background-color)
card-background-color: '#263137'
card-background: 38,49,55
sidebar-background-color: '#202020'
# Text colors
primary-text-color: '#fffbec' # ivory
secondary-text-color: var(--primary-color)
icon-color: '#62717b'
# Table rows
table-row-background-color: var(--card-background-color)
table-row-alternative-background-color: var(--icon-color)
# Header
ha-card-header-color: var(--primary-text-color)
##########################################################################################
Dark cyan:
<<: *generic
<<: *dark-theme
# 'scooter': {
# '50': '#ebffff',
# '100': '#cefdff',
# '200': '#a2f8ff',
# '300': '#63f0fd',
# '400': '#1cdef4',
# '500': '#00bcd4',
# '600': '#039ab7',
# '700': '#0a7a94',
# '800': '#126278',
# '900': '#145265',
# '950': '#063646',
# }
# Brand color palette
ha-color-on-primary-loud: '#ebffff' # text accent
ha-color-primary-30: '#0a7a94' # background accent hover
ha-color-primary-40: '#039ab7' # background accent, text filled , text plain
ha-color-primary-50: '#00bcd4' # text outlined
ha-color-primary-80: '#a2f8ff' # background hover filled
ha-color-primary-90: '#cefdff' # background filled
ha-color-primary-95: '#cefdff' # background outlined hover, plain hover
# Accent
accent-color: var(--primary-color)
# Main colors that can be changed
primary-color: '#00bcd4'
primary-rgb: 0,188,212
dark-primary-color: '#3a8192'
# Text colors
primary-text-color: '#cefdff'
secondary-text-color: '#04a7bc'
disabled-text-color: '#545454'
# Divider
divider-color: 'rgba(255, 255, 255, 0.12)'
# Header
ha-card-header-color: var(--state-icon-color)
# Background colors
card-background-color: '#063646' # Card background colour
card-background: 6,54,70
primary-background-color: '#126278' # Settings background
secondary-background-color: '#0a7a94' # Main card UI background
##########################################################################################
Dark red:
<<: *generic
<<: *dark-theme
#
# 'red-berry': {
# '50': '#ffeeee',
# '100': '#ffdada',
# '200': '#ffbbbb',
# '300': '#ff8b8b',
# '400': '#ff4949',
# '500': '#ff1111',
# '600': '#ff0000',
# '700': '#e70000',
# '800': '#be0000',
# '900': '#8b0000',
# '950': '#560000',
# }
ha-color-on-primary-loud: '#ffeeee' # text accent
# Brand color palette
ha-color-primary-30: '#8b0000' # background accent hover
ha-color-primary-40: '#be0000' # background accent, text filled, text plain
ha-color-primary-50: '#ff1111' # text outlined
ha-color-primary-80: '#ffdada' # background hover filled
ha-color-primary-90: '#ffbbbb' # background filled
ha-color-primary-95: '#ffbbbb' # background outlined hover, plain hover
# Accent
accent-color: var(--primary-color)
# Main colors
dark-primary-color: '#882c27'
light-primary-color: '#e06c6c'
primary-color: darkred #'#d32f2f'
primary-rgb: 139, 0, 0 #211,47,47
# Text colors
primary-text-color: '#ffeeee'
secondary-text-color: var(--primary-color)
disabled-text-color: '#545454'
# Divider
divider-color: rgba(255,255,255,0.12)
# Background colors
card-background-color: '#1d1d1d'
card-background: 29,29,29
primary-background-color: '#303030'
secondary-background-color: '#131313'
# Header
ha-card-header-color: var(--state-icon-color)
# Table rows
table-row-background-color: var(--card-background-color)
# table-row-alternative-background-color: var(--sidebar-text_-_background)
##########################################################################################
Matrix:
<<: *generic
# 'harlequin': {
# '50': '#ebffe4',
# '100': '#d3ffc4',
# '200': '#a9ff90',
# '300': '#72ff50',
# '400': '#39ff14',
# '500': '#1ee600',
# '600': '#14b800',
# '700': '#0f8b00',
# '800': '#116d07',
# '900': '#115c0b',
# '950': '#023400',
# }
ha-color-on-primary-loud: '#023400' # text accent
# Brand color palette
# ha-color-primary-05: '#033014'
# ha-color-primary-10: '#11562a'
# ha-color-primary-20: '#126930'
ha-color-primary-30: '#14b800' # background accent hover
ha-color-primary-40: '#39FF14' # background accent, text filled, text plain
ha-color-primary-50: '#1acd56' # text outlined
# ha-color-primary-60: '#42e679'
# ha-color-primary-70: '#81f4a7'
ha-color-primary-80: '#115c0b' # background hover filled
ha-color-primary-90: '#0f8b00' # background filled
ha-color-primary-95: '#0f8b00' # background outlined hover, plain hover
# ─────────────────────────────────────────────
# Lovelace Backgrounds (Overrides dark-theme)
# ─────────────────────────────────────────────
lovelace-background-linear: linear-gradient(90deg, var(--card-background-color) 0%, var(--primary-color) 100%)
lovelace-background: center/cover no-repeat url('/local/wallpapers/matrix.png') fixed
# ─────────────────────────────────────────────
# On / Off Background Colors
# ─────────────────────────────────────────────
background-color-on: var(--primary-color)
background-color-off: var(--card-background-color)
# ─────────────────────────────────────────────
# Opacity Layers
# ─────────────────────────────────────────────
background-opacity-on: rgba(var(--primary-rgb),0.8)
background-opacity-off: rgba(var(--card-background),0.8)
# ─────────────────────────────────────────────
# Text Colors
# ─────────────────────────────────────────────
text-color-on: var(--card-background-color)
text-color-off: var(--primary-color)
# ─────────────────────────────────────────────
# Icon Colors
# ─────────────────────────────────────────────
icon-color-off: var(--primary-color)
icon-color-on: var(--accent-color)
# ─────────────────────────────────────────────
# Accent / Active / Power
# ─────────────────────────────────────────────
active-color: var(--accent-color)
power-color: '#39ff14'
accent-color: hsl(var(--base-hue),90%,50%) # var(--primary-text-color)
# ─────────────────────────────────────────────
# Custom Variables (Matrix HSL System)
# ─────────────────────────────────────────────
base-hue: 120 # Controls the base (and accent) color hue (0-360)
base-sat: 46% # Controls the saturation of the theme (0%-100%)
huesat: 'var(--base-hue), var(--base-sat),' # Helper variable
# ─────────────────────────────────────────────
# Main Colors
# ─────────────────────────────────────────────
primary-color: hsl(var(--huesat) 50%)
primary-rgb: 57, 255, 20
# dark-primary-color: '#232820'
# ─────────────────────────────────────────────
# Background Colors
# ─────────────────────────────────────────────
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-selected-icon-color: var(--accent-color)
sidebar-selected-text-color: var(--accent-color)
card-background-color: hsl(var(--huesat) 12%)
card-background: 2, 52, 0 # 45,57,45
# ─────────────────────────────────────────────
# Table Rows
# ─────────────────────────────────────────────
table-row-background-color: hsl(var(--huesat) 12%)
table-row-alternative-background-color: hsl(var(--huesat) 10%)
# ─────────────────────────────────────────────
# Divider
# ─────────────────────────────────────────────
divider-color: hsla(0,0%,0%,0)
dark-divider-opacity: 0
light-divider-opacity: 0
# ─────────────────────────────────────────────
# Text Colors
# ─────────────────────────────────────────────
primary-text-color: hsl(var(--huesat) 60%)
text-primary-color: hsl(var(--huesat) 80%)
secondary-text-color: hsl(var(--huesat) 60%)
disabled-text-color: hsl(var(--huesat) 70%)
# ha-card-header-color: hsl(var(--base-hue),90%,50%)
# ─────────────────────────────────────────────
# Switches (optional overrides)
# ─────────────────────────────────────────────
# switch-checked-color: hsl(var(--base-hue),90%,50%)
# switch-unchecked-color: hsl(var(--huesat) 25%)
##########################################################################################
Kerst:
# color palette
# ha-color-primary-05: '#330202' # Deep crimson black, like midnight mulled wine
# ha-color-primary-10: '#590505' # Dark holly berry red, moody and traditional
# ha-color-primary-20: '#a01212' # Classic Santa suit red, bold and strong
# ha-color-primary-30: '#b71515' # Festive centerpiece red, vivid and glowing
# ha-color-primary-40: '#cc2e2e' # Bright ornament red, eye-catching and warm
# ha-color-primary-50: '#dd4747' # Cheerful candy apple red, rich and inviting
# ha-color-primary-60: '#e76767' # Lively poinsettia red, soft yet saturated
# ha-color-primary-70: '#f08f8f' # Blush pink with warmth, like ribbon or gift wrap
# ha-color-primary-80: '#f8c4c4' # Gentle peppermint tint, sweet and cozy
# ha-color-primary-90: '#fbecec' # Soft snow-kissed pink, delicate and light
# ha-color-primary-95: '#fdf7f7' # Icy rose white, festive with a whisper of warmth
ha-color-on-primary-loud: '#effef3' # text accent
# Brand color palette
# ha-color-primary-05: '#033014'
# ha-color-primary-10: '#11562a'
# ha-color-primary-20: '#126930'
ha-color-primary-30: 'green' # background accent hover
ha-color-primary-40: '#cc2e2e' # background accent, text filled, text plain
ha-color-primary-50: '#a01212' # text outlined
# ha-color-primary-60: '#42e679'
# ha-color-primary-70: '#81f4a7'
ha-color-primary-80: '#b8facd' # background hover filled
ha-color-primary-90: '#dafee5' # background filled
ha-color-primary-95: '#fdf7f7' # background outlined hover, plain hover
# ─────────────────────────────────────────────
# UIX
# ─────────────────────────────────────────────
uix-theme: theme-mods
# ─────────────────────────────────────────────
# Header / Tabs
# ─────────────────────────────────────────────
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 Rows
# ─────────────────────────────────────────────
table-row-background-color: ivory
table-row-alternative-background-color: skyblue
# ─────────────────────────────────────────────
# On / Off Background Colors
# ─────────────────────────────────────────────
background-color-off: var(--primary-color)
background-color-on: var(--card-background-color)
# ─────────────────────────────────────────────
# Opacity Layers
# ─────────────────────────────────────────────
background-opacity-on: rgba(var(--primary-rgb),0.8)
background-opacity-off: rgba(var(--card-background),0.8)
# ─────────────────────────────────────────────
# Text Colors
# ─────────────────────────────────────────────
text-color-off: var(--card-background-color)
text-color-on: saddlebrown # var(--primary-color) also card header color...
# ─────────────────────────────────────────────
# Icon Colors
# ─────────────────────────────────────────────
state-icon-color: green
icon-color-off: var(--accent-color)
icon-color-on: var(--primary-color)
# ─────────────────────────────────────────────
# Card Borders / Shadows
# ─────────────────────────────────────────────
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 Card
# ─────────────────────────────────────────────
restriction-lock-row-margin-left: calc(100% - 25px) # 95%
# ─────────────────────────────────────────────
# Select Quick (merge)
# ─────────────────────────────────────────────
# <<: *select-quick
# ─────────────────────────────────────────────
# Lovelace Backgrounds
# ─────────────────────────────────────────────
lovelace-background: radial-gradient(var(--primary-color),var(--accent-color))
# center/cover no-repeat url('/local/wallpapers/snow.mp4') fixed
# ─────────────────────────────────────────────
# Header
# ─────────────────────────────────────────────
ha-card-header-color: saddlebrown
# ─────────────────────────────────────────────
# Background Colors
# ─────────────────────────────────────────────
card-background-color: ivory
card-background: 255,255,240
primary-background-color: silver # Necessary for sidebar slideout background
secondary-background-color: lightgreen
# ─────────────────────────────────────────────
# Accent / Active / Power
# ─────────────────────────────────────────────
alert-color: var(--primary-color)
accent-color: green
active-color: var(--accent-color)
power-color: red
# ─────────────────────────────────────────────
# Main Colors
# ─────────────────────────────────────────────
dark-primary-color: saddlebrown
primary-color: '#B71515'
primary-rgb: 183,21,21
# ─────────────────────────────────────────────
# Sidebar
# ─────────────────────────────────────────────
sidebar-icon-color: saddlebrown
# sidebar-selected-icon-color: green
sidebar-background-color: var(--card-background-color)
sidebar-text-color: var(--primary-color) # in generic but not applied...
# ─────────────────────────────────────────────
# Final Text Colors
# ─────────────────────────────────────────────
primary-text-color: green
secondary-text-color: saddlebrown
# text-primary-color: ivory
input-fill-color: var(--card-background-color)
##########################################################################################
#experimental
Trippy:
# Brand color palette (psychedelic rainbow)
ha-color-primary-05: '#1a0021' # Deep Purple
ha-color-primary-10: '#400080' # Electric Indigo
ha-color-primary-20: '#ff00ff' # Hot Magenta
ha-color-primary-30: '#ff0080' # Neon Pink
ha-color-primary-40: '#ff6600' # Bright Orange
ha-color-primary-50: '#ffea00' # Neon Yellow
ha-color-primary-60: '#b4ff00' # Lime Green
ha-color-primary-70: '#00ff99' # Aqua Green
ha-color-primary-80: '#00ccff' # Electric Cyan
ha-color-primary-90: '#0080ff' # Bright Blue
ha-color-primary-95: '#6600ff' # Vivid Violet
# Alternative palette (commented out)
# ha-color-primary-05: '#FFF600' # Lemon Yellow
# ha-color-primary-10: '#EBEBFF' # Indigo White
# ha-color-primary-20: '#FF6BB5' # Hot Pink
# ha-color-primary-30: '#FF5D38' # Psychedelic Orange
# ha-color-primary-40: '#D5306C' # Muted Crimson
# ha-color-primary-50: '#35A79B' # Turquoise Green
# ha-color-primary-60: '#8A2CE2' # Psychedelic Purple
# ha-color-primary-70: '#6A5BCD' # Crimson Blue
# ha-color-primary-80: '#1F1F9E' # Electric Blue
# ha-color-primary-90: '#4B0D82' # Deep Violet
# ha-color-primary-95: '#690571' # Clairvoyant Purple
# Full rainbow accent palette (commented out)
# ha-color-accent-05: '#1a0021'
# ha-color-accent-10: '#400080'
# ha-color-accent-20: '#ff00ff'
# ha-color-accent-30: '#ff0080'
# ha-color-accent-40: '#ff6600'
# ha-color-accent-50: '#ffea00'
# ha-color-accent-60: '#b4ff00'
# ha-color-accent-70: '#00ff99'
# ha-color-accent-80: '#00ccff'
# ha-color-accent-90: '#0080ff'
# ha-color-accent-95: '#6600ff'
# ─────────────────────────────────────────────
# Lovelace Background
# ─────────────────────────────────────────────
lovelace-background: 'radial-gradient(circle,
#ff00ff 0%,
#ff6600 15%,
#ffea00 30%,
#00ff99 45%,
#00ccff 60%,
#6600ff 75%,
#ff00ff 90%)'
# extra-css (commented out)
# extra-css: |
# @keyframes psychedelicBackground {
# 0% { background-position: 0% 50%; }
# 50% { background-position: 100% 50%; }
# 100% { background-position: 0% 50%; }
# }
# ─────────────────────────────────────────────
# Background Colors
# ─────────────────────────────────────────────
primary-background-color: '#000000' # Pure black background
secondary-background-color: '#0a0a0a' # Slightly lighter black
card-background-color: 'radial-gradient(circle,
#ff00ff 0%,
#6600ff 15%,
#00ccff 30%,
#00ff99 45%,
#ffea00 60%,
#ff6600 75%,
#ff00ff 90%)'
# '#111111' # Dark grey for cards (old value)
# ─────────────────────────────────────────────
# Main Colors
# ─────────────────────────────────────────────
primary-color: '#9c00d9'
primary-text-color: '#b4ff00'
# text-accent-color: '#ff00ff' # Magenta text accents
# ─────────────────────────────────────────────
# Power / State Colors
# ─────────────────────────────────────────────
power-color: '#400080'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment