mirror of
https://github.com/CeeWeasel/fresh-home.git
synced 2026-08-09 18:40:14 -04:00
CeeWeasel
1809 lines
74 KiB
YAML
1809 lines
74 KiB
YAML
Catppuccin Latte:
|
|
modes:
|
|
light: &latte
|
|
#####################
|
|
# Catppuccin Colors #
|
|
#####################
|
|
catppuccin-rosewater: "#dc8a78"
|
|
catppuccin-rosewater-rgb: 220, 138, 120
|
|
catppuccin-flamingo: "#dd7878"
|
|
catppuccin-flamingo-rgb: 221, 120, 120
|
|
catppuccin-pink: "#ea76cb"
|
|
catppuccin-pink-rgb: 234, 118, 203
|
|
catppuccin-mauve: "#8839ef"
|
|
catppuccin-mauve-rgb: 136, 57, 239
|
|
catppuccin-red: "#d20f39"
|
|
catppuccin-red-rgb: 210, 15, 57
|
|
catppuccin-maroon: "#e64553"
|
|
catppuccin-maroon-rgb: 230, 69, 83
|
|
catppuccin-peach: "#fe640b"
|
|
catppuccin-peach-rgb: 254, 100, 11
|
|
catppuccin-yellow: "#df8e1d"
|
|
catppuccin-yellow-rgb: 223, 142, 29
|
|
catppuccin-green: "#40a02b"
|
|
catppuccin-green-rgb: 64, 160, 43
|
|
catppuccin-teal: "#179299"
|
|
catppuccin-teal-rgb: 23, 146, 153
|
|
catppuccin-sky: "#04a5e5"
|
|
catppuccin-sky-rgb: 4, 165, 229
|
|
catppuccin-sapphire: "#209fb5"
|
|
catppuccin-sapphire-rgb: 32, 159, 181
|
|
catppuccin-blue: "#1e66f5"
|
|
catppuccin-blue-rgb: 30, 102, 245
|
|
catppuccin-lavender: "#7287fd"
|
|
catppuccin-lavender-rgb: 114, 135, 253
|
|
catppuccin-text: "#4c4f69"
|
|
catppuccin-text-rgb: 76, 79, 105
|
|
catppuccin-subtext1: "#5c5f77"
|
|
catppuccin-subtext1-rgb: 92, 95, 119
|
|
catppuccin-subtext0: "#6c6f85"
|
|
catppuccin-subtext0-rgb: 108, 111, 133
|
|
catppuccin-overlay2: "#7c7f93"
|
|
catppuccin-overlay2-rgb: 124, 127, 147
|
|
catppuccin-overlay1: "#8c8fa1"
|
|
catppuccin-overlay1-rgb: 140, 143, 161
|
|
catppuccin-overlay0: "#9ca0b0"
|
|
catppuccin-overlay0-rgb: 156, 160, 176
|
|
catppuccin-surface2: "#acb0be"
|
|
catppuccin-surface2-rgb: 172, 176, 190
|
|
catppuccin-surface1: "#bcc0cc"
|
|
catppuccin-surface1-rgb: 188, 192, 204
|
|
catppuccin-surface0: "#ccd0da"
|
|
catppuccin-surface0-rgb: 204, 208, 218
|
|
catppuccin-base: "#eff1f5"
|
|
catppuccin-base-rgb: 239, 241, 245
|
|
catppuccin-mantle: "#e6e9ef"
|
|
catppuccin-mantle-rgb: 230, 233, 239
|
|
catppuccin-crust: "#dce0e8"
|
|
catppuccin-crust-rgb: 220, 224, 232
|
|
|
|
################################
|
|
# Home Assistant color palette #
|
|
################################
|
|
# List from the "core.globals.ts" file in home-assistant/frontend.
|
|
# TODO: Update these once Whiskers has variant (tint / shade) support.
|
|
|
|
# Primary
|
|
# NOTE: This centers around `primary-40` rather than `primary-50` because
|
|
# HA uses `-40` as the default brand color for some reason.
|
|
ha-color-primary-05: rgb(84, 76, 122)
|
|
ha-color-primary-10: rgb(91, 73, 139)
|
|
ha-color-primary-20: rgb(106, 68, 172)
|
|
ha-color-primary-30: rgb(121, 63, 205)
|
|
ha-color-primary-40: rgb(136, 57, 239)
|
|
ha-color-primary-50: rgb(153, 88, 240)
|
|
ha-color-primary-60: rgb(170, 117, 241)
|
|
ha-color-primary-70: rgb(186, 147, 242)
|
|
ha-color-primary-80: rgb(205, 181, 243)
|
|
ha-color-primary-90: rgb(222, 210, 244)
|
|
ha-color-primary-95: rgb(231, 226, 245)
|
|
|
|
# Neutral
|
|
ha-color-neutral-05: rgb(84, 87, 112)
|
|
ha-color-neutral-10: rgb(92, 96, 119)
|
|
ha-color-neutral-20: rgb(109, 111, 133)
|
|
ha-color-neutral-30: rgb(125, 128, 147)
|
|
ha-color-neutral-40: rgb(142, 143, 161)
|
|
ha-color-neutral-50: rgb(158, 160, 175)
|
|
ha-color-neutral-60: rgb(173, 177, 189)
|
|
ha-color-neutral-70: rgb(191, 193, 203)
|
|
ha-color-neutral-80: rgb(206, 209, 217)
|
|
ha-color-neutral-90: rgb(223, 225, 231)
|
|
ha-color-neutral-95: rgb(231, 233, 238)
|
|
|
|
# Orange
|
|
ha-color-orange-05: rgb(94, 81, 95)
|
|
ha-color-orange-10: rgb(112, 83, 86)
|
|
ha-color-orange-20: rgb(148, 87, 67)
|
|
ha-color-orange-30: rgb(182, 92, 49)
|
|
ha-color-orange-40: rgb(218, 96, 30)
|
|
ha-color-orange-50: rgb(254, 100, 11)
|
|
ha-color-orange-60: rgb(251, 128, 58)
|
|
ha-color-orange-70: rgb(248, 156, 105)
|
|
ha-color-orange-80: rgb(245, 185, 151)
|
|
ha-color-orange-90: rgb(242, 213, 198)
|
|
ha-color-orange-95: rgb(241, 226, 221)
|
|
|
|
# Red
|
|
ha-color-red-05: rgb(89, 73, 100)
|
|
ha-color-red-10: rgb(103, 66, 95)
|
|
ha-color-red-20: rgb(130, 53, 86)
|
|
ha-color-red-30: rgb(156, 41, 76)
|
|
ha-color-red-40: rgb(183, 28, 67)
|
|
ha-color-red-50: rgb(210, 15, 57)
|
|
ha-color-red-60: rgb(216, 60, 95)
|
|
ha-color-red-70: rgb(222, 105, 132)
|
|
ha-color-red-80: rgb(227, 151, 170)
|
|
ha-color-red-90: rgb(233, 196, 207)
|
|
ha-color-red-95: rgb(236, 218, 226)
|
|
|
|
# Green
|
|
ha-color-green-05: rgb(75, 87, 98)
|
|
ha-color-green-10: rgb(74, 95, 93)
|
|
ha-color-green-20: rgb(72, 111, 80)
|
|
ha-color-green-30: rgb(68, 128, 68)
|
|
ha-color-green-40: rgb(66, 144, 55)
|
|
ha-color-green-50: rgb(64, 160, 43)
|
|
ha-color-green-60: rgb(99, 176, 83)
|
|
ha-color-green-70: rgb(134, 192, 124)
|
|
ha-color-green-80: rgb(169, 209, 164)
|
|
ha-color-green-90: rgb(204, 225, 205)
|
|
ha-color-green-95: rgb(222, 232, 224)
|
|
|
|
######################
|
|
# HA Semantic Colors #
|
|
######################
|
|
# List from the "semantic.globals.ts" file in home-assistant/frontend.
|
|
|
|
ha-color-focus: var(--ha-color-orange-60)
|
|
|
|
# Text
|
|
ha-color-text-primary: var(--catppuccin-text)
|
|
ha-color-text-secondary: var(--catppuccin-subtext1)
|
|
ha-color-text-disabled: var(--catppuccin-overlay1)
|
|
ha-color-text-link: var(--catppuccin-blue)
|
|
|
|
# Border primary
|
|
ha-color-border-primary-quiet: var(--ha-color-primary-80)
|
|
ha-color-border-primary-normal: var(--ha-color-primary-70)
|
|
ha-color-border-primary-loud: var(--ha-color-primary-40)
|
|
|
|
# Border neutral
|
|
ha-color-border-neutral-quiet: var(--ha-color-neutral-80)
|
|
ha-color-border-neutral-normal: var(--ha-color-neutral-60)
|
|
ha-color-border-neutral-loud: var(--ha-color-neutral-40)
|
|
|
|
# Border danger
|
|
ha-color-border-danger-quiet: var(--ha-color-red-80)
|
|
ha-color-border-danger-normal: var(--ha-color-red-70)
|
|
ha-color-border-danger-loud: var(--ha-color-red-40)
|
|
|
|
# Border warning
|
|
ha-color-border-warning-quiet: var(--ha-color-orange-80)
|
|
ha-color-border-warning-normal: var(--ha-color-orange-70)
|
|
ha-color-border-warning-loud: var(--ha-color-orange-40)
|
|
|
|
# Border success
|
|
ha-color-border-success-quiet: var(--ha-color-green-80)
|
|
ha-color-border-success-normal: var(--ha-color-green-70)
|
|
ha-color-border-success-loud: var(--ha-color-green-40)
|
|
|
|
# Fill primary quiet
|
|
ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95)
|
|
ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90)
|
|
ha-color-fill-primary-quiet-active: var(--ha-color-primary-95)
|
|
|
|
# Fill primary normal
|
|
ha-color-fill-primary-normal-resting: var(--ha-color-primary-90)
|
|
ha-color-fill-primary-normal-hover: var(--ha-color-primary-80)
|
|
ha-color-fill-primary-normal-active: var(--ha-color-primary-90)
|
|
|
|
# Fill primary loud
|
|
ha-color-fill-primary-loud-resting: var(--ha-color-primary-40)
|
|
ha-color-fill-primary-loud-hover: var(--ha-color-primary-30)
|
|
ha-color-fill-primary-loud-active: var(--ha-color-primary-40)
|
|
|
|
# Fill neutral quiet
|
|
ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95)
|
|
ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90)
|
|
ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95)
|
|
|
|
# Fill neutral normal
|
|
ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90)
|
|
ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80)
|
|
ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90)
|
|
|
|
# Fill neutral loud
|
|
ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40)
|
|
ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30)
|
|
ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40)
|
|
|
|
# Fill disabled quiet
|
|
ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95)
|
|
|
|
# Fill disabled normal
|
|
ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95)
|
|
|
|
# Fill disabled loud
|
|
ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80)
|
|
|
|
# Fill danger quiet
|
|
ha-color-fill-danger-quiet-resting: var(--ha-color-red-95)
|
|
ha-color-fill-danger-quiet-hover: var(--ha-color-red-90)
|
|
ha-color-fill-danger-quiet-active: var(--ha-color-red-95)
|
|
|
|
# Fill danger normal
|
|
ha-color-fill-danger-normal-resting: var(--ha-color-red-90)
|
|
ha-color-fill-danger-normal-hover: var(--ha-color-red-80)
|
|
ha-color-fill-danger-normal-active: var(--ha-color-red-90)
|
|
|
|
# Fill danger loud
|
|
ha-color-fill-danger-loud-resting: var(--ha-color-red-50)
|
|
ha-color-fill-danger-loud-hover: var(--ha-color-red-40)
|
|
ha-color-fill-danger-loud-active: var(--ha-color-red-50)
|
|
|
|
# Fill warning quiet
|
|
ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95)
|
|
ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90)
|
|
ha-color-fill-warning-quiet-active: var(--ha-color-orange-95)
|
|
|
|
# Fill warning normal
|
|
ha-color-fill-warning-normal-resting: var(--ha-color-orange-90)
|
|
ha-color-fill-warning-normal-hover: var(--ha-color-orange-80)
|
|
ha-color-fill-warning-normal-active: var(--ha-color-orange-90)
|
|
|
|
# Fill warning loud
|
|
ha-color-fill-warning-loud-resting: var(--ha-color-orange-70)
|
|
ha-color-fill-warning-loud-hover: var(--ha-color-orange-50)
|
|
ha-color-fill-warning-loud-active: var(--ha-color-orange-70)
|
|
|
|
# Fill success quiet
|
|
ha-color-fill-success-quiet-resting: var(--ha-color-green-95)
|
|
ha-color-fill-success-quiet-hover: var(--ha-color-green-90)
|
|
ha-color-fill-success-quiet-active: var(--ha-color-green-95)
|
|
|
|
# Fill success normal
|
|
ha-color-fill-success-normal-resting: var(--ha-color-green-90)
|
|
ha-color-fill-success-normal-hover: var(--ha-color-green-80)
|
|
ha-color-fill-success-normal-active: var(--ha-color-green-90)
|
|
|
|
# Fill success loud
|
|
ha-color-fill-success-loud-resting: var(--ha-color-green-50)
|
|
ha-color-fill-success-loud-hover: var(--ha-color-green-40)
|
|
ha-color-fill-success-loud-active: var(--ha-color-green-50)
|
|
|
|
# On primary
|
|
ha-color-on-primary-quiet: var(--ha-color-primary-50)
|
|
ha-color-on-primary-normal: var(--ha-color-primary-40)
|
|
ha-color-on-primary-loud: var(--white-color)
|
|
|
|
# On neutral
|
|
ha-color-on-neutral-quiet: var(--ha-color-neutral-50)
|
|
ha-color-on-neutral-normal: var(--ha-color-neutral-40)
|
|
ha-color-on-neutral-loud: var(--white-color)
|
|
|
|
# On disabled
|
|
ha-color-on-disabled-quiet: var(--ha-color-neutral-80)
|
|
ha-color-on-disabled-normal: var(--ha-color-neutral-70)
|
|
ha-color-on-disabled-loud: var(--ha-color-neutral-95)
|
|
|
|
# On danger
|
|
ha-color-on-danger-quiet: var(--ha-color-red-50)
|
|
ha-color-on-danger-normal: var(--ha-color-red-40)
|
|
ha-color-on-danger-loud: var(--white-color)
|
|
|
|
# On warning
|
|
ha-color-on-warning-quiet: var(--ha-color-orange-50)
|
|
ha-color-on-warning-normal: var(--ha-color-orange-40)
|
|
ha-color-on-warning-loud: var(--white-color)
|
|
|
|
# On success
|
|
ha-color-on-success-quiet: var(--ha-color-green-50)
|
|
ha-color-on-success-normal: var(--ha-color-green-40)
|
|
ha-color-on-success-loud: var(--white-color)
|
|
|
|
###################
|
|
# HA Other Colors #
|
|
###################
|
|
# List from the "color.globals.ts" file in home-assistant/frontend.
|
|
|
|
# Text
|
|
primary-text-color: var(--ha-color-text-primary)
|
|
secondary-text-color: var(--ha-color-text-secondary)
|
|
text-primary-color: var(--catppuccin-crust)
|
|
text-light-primary-color: var(--catppuccin-crust)
|
|
disabled-text-color: var(--catppuccin-overlay1)
|
|
|
|
# Main interface colors
|
|
# primary-color: var(--ha-color-primary-40)
|
|
dark-primary-color: var(--ha-color-primary-30)
|
|
darker-primary-color: var(--ha-color-primary-20)
|
|
light-primary-color: var(--ha-color-primary-50)
|
|
accent-color: var(--primary-color)
|
|
divider-color: rgba(var(--catppuccin-overlay1-rgb), 0.15)
|
|
outline-color: var(--catppuccin-crust)
|
|
outline-hover-color: var(--catppuccin-surface2)
|
|
|
|
# RGB
|
|
rgb-primary-color: var(--catppuccin-mauve-rgb)
|
|
rgb-accent-color: var(--catppuccin-mauve-rgb)
|
|
rgb-primary-text-color: var(--catppuccin-text-rgb)
|
|
rgb-secondary-text-color: var(--catppuccin-subtext1-rgb)
|
|
rgb-text-primary-color: var(--catppuccin-text-rgb)
|
|
rgb-card-background-color: var(--catppuccin-base-rgb)
|
|
|
|
rgb-warning-color: var(--catppuccin-yellow-rgb)
|
|
rgb-error-color: var(--catppuccin-red-rgb)
|
|
rgb-success-color: var(--catppuccin-green-rgb)
|
|
rgb-info-color: var(--catppuccin-blue-rgb)
|
|
|
|
scrollbar-thumb-color: var(--primary-color)
|
|
|
|
error-color: var(--catppuccin-red)
|
|
warning-color: var(--catppuccin-yellow)
|
|
success-color: var(--catppuccin-green)
|
|
info-color: var(--catppuccin-blue)
|
|
|
|
# Backgrounds
|
|
card-background-color: var(--catppuccin-base)
|
|
primary-background-color: var(--catppuccin-mantle)
|
|
secondary-background-color: var(--catppuccin-mantle)
|
|
clear-background-color: var(--card-background-color)
|
|
|
|
# For label-badge
|
|
label-badge-grey: var(--secondary-text-color)
|
|
|
|
# States icon
|
|
state-icon-color: var(--primary-color)
|
|
|
|
# Energy
|
|
energy-grid-consumption-color: var(--catppuccin-lavender)
|
|
energy-grid-return-color: var(--catppuccin-mauve)
|
|
energy-solar-color: var(--catppuccin-yellow)
|
|
energy-non-fossil-color: var(--catppuccin-green)
|
|
energy-battery-out-color: var(--catppuccin-teal)
|
|
energy-battery-in-color: var(--catppuccin-pink)
|
|
energy-gas-color: var(--catppuccin-red)
|
|
energy-water-color: var(--catppuccin-sky)
|
|
|
|
# Color
|
|
disabled-color: var(--catppuccin-overlay1)
|
|
red-color: var(--catppuccin-red)
|
|
pink-color: var(--catppuccin-pink)
|
|
purple-color: var(--catppuccin-mauve)
|
|
deep-purple-color: var(--catppuccin-mauve)
|
|
indigo-color: var(--catppuccin-lavender)
|
|
blue-color: var(--catppuccin-blue)
|
|
light-blue-color: var(--catppuccin-sky)
|
|
cyan-color: var(--catppuccin-teal)
|
|
teal-color: var(--catppuccin-teal)
|
|
green-color: var(--catppuccin-green)
|
|
light-green-color: var(--catppuccin-green)
|
|
lime-color: var(--catppuccin-green)
|
|
yellow-color: var(--catppuccin-yellow)
|
|
amber-color: var(--catppuccin-yellow)
|
|
orange-color: var(--catppuccin-peach)
|
|
deep-orange-color: var(--catppuccin-maroon)
|
|
brown-color: var(--catppuccin-flamingo)
|
|
light-grey-color: var(--catppuccin-surface0)
|
|
grey-color: var(--catppuccin-surface2)
|
|
dark-grey-color: var(--catppuccin-overlay1)
|
|
blue-grey-color: var(--dark-grey-color)
|
|
black-color: var(--catppuccin-text)
|
|
white-color: var(--catppuccin-crust)
|
|
|
|
# Input components
|
|
input-idle-line-color: var(--primary-text-color)
|
|
input-hover-line-color: var(--accent-color)
|
|
input-disabled-line-color: var(--disabled-text-color)
|
|
input-outlined-idle-border-color: var(--disabled-text-color)
|
|
input-outlined-hover-border-color: var(--disabled-text-color)
|
|
input-outlined-disabled-border-color: var(--disabled-text-color)
|
|
input-fill-color: var(--primary-background-color)
|
|
input-disabled-fill-color: var(--catppuccin-surface1)
|
|
input-ink-color: var(--primary-text-color)
|
|
input-label-ink-color: var(--secondary-text-color)
|
|
input-disabled-ink-color: var(--disabled-text-color)
|
|
input-dropdown-icon-color: var(--secondary-text-color)
|
|
|
|
# State color
|
|
state-active-color: var(--catppuccin-mauve)
|
|
|
|
sidebar-background-color: var(--catppuccin-crust)
|
|
switch-unchecked-color: var(--catppuccin-overlay0)
|
|
switch-unchecked-button-color: var(--switch-unchecked-color)
|
|
switch-unchecked-track-color: var(--switch-unchecked-color)
|
|
|
|
app-header-text-color: var(--primary-text-color)
|
|
app-header-background-color: var(--catppuccin-crust)
|
|
|
|
# Codemirror
|
|
codemirror-keyword: var(--catppuccin-mauve)
|
|
codemirror-operator: var(--catppuccin-sky)
|
|
codemirror-variable: var(--catppuccin-blue) # Functions
|
|
codemirror-variable-2: var(--catppuccin-text) # "Special variable"s
|
|
codemirror-variable-3: var(--catppuccin-text) # Currently unused
|
|
codemirror-builtin: var(--catppuccin-red)
|
|
codemirror-atom: var(--catppuccin-red)
|
|
codemirror-number: var(--catppuccin-peach)
|
|
codemirror-def: var(--catppuccin-text)
|
|
codemirror-string: var(--catppuccin-green)
|
|
codemirror-string-2: var(--catppuccin-green) # Currently unused
|
|
codemirror-comment: var(--catppuccin-overlay2)
|
|
codemirror-tag: var(--catppuccin-blue) # Currently unused
|
|
codemirror-meta: var(--catppuccin-overlay2)
|
|
codemirror-attribute: var(--catppuccin-yellow)
|
|
codemirror-property: var(--catppuccin-blue)
|
|
codemirror-qualifier: var(--catppuccin-peach)
|
|
codemirror-type: var(--catppuccin-yellow) # Currently unused
|
|
|
|
################
|
|
# Other colors #
|
|
################
|
|
# These colors are respected by Home Assistant (currently), but aren't
|
|
# defined directly in the main theme.
|
|
text-accent-color: var(--catppuccin-crust)
|
|
md-slider-inactive-track-color: var(--catppuccin-overlay0)
|
|
app-header-edit-background-color: var(--catppuccin-surface2)
|
|
app-header-edit-text-color: var(--primary-text-color)
|
|
|
|
mdc-ripple-color: "#aaaaaa"
|
|
mdc-linear-progress-buffer-color: "#f00"
|
|
|
|
##########
|
|
# Graphs #
|
|
##########
|
|
graph-color-1: var(--catppuccin-mauve)
|
|
graph-color-2: var(--catppuccin-green)
|
|
graph-color-3: var(--catppuccin-red)
|
|
graph-color-4: var(--catppuccin-blue)
|
|
graph-color-5: var(--catppuccin-pink)
|
|
graph-color-6: var(--catppuccin-yellow)
|
|
graph-color-7: var(--catppuccin-sky)
|
|
graph-color-8: var(--catppuccin-maroon)
|
|
graph-color-9: var(--catppuccin-lavender)
|
|
graph-color-10: var(--catppuccin-peach)
|
|
graph-color-11: var(--catppuccin-teal)
|
|
graph-color-12: var(--catppuccin-rosewater)
|
|
graph-color-13: var(--catppuccin-sapphire)
|
|
graph-color-14: var(--catppuccin-flamingo)
|
|
Catppuccin Frappe:
|
|
modes:
|
|
dark: &frappe
|
|
#####################
|
|
# Catppuccin Colors #
|
|
#####################
|
|
catppuccin-rosewater: "#f2d5cf"
|
|
catppuccin-rosewater-rgb: 242, 213, 207
|
|
catppuccin-flamingo: "#eebebe"
|
|
catppuccin-flamingo-rgb: 238, 190, 190
|
|
catppuccin-pink: "#f4b8e4"
|
|
catppuccin-pink-rgb: 244, 184, 228
|
|
catppuccin-mauve: "#ca9ee6"
|
|
catppuccin-mauve-rgb: 202, 158, 230
|
|
catppuccin-red: "#e78284"
|
|
catppuccin-red-rgb: 231, 130, 132
|
|
catppuccin-maroon: "#ea999c"
|
|
catppuccin-maroon-rgb: 234, 153, 156
|
|
catppuccin-peach: "#ef9f76"
|
|
catppuccin-peach-rgb: 239, 159, 118
|
|
catppuccin-yellow: "#e5c890"
|
|
catppuccin-yellow-rgb: 229, 200, 144
|
|
catppuccin-green: "#a6d189"
|
|
catppuccin-green-rgb: 166, 209, 137
|
|
catppuccin-teal: "#81c8be"
|
|
catppuccin-teal-rgb: 129, 200, 190
|
|
catppuccin-sky: "#99d1db"
|
|
catppuccin-sky-rgb: 153, 209, 219
|
|
catppuccin-sapphire: "#85c1dc"
|
|
catppuccin-sapphire-rgb: 133, 193, 220
|
|
catppuccin-blue: "#8caaee"
|
|
catppuccin-blue-rgb: 140, 170, 238
|
|
catppuccin-lavender: "#babbf1"
|
|
catppuccin-lavender-rgb: 186, 187, 241
|
|
catppuccin-text: "#c6d0f5"
|
|
catppuccin-text-rgb: 198, 208, 245
|
|
catppuccin-subtext1: "#b5bfe2"
|
|
catppuccin-subtext1-rgb: 181, 191, 226
|
|
catppuccin-subtext0: "#a5adce"
|
|
catppuccin-subtext0-rgb: 165, 173, 206
|
|
catppuccin-overlay2: "#949cbb"
|
|
catppuccin-overlay2-rgb: 148, 156, 187
|
|
catppuccin-overlay1: "#838ba7"
|
|
catppuccin-overlay1-rgb: 131, 139, 167
|
|
catppuccin-overlay0: "#737994"
|
|
catppuccin-overlay0-rgb: 115, 121, 148
|
|
catppuccin-surface2: "#626880"
|
|
catppuccin-surface2-rgb: 98, 104, 128
|
|
catppuccin-surface1: "#51576d"
|
|
catppuccin-surface1-rgb: 81, 87, 109
|
|
catppuccin-surface0: "#414559"
|
|
catppuccin-surface0-rgb: 65, 69, 89
|
|
catppuccin-base: "#303446"
|
|
catppuccin-base-rgb: 48, 52, 70
|
|
catppuccin-mantle: "#292c3c"
|
|
catppuccin-mantle-rgb: 41, 44, 60
|
|
catppuccin-crust: "#232634"
|
|
catppuccin-crust-rgb: 35, 38, 52
|
|
|
|
################################
|
|
# Home Assistant color palette #
|
|
################################
|
|
# List from the "core.globals.ts" file in home-assistant/frontend.
|
|
# TODO: Update these once Whiskers has variant (tint / shade) support.
|
|
|
|
# Primary
|
|
# NOTE: This centers around `primary-40` rather than `primary-50` because
|
|
# HA uses `-40` as the default brand color for some reason.
|
|
ha-color-primary-05: rgb(198, 201, 243)
|
|
ha-color-primary-10: rgb(199, 196, 242)
|
|
ha-color-primary-20: rgb(200, 183, 237)
|
|
ha-color-primary-30: rgb(201, 170, 233)
|
|
ha-color-primary-40: rgb(202, 158, 230)
|
|
ha-color-primary-50: rgb(176, 140, 203)
|
|
ha-color-primary-60: rgb(151, 123, 177)
|
|
ha-color-primary-70: rgb(127, 106, 151)
|
|
ha-color-primary-80: rgb(99, 87, 123)
|
|
ha-color-primary-90: rgb(74, 70, 97)
|
|
ha-color-primary-95: rgb(60, 60, 83)
|
|
|
|
# Neutral
|
|
ha-color-neutral-05: rgb(190, 200, 237)
|
|
ha-color-neutral-10: rgb(183, 192, 227)
|
|
ha-color-neutral-20: rgb(168, 176, 210)
|
|
ha-color-neutral-30: rgb(152, 161, 192)
|
|
ha-color-neutral-40: rgb(138, 146, 175)
|
|
ha-color-neutral-50: rgb(123, 130, 157)
|
|
ha-color-neutral-60: rgb(108, 114, 140)
|
|
ha-color-neutral-70: rgb(93, 99, 122)
|
|
ha-color-neutral-80: rgb(78, 84, 105)
|
|
ha-color-neutral-90: rgb(62, 67, 87)
|
|
ha-color-neutral-95: rgb(56, 60, 78)
|
|
|
|
# Orange
|
|
ha-color-orange-05: rgb(202, 203, 232)
|
|
ha-color-orange-10: rgb(206, 198, 220)
|
|
ha-color-orange-20: rgb(215, 189, 194)
|
|
ha-color-orange-30: rgb(222, 178, 169)
|
|
ha-color-orange-40: rgb(231, 169, 143)
|
|
ha-color-orange-50: rgb(239, 159, 118)
|
|
ha-color-orange-60: rgb(201, 137, 108)
|
|
ha-color-orange-70: rgb(162, 116, 99)
|
|
ha-color-orange-80: rgb(125, 95, 89)
|
|
ha-color-orange-90: rgb(86, 74, 80)
|
|
ha-color-orange-95: rgb(67, 63, 75)
|
|
|
|
# Red
|
|
ha-color-red-05: rgb(202, 200, 233)
|
|
ha-color-red-10: rgb(204, 192, 222)
|
|
ha-color-red-20: rgb(211, 177, 200)
|
|
ha-color-red-30: rgb(218, 161, 177)
|
|
ha-color-red-40: rgb(225, 146, 155)
|
|
ha-color-red-50: rgb(231, 130, 132)
|
|
ha-color-red-60: rgb(195, 114, 120)
|
|
ha-color-red-70: rgb(158, 99, 107)
|
|
ha-color-red-80: rgb(121, 83, 95)
|
|
ha-color-red-90: rgb(84, 68, 82)
|
|
ha-color-red-95: rgb(67, 60, 76)
|
|
|
|
# Green
|
|
ha-color-green-05: rgb(195, 208, 234)
|
|
ha-color-green-10: rgb(191, 208, 223)
|
|
ha-color-green-20: rgb(185, 209, 202)
|
|
ha-color-green-30: rgb(179, 208, 180)
|
|
ha-color-green-40: rgb(173, 209, 159)
|
|
ha-color-green-50: rgb(166, 209, 137)
|
|
ha-color-green-60: rgb(143, 177, 124)
|
|
ha-color-green-70: rgb(119, 146, 110)
|
|
ha-color-green-80: rgb(95, 115, 97)
|
|
ha-color-green-90: rgb(71, 84, 83)
|
|
ha-color-green-95: rgb(60, 68, 77)
|
|
|
|
######################
|
|
# HA Semantic Colors #
|
|
######################
|
|
# List from the "semantic.globals.ts" file in home-assistant/frontend.
|
|
|
|
ha-color-focus: var(--ha-color-orange-60)
|
|
|
|
# Text
|
|
ha-color-text-primary: var(--catppuccin-text)
|
|
ha-color-text-secondary: var(--catppuccin-subtext1)
|
|
ha-color-text-disabled: var(--catppuccin-overlay1)
|
|
ha-color-text-link: var(--catppuccin-blue)
|
|
|
|
# Border primary
|
|
ha-color-border-primary-quiet: var(--ha-color-primary-80)
|
|
ha-color-border-primary-normal: var(--ha-color-primary-70)
|
|
ha-color-border-primary-loud: var(--ha-color-primary-40)
|
|
|
|
# Border neutral
|
|
ha-color-border-neutral-quiet: var(--ha-color-neutral-80)
|
|
ha-color-border-neutral-normal: var(--ha-color-neutral-60)
|
|
ha-color-border-neutral-loud: var(--ha-color-neutral-40)
|
|
|
|
# Border danger
|
|
ha-color-border-danger-quiet: var(--ha-color-red-80)
|
|
ha-color-border-danger-normal: var(--ha-color-red-70)
|
|
ha-color-border-danger-loud: var(--ha-color-red-40)
|
|
|
|
# Border warning
|
|
ha-color-border-warning-quiet: var(--ha-color-orange-80)
|
|
ha-color-border-warning-normal: var(--ha-color-orange-70)
|
|
ha-color-border-warning-loud: var(--ha-color-orange-40)
|
|
|
|
# Border success
|
|
ha-color-border-success-quiet: var(--ha-color-green-80)
|
|
ha-color-border-success-normal: var(--ha-color-green-70)
|
|
ha-color-border-success-loud: var(--ha-color-green-40)
|
|
|
|
# Fill primary quiet
|
|
ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95)
|
|
ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90)
|
|
ha-color-fill-primary-quiet-active: var(--ha-color-primary-95)
|
|
|
|
# Fill primary normal
|
|
ha-color-fill-primary-normal-resting: var(--ha-color-primary-90)
|
|
ha-color-fill-primary-normal-hover: var(--ha-color-primary-80)
|
|
ha-color-fill-primary-normal-active: var(--ha-color-primary-90)
|
|
|
|
# Fill primary loud
|
|
ha-color-fill-primary-loud-resting: var(--ha-color-primary-40)
|
|
ha-color-fill-primary-loud-hover: var(--ha-color-primary-30)
|
|
ha-color-fill-primary-loud-active: var(--ha-color-primary-40)
|
|
|
|
# Fill neutral quiet
|
|
ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95)
|
|
ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90)
|
|
ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95)
|
|
|
|
# Fill neutral normal
|
|
ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90)
|
|
ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80)
|
|
ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90)
|
|
|
|
# Fill neutral loud
|
|
ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40)
|
|
ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30)
|
|
ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40)
|
|
|
|
# Fill disabled quiet
|
|
ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95)
|
|
|
|
# Fill disabled normal
|
|
ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95)
|
|
|
|
# Fill disabled loud
|
|
ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80)
|
|
|
|
# Fill danger quiet
|
|
ha-color-fill-danger-quiet-resting: var(--ha-color-red-95)
|
|
ha-color-fill-danger-quiet-hover: var(--ha-color-red-90)
|
|
ha-color-fill-danger-quiet-active: var(--ha-color-red-95)
|
|
|
|
# Fill danger normal
|
|
ha-color-fill-danger-normal-resting: var(--ha-color-red-90)
|
|
ha-color-fill-danger-normal-hover: var(--ha-color-red-80)
|
|
ha-color-fill-danger-normal-active: var(--ha-color-red-90)
|
|
|
|
# Fill danger loud
|
|
ha-color-fill-danger-loud-resting: var(--ha-color-red-50)
|
|
ha-color-fill-danger-loud-hover: var(--ha-color-red-40)
|
|
ha-color-fill-danger-loud-active: var(--ha-color-red-50)
|
|
|
|
# Fill warning quiet
|
|
ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95)
|
|
ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90)
|
|
ha-color-fill-warning-quiet-active: var(--ha-color-orange-95)
|
|
|
|
# Fill warning normal
|
|
ha-color-fill-warning-normal-resting: var(--ha-color-orange-90)
|
|
ha-color-fill-warning-normal-hover: var(--ha-color-orange-80)
|
|
ha-color-fill-warning-normal-active: var(--ha-color-orange-90)
|
|
|
|
# Fill warning loud
|
|
ha-color-fill-warning-loud-resting: var(--ha-color-orange-70)
|
|
ha-color-fill-warning-loud-hover: var(--ha-color-orange-50)
|
|
ha-color-fill-warning-loud-active: var(--ha-color-orange-70)
|
|
|
|
# Fill success quiet
|
|
ha-color-fill-success-quiet-resting: var(--ha-color-green-95)
|
|
ha-color-fill-success-quiet-hover: var(--ha-color-green-90)
|
|
ha-color-fill-success-quiet-active: var(--ha-color-green-95)
|
|
|
|
# Fill success normal
|
|
ha-color-fill-success-normal-resting: var(--ha-color-green-90)
|
|
ha-color-fill-success-normal-hover: var(--ha-color-green-80)
|
|
ha-color-fill-success-normal-active: var(--ha-color-green-90)
|
|
|
|
# Fill success loud
|
|
ha-color-fill-success-loud-resting: var(--ha-color-green-50)
|
|
ha-color-fill-success-loud-hover: var(--ha-color-green-40)
|
|
ha-color-fill-success-loud-active: var(--ha-color-green-50)
|
|
|
|
# On primary
|
|
ha-color-on-primary-quiet: var(--ha-color-primary-50)
|
|
ha-color-on-primary-normal: var(--ha-color-primary-40)
|
|
ha-color-on-primary-loud: var(--white-color)
|
|
|
|
# On neutral
|
|
ha-color-on-neutral-quiet: var(--ha-color-neutral-50)
|
|
ha-color-on-neutral-normal: var(--ha-color-neutral-40)
|
|
ha-color-on-neutral-loud: var(--white-color)
|
|
|
|
# On disabled
|
|
ha-color-on-disabled-quiet: var(--ha-color-neutral-80)
|
|
ha-color-on-disabled-normal: var(--ha-color-neutral-70)
|
|
ha-color-on-disabled-loud: var(--ha-color-neutral-95)
|
|
|
|
# On danger
|
|
ha-color-on-danger-quiet: var(--ha-color-red-50)
|
|
ha-color-on-danger-normal: var(--ha-color-red-40)
|
|
ha-color-on-danger-loud: var(--white-color)
|
|
|
|
# On warning
|
|
ha-color-on-warning-quiet: var(--ha-color-orange-50)
|
|
ha-color-on-warning-normal: var(--ha-color-orange-40)
|
|
ha-color-on-warning-loud: var(--white-color)
|
|
|
|
# On success
|
|
ha-color-on-success-quiet: var(--ha-color-green-50)
|
|
ha-color-on-success-normal: var(--ha-color-green-40)
|
|
ha-color-on-success-loud: var(--white-color)
|
|
|
|
###################
|
|
# HA Other Colors #
|
|
###################
|
|
# List from the "color.globals.ts" file in home-assistant/frontend.
|
|
|
|
# Text
|
|
primary-text-color: var(--ha-color-text-primary)
|
|
secondary-text-color: var(--ha-color-text-secondary)
|
|
text-primary-color: var(--catppuccin-crust)
|
|
text-light-primary-color: var(--catppuccin-crust)
|
|
disabled-text-color: var(--catppuccin-overlay1)
|
|
|
|
# Main interface colors
|
|
# primary-color: var(--ha-color-primary-40)
|
|
dark-primary-color: var(--ha-color-primary-30)
|
|
darker-primary-color: var(--ha-color-primary-20)
|
|
light-primary-color: var(--ha-color-primary-50)
|
|
accent-color: var(--primary-color)
|
|
divider-color: rgba(var(--catppuccin-overlay1-rgb), 0.15)
|
|
outline-color: var(--catppuccin-crust)
|
|
outline-hover-color: var(--catppuccin-surface2)
|
|
|
|
# RGB
|
|
rgb-primary-color: var(--catppuccin-mauve-rgb)
|
|
rgb-accent-color: var(--catppuccin-mauve-rgb)
|
|
rgb-primary-text-color: var(--catppuccin-text-rgb)
|
|
rgb-secondary-text-color: var(--catppuccin-subtext1-rgb)
|
|
rgb-text-primary-color: var(--catppuccin-text-rgb)
|
|
rgb-card-background-color: var(--catppuccin-base-rgb)
|
|
|
|
rgb-warning-color: var(--catppuccin-yellow-rgb)
|
|
rgb-error-color: var(--catppuccin-red-rgb)
|
|
rgb-success-color: var(--catppuccin-green-rgb)
|
|
rgb-info-color: var(--catppuccin-blue-rgb)
|
|
|
|
scrollbar-thumb-color: var(--primary-color)
|
|
|
|
error-color: var(--catppuccin-red)
|
|
warning-color: var(--catppuccin-yellow)
|
|
success-color: var(--catppuccin-green)
|
|
info-color: var(--catppuccin-blue)
|
|
|
|
# Backgrounds
|
|
card-background-color: var(--catppuccin-base)
|
|
primary-background-color: var(--catppuccin-mantle)
|
|
secondary-background-color: var(--catppuccin-mantle)
|
|
clear-background-color: var(--card-background-color)
|
|
|
|
# For label-badge
|
|
label-badge-grey: var(--secondary-text-color)
|
|
|
|
# States icon
|
|
state-icon-color: var(--primary-color)
|
|
|
|
# Energy
|
|
energy-grid-consumption-color: var(--catppuccin-lavender)
|
|
energy-grid-return-color: var(--catppuccin-mauve)
|
|
energy-solar-color: var(--catppuccin-yellow)
|
|
energy-non-fossil-color: var(--catppuccin-green)
|
|
energy-battery-out-color: var(--catppuccin-teal)
|
|
energy-battery-in-color: var(--catppuccin-pink)
|
|
energy-gas-color: var(--catppuccin-red)
|
|
energy-water-color: var(--catppuccin-sky)
|
|
|
|
# Color
|
|
disabled-color: var(--catppuccin-overlay1)
|
|
red-color: var(--catppuccin-red)
|
|
pink-color: var(--catppuccin-pink)
|
|
purple-color: var(--catppuccin-mauve)
|
|
deep-purple-color: var(--catppuccin-mauve)
|
|
indigo-color: var(--catppuccin-lavender)
|
|
blue-color: var(--catppuccin-blue)
|
|
light-blue-color: var(--catppuccin-sky)
|
|
cyan-color: var(--catppuccin-teal)
|
|
teal-color: var(--catppuccin-teal)
|
|
green-color: var(--catppuccin-green)
|
|
light-green-color: var(--catppuccin-green)
|
|
lime-color: var(--catppuccin-green)
|
|
yellow-color: var(--catppuccin-yellow)
|
|
amber-color: var(--catppuccin-yellow)
|
|
orange-color: var(--catppuccin-peach)
|
|
deep-orange-color: var(--catppuccin-maroon)
|
|
brown-color: var(--catppuccin-flamingo)
|
|
light-grey-color: var(--catppuccin-surface0)
|
|
grey-color: var(--catppuccin-surface2)
|
|
dark-grey-color: var(--catppuccin-overlay1)
|
|
blue-grey-color: var(--dark-grey-color)
|
|
black-color: var(--catppuccin-text)
|
|
white-color: var(--catppuccin-crust)
|
|
|
|
# Input components
|
|
input-idle-line-color: var(--primary-text-color)
|
|
input-hover-line-color: var(--accent-color)
|
|
input-disabled-line-color: var(--disabled-text-color)
|
|
input-outlined-idle-border-color: var(--disabled-text-color)
|
|
input-outlined-hover-border-color: var(--disabled-text-color)
|
|
input-outlined-disabled-border-color: var(--disabled-text-color)
|
|
input-fill-color: var(--primary-background-color)
|
|
input-disabled-fill-color: var(--catppuccin-surface1)
|
|
input-ink-color: var(--primary-text-color)
|
|
input-label-ink-color: var(--secondary-text-color)
|
|
input-disabled-ink-color: var(--disabled-text-color)
|
|
input-dropdown-icon-color: var(--secondary-text-color)
|
|
|
|
# State color
|
|
state-active-color: var(--catppuccin-mauve)
|
|
|
|
sidebar-background-color: var(--catppuccin-crust)
|
|
switch-unchecked-color: var(--catppuccin-overlay0)
|
|
switch-unchecked-button-color: var(--switch-unchecked-color)
|
|
switch-unchecked-track-color: var(--switch-unchecked-color)
|
|
|
|
app-header-text-color: var(--primary-text-color)
|
|
app-header-background-color: var(--catppuccin-crust)
|
|
|
|
# Codemirror
|
|
codemirror-keyword: var(--catppuccin-mauve)
|
|
codemirror-operator: var(--catppuccin-sky)
|
|
codemirror-variable: var(--catppuccin-blue) # Functions
|
|
codemirror-variable-2: var(--catppuccin-text) # "Special variable"s
|
|
codemirror-variable-3: var(--catppuccin-text) # Currently unused
|
|
codemirror-builtin: var(--catppuccin-red)
|
|
codemirror-atom: var(--catppuccin-red)
|
|
codemirror-number: var(--catppuccin-peach)
|
|
codemirror-def: var(--catppuccin-text)
|
|
codemirror-string: var(--catppuccin-green)
|
|
codemirror-string-2: var(--catppuccin-green) # Currently unused
|
|
codemirror-comment: var(--catppuccin-overlay2)
|
|
codemirror-tag: var(--catppuccin-blue) # Currently unused
|
|
codemirror-meta: var(--catppuccin-overlay2)
|
|
codemirror-attribute: var(--catppuccin-yellow)
|
|
codemirror-property: var(--catppuccin-blue)
|
|
codemirror-qualifier: var(--catppuccin-peach)
|
|
codemirror-type: var(--catppuccin-yellow) # Currently unused
|
|
|
|
################
|
|
# Other colors #
|
|
################
|
|
# These colors are respected by Home Assistant (currently), but aren't
|
|
# defined directly in the main theme.
|
|
text-accent-color: var(--catppuccin-crust)
|
|
md-slider-inactive-track-color: var(--catppuccin-overlay0)
|
|
app-header-edit-background-color: var(--catppuccin-surface2)
|
|
app-header-edit-text-color: var(--primary-text-color)
|
|
|
|
mdc-ripple-color: "#aaaaaa"
|
|
mdc-linear-progress-buffer-color: "#f00"
|
|
|
|
##########
|
|
# Graphs #
|
|
##########
|
|
graph-color-1: var(--catppuccin-mauve)
|
|
graph-color-2: var(--catppuccin-green)
|
|
graph-color-3: var(--catppuccin-red)
|
|
graph-color-4: var(--catppuccin-blue)
|
|
graph-color-5: var(--catppuccin-pink)
|
|
graph-color-6: var(--catppuccin-yellow)
|
|
graph-color-7: var(--catppuccin-sky)
|
|
graph-color-8: var(--catppuccin-maroon)
|
|
graph-color-9: var(--catppuccin-lavender)
|
|
graph-color-10: var(--catppuccin-peach)
|
|
graph-color-11: var(--catppuccin-teal)
|
|
graph-color-12: var(--catppuccin-rosewater)
|
|
graph-color-13: var(--catppuccin-sapphire)
|
|
graph-color-14: var(--catppuccin-flamingo)
|
|
Catppuccin Macchiato:
|
|
modes:
|
|
dark: &macchiato
|
|
#####################
|
|
# Catppuccin Colors #
|
|
#####################
|
|
catppuccin-rosewater: "#f4dbd6"
|
|
catppuccin-rosewater-rgb: 244, 219, 214
|
|
catppuccin-flamingo: "#f0c6c6"
|
|
catppuccin-flamingo-rgb: 240, 198, 198
|
|
catppuccin-pink: "#f5bde6"
|
|
catppuccin-pink-rgb: 245, 189, 230
|
|
catppuccin-mauve: "#c6a0f6"
|
|
catppuccin-mauve-rgb: 198, 160, 246
|
|
catppuccin-red: "#ed8796"
|
|
catppuccin-red-rgb: 237, 135, 150
|
|
catppuccin-maroon: "#ee99a0"
|
|
catppuccin-maroon-rgb: 238, 153, 160
|
|
catppuccin-peach: "#f5a97f"
|
|
catppuccin-peach-rgb: 245, 169, 127
|
|
catppuccin-yellow: "#eed49f"
|
|
catppuccin-yellow-rgb: 238, 212, 159
|
|
catppuccin-green: "#a6da95"
|
|
catppuccin-green-rgb: 166, 218, 149
|
|
catppuccin-teal: "#8bd5ca"
|
|
catppuccin-teal-rgb: 139, 213, 202
|
|
catppuccin-sky: "#91d7e3"
|
|
catppuccin-sky-rgb: 145, 215, 227
|
|
catppuccin-sapphire: "#7dc4e4"
|
|
catppuccin-sapphire-rgb: 125, 196, 228
|
|
catppuccin-blue: "#8aadf4"
|
|
catppuccin-blue-rgb: 138, 173, 244
|
|
catppuccin-lavender: "#b7bdf8"
|
|
catppuccin-lavender-rgb: 183, 189, 248
|
|
catppuccin-text: "#cad3f5"
|
|
catppuccin-text-rgb: 202, 211, 245
|
|
catppuccin-subtext1: "#b8c0e0"
|
|
catppuccin-subtext1-rgb: 184, 192, 224
|
|
catppuccin-subtext0: "#a5adcb"
|
|
catppuccin-subtext0-rgb: 165, 173, 203
|
|
catppuccin-overlay2: "#939ab7"
|
|
catppuccin-overlay2-rgb: 147, 154, 183
|
|
catppuccin-overlay1: "#8087a2"
|
|
catppuccin-overlay1-rgb: 128, 135, 162
|
|
catppuccin-overlay0: "#6e738d"
|
|
catppuccin-overlay0-rgb: 110, 115, 141
|
|
catppuccin-surface2: "#5b6078"
|
|
catppuccin-surface2-rgb: 91, 96, 120
|
|
catppuccin-surface1: "#494d64"
|
|
catppuccin-surface1-rgb: 73, 77, 100
|
|
catppuccin-surface0: "#363a4f"
|
|
catppuccin-surface0-rgb: 54, 58, 79
|
|
catppuccin-base: "#24273a"
|
|
catppuccin-base-rgb: 36, 39, 58
|
|
catppuccin-mantle: "#1e2030"
|
|
catppuccin-mantle-rgb: 30, 32, 48
|
|
catppuccin-crust: "#181926"
|
|
catppuccin-crust-rgb: 24, 25, 38
|
|
|
|
################################
|
|
# Home Assistant color palette #
|
|
################################
|
|
# List from the "core.globals.ts" file in home-assistant/frontend.
|
|
# TODO: Update these once Whiskers has variant (tint / shade) support.
|
|
|
|
# Primary
|
|
# NOTE: This centers around `primary-40` rather than `primary-50` because
|
|
# HA uses `-40` as the default brand color for some reason.
|
|
ha-color-primary-05: rgb(202, 205, 245)
|
|
ha-color-primary-10: rgb(201, 198, 246)
|
|
ha-color-primary-20: rgb(200, 185, 245)
|
|
ha-color-primary-30: rgb(199, 173, 245)
|
|
ha-color-primary-40: rgb(198, 160, 246)
|
|
ha-color-primary-50: rgb(171, 140, 215)
|
|
ha-color-primary-60: rgb(145, 120, 184)
|
|
ha-color-primary-70: rgb(119, 101, 153)
|
|
ha-color-primary-80: rgb(89, 79, 120)
|
|
ha-color-primary-90: rgb(63, 59, 89)
|
|
ha-color-primary-95: rgb(49, 49, 72)
|
|
|
|
# Neutral
|
|
ha-color-neutral-05: rgb(194, 202, 236)
|
|
ha-color-neutral-10: rgb(185, 193, 226)
|
|
ha-color-neutral-20: rgb(169, 177, 208)
|
|
ha-color-neutral-30: rgb(152, 159, 189)
|
|
ha-color-neutral-40: rgb(135, 143, 170)
|
|
ha-color-neutral-50: rgb(119, 125, 151)
|
|
ha-color-neutral-60: rgb(103, 107, 133)
|
|
ha-color-neutral-70: rgb(85, 90, 114)
|
|
ha-color-neutral-80: rgb(69, 73, 95)
|
|
ha-color-neutral-90: rgb(52, 56, 76)
|
|
ha-color-neutral-95: rgb(44, 48, 67)
|
|
|
|
# Orange
|
|
ha-color-orange-05: rgb(206, 206, 233)
|
|
ha-color-orange-10: rgb(211, 203, 221)
|
|
ha-color-orange-20: rgb(219, 195, 198)
|
|
ha-color-orange-30: rgb(228, 185, 174)
|
|
ha-color-orange-40: rgb(236, 177, 151)
|
|
ha-color-orange-50: rgb(245, 169, 127)
|
|
ha-color-orange-60: rgb(203, 143, 114)
|
|
ha-color-orange-70: rgb(161, 117, 99)
|
|
ha-color-orange-80: rgb(120, 91, 86)
|
|
ha-color-orange-90: rgb(78, 65, 71)
|
|
ha-color-orange-95: rgb(57, 52, 65)
|
|
|
|
# Red
|
|
ha-color-red-05: rgb(205, 203, 235)
|
|
ha-color-red-10: rgb(209, 196, 226)
|
|
ha-color-red-20: rgb(216, 181, 207)
|
|
ha-color-red-30: rgb(223, 165, 188)
|
|
ha-color-red-40: rgb(230, 150, 169)
|
|
ha-color-red-50: rgb(237, 135, 150)
|
|
ha-color-red-60: rgb(197, 116, 132)
|
|
ha-color-red-70: rgb(156, 97, 113)
|
|
ha-color-red-80: rgb(117, 77, 95)
|
|
ha-color-red-90: rgb(76, 58, 76)
|
|
ha-color-red-95: rgb(56, 49, 67)
|
|
|
|
# Green
|
|
ha-color-green-05: rgb(198, 211, 235)
|
|
ha-color-green-10: rgb(195, 213, 226)
|
|
ha-color-green-20: rgb(187, 214, 207)
|
|
ha-color-green-30: rgb(181, 215, 187)
|
|
ha-color-green-40: rgb(173, 216, 168)
|
|
ha-color-green-50: rgb(166, 218, 149)
|
|
ha-color-green-60: rgb(140, 182, 131)
|
|
ha-color-green-70: rgb(114, 147, 112)
|
|
ha-color-green-80: rgb(88, 110, 95)
|
|
ha-color-green-90: rgb(62, 75, 76)
|
|
ha-color-green-95: rgb(49, 57, 67)
|
|
|
|
######################
|
|
# HA Semantic Colors #
|
|
######################
|
|
# List from the "semantic.globals.ts" file in home-assistant/frontend.
|
|
|
|
ha-color-focus: var(--ha-color-orange-60)
|
|
|
|
# Text
|
|
ha-color-text-primary: var(--catppuccin-text)
|
|
ha-color-text-secondary: var(--catppuccin-subtext1)
|
|
ha-color-text-disabled: var(--catppuccin-overlay1)
|
|
ha-color-text-link: var(--catppuccin-blue)
|
|
|
|
# Border primary
|
|
ha-color-border-primary-quiet: var(--ha-color-primary-80)
|
|
ha-color-border-primary-normal: var(--ha-color-primary-70)
|
|
ha-color-border-primary-loud: var(--ha-color-primary-40)
|
|
|
|
# Border neutral
|
|
ha-color-border-neutral-quiet: var(--ha-color-neutral-80)
|
|
ha-color-border-neutral-normal: var(--ha-color-neutral-60)
|
|
ha-color-border-neutral-loud: var(--ha-color-neutral-40)
|
|
|
|
# Border danger
|
|
ha-color-border-danger-quiet: var(--ha-color-red-80)
|
|
ha-color-border-danger-normal: var(--ha-color-red-70)
|
|
ha-color-border-danger-loud: var(--ha-color-red-40)
|
|
|
|
# Border warning
|
|
ha-color-border-warning-quiet: var(--ha-color-orange-80)
|
|
ha-color-border-warning-normal: var(--ha-color-orange-70)
|
|
ha-color-border-warning-loud: var(--ha-color-orange-40)
|
|
|
|
# Border success
|
|
ha-color-border-success-quiet: var(--ha-color-green-80)
|
|
ha-color-border-success-normal: var(--ha-color-green-70)
|
|
ha-color-border-success-loud: var(--ha-color-green-40)
|
|
|
|
# Fill primary quiet
|
|
ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95)
|
|
ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90)
|
|
ha-color-fill-primary-quiet-active: var(--ha-color-primary-95)
|
|
|
|
# Fill primary normal
|
|
ha-color-fill-primary-normal-resting: var(--ha-color-primary-90)
|
|
ha-color-fill-primary-normal-hover: var(--ha-color-primary-80)
|
|
ha-color-fill-primary-normal-active: var(--ha-color-primary-90)
|
|
|
|
# Fill primary loud
|
|
ha-color-fill-primary-loud-resting: var(--ha-color-primary-40)
|
|
ha-color-fill-primary-loud-hover: var(--ha-color-primary-30)
|
|
ha-color-fill-primary-loud-active: var(--ha-color-primary-40)
|
|
|
|
# Fill neutral quiet
|
|
ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95)
|
|
ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90)
|
|
ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95)
|
|
|
|
# Fill neutral normal
|
|
ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90)
|
|
ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80)
|
|
ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90)
|
|
|
|
# Fill neutral loud
|
|
ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40)
|
|
ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30)
|
|
ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40)
|
|
|
|
# Fill disabled quiet
|
|
ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95)
|
|
|
|
# Fill disabled normal
|
|
ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95)
|
|
|
|
# Fill disabled loud
|
|
ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80)
|
|
|
|
# Fill danger quiet
|
|
ha-color-fill-danger-quiet-resting: var(--ha-color-red-95)
|
|
ha-color-fill-danger-quiet-hover: var(--ha-color-red-90)
|
|
ha-color-fill-danger-quiet-active: var(--ha-color-red-95)
|
|
|
|
# Fill danger normal
|
|
ha-color-fill-danger-normal-resting: var(--ha-color-red-90)
|
|
ha-color-fill-danger-normal-hover: var(--ha-color-red-80)
|
|
ha-color-fill-danger-normal-active: var(--ha-color-red-90)
|
|
|
|
# Fill danger loud
|
|
ha-color-fill-danger-loud-resting: var(--ha-color-red-50)
|
|
ha-color-fill-danger-loud-hover: var(--ha-color-red-40)
|
|
ha-color-fill-danger-loud-active: var(--ha-color-red-50)
|
|
|
|
# Fill warning quiet
|
|
ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95)
|
|
ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90)
|
|
ha-color-fill-warning-quiet-active: var(--ha-color-orange-95)
|
|
|
|
# Fill warning normal
|
|
ha-color-fill-warning-normal-resting: var(--ha-color-orange-90)
|
|
ha-color-fill-warning-normal-hover: var(--ha-color-orange-80)
|
|
ha-color-fill-warning-normal-active: var(--ha-color-orange-90)
|
|
|
|
# Fill warning loud
|
|
ha-color-fill-warning-loud-resting: var(--ha-color-orange-70)
|
|
ha-color-fill-warning-loud-hover: var(--ha-color-orange-50)
|
|
ha-color-fill-warning-loud-active: var(--ha-color-orange-70)
|
|
|
|
# Fill success quiet
|
|
ha-color-fill-success-quiet-resting: var(--ha-color-green-95)
|
|
ha-color-fill-success-quiet-hover: var(--ha-color-green-90)
|
|
ha-color-fill-success-quiet-active: var(--ha-color-green-95)
|
|
|
|
# Fill success normal
|
|
ha-color-fill-success-normal-resting: var(--ha-color-green-90)
|
|
ha-color-fill-success-normal-hover: var(--ha-color-green-80)
|
|
ha-color-fill-success-normal-active: var(--ha-color-green-90)
|
|
|
|
# Fill success loud
|
|
ha-color-fill-success-loud-resting: var(--ha-color-green-50)
|
|
ha-color-fill-success-loud-hover: var(--ha-color-green-40)
|
|
ha-color-fill-success-loud-active: var(--ha-color-green-50)
|
|
|
|
# On primary
|
|
ha-color-on-primary-quiet: var(--ha-color-primary-50)
|
|
ha-color-on-primary-normal: var(--ha-color-primary-40)
|
|
ha-color-on-primary-loud: var(--white-color)
|
|
|
|
# On neutral
|
|
ha-color-on-neutral-quiet: var(--ha-color-neutral-50)
|
|
ha-color-on-neutral-normal: var(--ha-color-neutral-40)
|
|
ha-color-on-neutral-loud: var(--white-color)
|
|
|
|
# On disabled
|
|
ha-color-on-disabled-quiet: var(--ha-color-neutral-80)
|
|
ha-color-on-disabled-normal: var(--ha-color-neutral-70)
|
|
ha-color-on-disabled-loud: var(--ha-color-neutral-95)
|
|
|
|
# On danger
|
|
ha-color-on-danger-quiet: var(--ha-color-red-50)
|
|
ha-color-on-danger-normal: var(--ha-color-red-40)
|
|
ha-color-on-danger-loud: var(--white-color)
|
|
|
|
# On warning
|
|
ha-color-on-warning-quiet: var(--ha-color-orange-50)
|
|
ha-color-on-warning-normal: var(--ha-color-orange-40)
|
|
ha-color-on-warning-loud: var(--white-color)
|
|
|
|
# On success
|
|
ha-color-on-success-quiet: var(--ha-color-green-50)
|
|
ha-color-on-success-normal: var(--ha-color-green-40)
|
|
ha-color-on-success-loud: var(--white-color)
|
|
|
|
###################
|
|
# HA Other Colors #
|
|
###################
|
|
# List from the "color.globals.ts" file in home-assistant/frontend.
|
|
|
|
# Text
|
|
primary-text-color: var(--ha-color-text-primary)
|
|
secondary-text-color: var(--ha-color-text-secondary)
|
|
text-primary-color: var(--catppuccin-crust)
|
|
text-light-primary-color: var(--catppuccin-crust)
|
|
disabled-text-color: var(--catppuccin-overlay1)
|
|
|
|
# Main interface colors
|
|
# primary-color: var(--ha-color-primary-40)
|
|
dark-primary-color: var(--ha-color-primary-30)
|
|
darker-primary-color: var(--ha-color-primary-20)
|
|
light-primary-color: var(--ha-color-primary-50)
|
|
accent-color: var(--primary-color)
|
|
divider-color: rgba(var(--catppuccin-overlay1-rgb), 0.15)
|
|
outline-color: var(--catppuccin-crust)
|
|
outline-hover-color: var(--catppuccin-surface2)
|
|
|
|
# RGB
|
|
rgb-primary-color: var(--catppuccin-mauve-rgb)
|
|
rgb-accent-color: var(--catppuccin-mauve-rgb)
|
|
rgb-primary-text-color: var(--catppuccin-text-rgb)
|
|
rgb-secondary-text-color: var(--catppuccin-subtext1-rgb)
|
|
rgb-text-primary-color: var(--catppuccin-text-rgb)
|
|
rgb-card-background-color: var(--catppuccin-base-rgb)
|
|
|
|
rgb-warning-color: var(--catppuccin-yellow-rgb)
|
|
rgb-error-color: var(--catppuccin-red-rgb)
|
|
rgb-success-color: var(--catppuccin-green-rgb)
|
|
rgb-info-color: var(--catppuccin-blue-rgb)
|
|
|
|
scrollbar-thumb-color: var(--primary-color)
|
|
|
|
error-color: var(--catppuccin-red)
|
|
warning-color: var(--catppuccin-yellow)
|
|
success-color: var(--catppuccin-green)
|
|
info-color: var(--catppuccin-blue)
|
|
|
|
# Backgrounds
|
|
card-background-color: var(--catppuccin-base)
|
|
primary-background-color: var(--catppuccin-mantle)
|
|
secondary-background-color: var(--catppuccin-mantle)
|
|
clear-background-color: var(--card-background-color)
|
|
|
|
# For label-badge
|
|
label-badge-grey: var(--secondary-text-color)
|
|
|
|
# States icon
|
|
state-icon-color: var(--primary-color)
|
|
|
|
# Energy
|
|
energy-grid-consumption-color: var(--catppuccin-lavender)
|
|
energy-grid-return-color: var(--catppuccin-mauve)
|
|
energy-solar-color: var(--catppuccin-yellow)
|
|
energy-non-fossil-color: var(--catppuccin-green)
|
|
energy-battery-out-color: var(--catppuccin-teal)
|
|
energy-battery-in-color: var(--catppuccin-pink)
|
|
energy-gas-color: var(--catppuccin-red)
|
|
energy-water-color: var(--catppuccin-sky)
|
|
|
|
# Color
|
|
disabled-color: var(--catppuccin-overlay1)
|
|
red-color: var(--catppuccin-red)
|
|
pink-color: var(--catppuccin-pink)
|
|
purple-color: var(--catppuccin-mauve)
|
|
deep-purple-color: var(--catppuccin-mauve)
|
|
indigo-color: var(--catppuccin-lavender)
|
|
blue-color: var(--catppuccin-blue)
|
|
light-blue-color: var(--catppuccin-sky)
|
|
cyan-color: var(--catppuccin-teal)
|
|
teal-color: var(--catppuccin-teal)
|
|
green-color: var(--catppuccin-green)
|
|
light-green-color: var(--catppuccin-green)
|
|
lime-color: var(--catppuccin-green)
|
|
yellow-color: var(--catppuccin-yellow)
|
|
amber-color: var(--catppuccin-yellow)
|
|
orange-color: var(--catppuccin-peach)
|
|
deep-orange-color: var(--catppuccin-maroon)
|
|
brown-color: var(--catppuccin-flamingo)
|
|
light-grey-color: var(--catppuccin-surface0)
|
|
grey-color: var(--catppuccin-surface2)
|
|
dark-grey-color: var(--catppuccin-overlay1)
|
|
blue-grey-color: var(--dark-grey-color)
|
|
black-color: var(--catppuccin-text)
|
|
white-color: var(--catppuccin-crust)
|
|
|
|
# Input components
|
|
input-idle-line-color: var(--primary-text-color)
|
|
input-hover-line-color: var(--accent-color)
|
|
input-disabled-line-color: var(--disabled-text-color)
|
|
input-outlined-idle-border-color: var(--disabled-text-color)
|
|
input-outlined-hover-border-color: var(--disabled-text-color)
|
|
input-outlined-disabled-border-color: var(--disabled-text-color)
|
|
input-fill-color: var(--primary-background-color)
|
|
input-disabled-fill-color: var(--catppuccin-surface1)
|
|
input-ink-color: var(--primary-text-color)
|
|
input-label-ink-color: var(--secondary-text-color)
|
|
input-disabled-ink-color: var(--disabled-text-color)
|
|
input-dropdown-icon-color: var(--secondary-text-color)
|
|
|
|
# State color
|
|
state-active-color: var(--catppuccin-mauve)
|
|
|
|
sidebar-background-color: var(--catppuccin-crust)
|
|
switch-unchecked-color: var(--catppuccin-overlay0)
|
|
switch-unchecked-button-color: var(--switch-unchecked-color)
|
|
switch-unchecked-track-color: var(--switch-unchecked-color)
|
|
|
|
app-header-text-color: var(--primary-text-color)
|
|
app-header-background-color: var(--catppuccin-crust)
|
|
|
|
# Codemirror
|
|
codemirror-keyword: var(--catppuccin-mauve)
|
|
codemirror-operator: var(--catppuccin-sky)
|
|
codemirror-variable: var(--catppuccin-blue) # Functions
|
|
codemirror-variable-2: var(--catppuccin-text) # "Special variable"s
|
|
codemirror-variable-3: var(--catppuccin-text) # Currently unused
|
|
codemirror-builtin: var(--catppuccin-red)
|
|
codemirror-atom: var(--catppuccin-red)
|
|
codemirror-number: var(--catppuccin-peach)
|
|
codemirror-def: var(--catppuccin-text)
|
|
codemirror-string: var(--catppuccin-green)
|
|
codemirror-string-2: var(--catppuccin-green) # Currently unused
|
|
codemirror-comment: var(--catppuccin-overlay2)
|
|
codemirror-tag: var(--catppuccin-blue) # Currently unused
|
|
codemirror-meta: var(--catppuccin-overlay2)
|
|
codemirror-attribute: var(--catppuccin-yellow)
|
|
codemirror-property: var(--catppuccin-blue)
|
|
codemirror-qualifier: var(--catppuccin-peach)
|
|
codemirror-type: var(--catppuccin-yellow) # Currently unused
|
|
|
|
################
|
|
# Other colors #
|
|
################
|
|
# These colors are respected by Home Assistant (currently), but aren't
|
|
# defined directly in the main theme.
|
|
text-accent-color: var(--catppuccin-crust)
|
|
md-slider-inactive-track-color: var(--catppuccin-overlay0)
|
|
app-header-edit-background-color: var(--catppuccin-surface2)
|
|
app-header-edit-text-color: var(--primary-text-color)
|
|
|
|
mdc-ripple-color: "#aaaaaa"
|
|
mdc-linear-progress-buffer-color: "#f00"
|
|
|
|
##########
|
|
# Graphs #
|
|
##########
|
|
graph-color-1: var(--catppuccin-mauve)
|
|
graph-color-2: var(--catppuccin-green)
|
|
graph-color-3: var(--catppuccin-red)
|
|
graph-color-4: var(--catppuccin-blue)
|
|
graph-color-5: var(--catppuccin-pink)
|
|
graph-color-6: var(--catppuccin-yellow)
|
|
graph-color-7: var(--catppuccin-sky)
|
|
graph-color-8: var(--catppuccin-maroon)
|
|
graph-color-9: var(--catppuccin-lavender)
|
|
graph-color-10: var(--catppuccin-peach)
|
|
graph-color-11: var(--catppuccin-teal)
|
|
graph-color-12: var(--catppuccin-rosewater)
|
|
graph-color-13: var(--catppuccin-sapphire)
|
|
graph-color-14: var(--catppuccin-flamingo)
|
|
Catppuccin Mocha:
|
|
modes:
|
|
dark: &mocha
|
|
#####################
|
|
# Catppuccin Colors #
|
|
#####################
|
|
catppuccin-rosewater: "#f5e0dc"
|
|
catppuccin-rosewater-rgb: 245, 224, 220
|
|
catppuccin-flamingo: "#f2cdcd"
|
|
catppuccin-flamingo-rgb: 242, 205, 205
|
|
catppuccin-pink: "#f5c2e7"
|
|
catppuccin-pink-rgb: 245, 194, 231
|
|
catppuccin-mauve: "#cba6f7"
|
|
catppuccin-mauve-rgb: 203, 166, 247
|
|
catppuccin-red: "#f38ba8"
|
|
catppuccin-red-rgb: 243, 139, 168
|
|
catppuccin-maroon: "#eba0ac"
|
|
catppuccin-maroon-rgb: 235, 160, 172
|
|
catppuccin-peach: "#fab387"
|
|
catppuccin-peach-rgb: 250, 179, 135
|
|
catppuccin-yellow: "#f9e2af"
|
|
catppuccin-yellow-rgb: 249, 226, 175
|
|
catppuccin-green: "#a6e3a1"
|
|
catppuccin-green-rgb: 166, 227, 161
|
|
catppuccin-teal: "#94e2d5"
|
|
catppuccin-teal-rgb: 148, 226, 213
|
|
catppuccin-sky: "#89dceb"
|
|
catppuccin-sky-rgb: 137, 220, 235
|
|
catppuccin-sapphire: "#74c7ec"
|
|
catppuccin-sapphire-rgb: 116, 199, 236
|
|
catppuccin-blue: "#89b4fa"
|
|
catppuccin-blue-rgb: 137, 180, 250
|
|
catppuccin-lavender: "#b4befe"
|
|
catppuccin-lavender-rgb: 180, 190, 254
|
|
catppuccin-text: "#cdd6f4"
|
|
catppuccin-text-rgb: 205, 214, 244
|
|
catppuccin-subtext1: "#bac2de"
|
|
catppuccin-subtext1-rgb: 186, 194, 222
|
|
catppuccin-subtext0: "#a6adc8"
|
|
catppuccin-subtext0-rgb: 166, 173, 200
|
|
catppuccin-overlay2: "#9399b2"
|
|
catppuccin-overlay2-rgb: 147, 153, 178
|
|
catppuccin-overlay1: "#7f849c"
|
|
catppuccin-overlay1-rgb: 127, 132, 156
|
|
catppuccin-overlay0: "#6c7086"
|
|
catppuccin-overlay0-rgb: 108, 112, 134
|
|
catppuccin-surface2: "#585b70"
|
|
catppuccin-surface2-rgb: 88, 91, 112
|
|
catppuccin-surface1: "#45475a"
|
|
catppuccin-surface1-rgb: 69, 71, 90
|
|
catppuccin-surface0: "#313244"
|
|
catppuccin-surface0-rgb: 49, 50, 68
|
|
catppuccin-base: "#1e1e2e"
|
|
catppuccin-base-rgb: 30, 30, 46
|
|
catppuccin-mantle: "#181825"
|
|
catppuccin-mantle-rgb: 24, 24, 37
|
|
catppuccin-crust: "#11111b"
|
|
catppuccin-crust-rgb: 17, 17, 27
|
|
|
|
################################
|
|
# Home Assistant color palette #
|
|
################################
|
|
# List from the "core.globals.ts" file in home-assistant/frontend.
|
|
# TODO: Update these once Whiskers has variant (tint / shade) support.
|
|
|
|
# Primary
|
|
# NOTE: This centers around `primary-40` rather than `primary-50` because
|
|
# HA uses `-40` as the default brand color for some reason.
|
|
ha-color-primary-05: rgb(204, 207, 244)
|
|
ha-color-primary-10: rgb(205, 202, 245)
|
|
ha-color-primary-20: rgb(204, 190, 246)
|
|
ha-color-primary-30: rgb(203, 178, 246)
|
|
ha-color-primary-40: rgb(203, 166, 247)
|
|
ha-color-primary-50: rgb(174, 143, 213)
|
|
ha-color-primary-60: rgb(146, 121, 181)
|
|
ha-color-primary-70: rgb(118, 100, 149)
|
|
ha-color-primary-80: rgb(87, 75, 112)
|
|
ha-color-primary-90: rgb(59, 53, 80)
|
|
ha-color-primary-95: rgb(44, 41, 61)
|
|
|
|
# Neutral
|
|
ha-color-neutral-05: rgb(197, 205, 234)
|
|
ha-color-neutral-10: rgb(187, 195, 224)
|
|
ha-color-neutral-20: rgb(170, 177, 204)
|
|
ha-color-neutral-30: rgb(152, 158, 184)
|
|
ha-color-neutral-40: rgb(135, 140, 164)
|
|
ha-color-neutral-50: rgb(117, 122, 145)
|
|
ha-color-neutral-60: rgb(100, 104, 126)
|
|
ha-color-neutral-70: rgb(82, 85, 105)
|
|
ha-color-neutral-80: rgb(65, 67, 86)
|
|
ha-color-neutral-90: rgb(47, 48, 65)
|
|
ha-color-neutral-95: rgb(38, 39, 56)
|
|
|
|
# Orange
|
|
ha-color-orange-05: rgb(209, 210, 233)
|
|
ha-color-orange-10: rgb(214, 207, 222)
|
|
ha-color-orange-20: rgb(223, 200, 200)
|
|
ha-color-orange-30: rgb(232, 193, 179)
|
|
ha-color-orange-40: rgb(241, 186, 157)
|
|
ha-color-orange-50: rgb(250, 179, 135)
|
|
ha-color-orange-60: rgb(206, 149, 117)
|
|
ha-color-orange-70: rgb(162, 119, 99)
|
|
ha-color-orange-80: rgb(118, 90, 82)
|
|
ha-color-orange-90: rgb(74, 60, 64)
|
|
ha-color-orange-95: rgb(52, 45, 55)
|
|
|
|
# Red
|
|
ha-color-red-05: rgb(209, 206, 236)
|
|
ha-color-red-10: rgb(213, 199, 229)
|
|
ha-color-red-20: rgb(220, 184, 213)
|
|
ha-color-red-30: rgb(228, 169, 199)
|
|
ha-color-red-40: rgb(235, 154, 183)
|
|
ha-color-red-50: rgb(243, 139, 168)
|
|
ha-color-red-60: rgb(200, 117, 143)
|
|
ha-color-red-70: rgb(158, 95, 119)
|
|
ha-color-red-80: rgb(115, 74, 95)
|
|
ha-color-red-90: rgb(73, 52, 71)
|
|
ha-color-red-95: rgb(52, 41, 58)
|
|
|
|
# Green
|
|
ha-color-green-05: rgb(201, 215, 235)
|
|
ha-color-green-10: rgb(197, 216, 227)
|
|
ha-color-green-20: rgb(189, 219, 210)
|
|
ha-color-green-30: rgb(182, 222, 195)
|
|
ha-color-green-40: rgb(174, 225, 178)
|
|
ha-color-green-50: rgb(166, 227, 161)
|
|
ha-color-green-60: rgb(139, 188, 138)
|
|
ha-color-green-70: rgb(112, 148, 115)
|
|
ha-color-green-80: rgb(84, 109, 92)
|
|
ha-color-green-90: rgb(57, 69, 69)
|
|
ha-color-green-95: rgb(44, 50, 57)
|
|
|
|
######################
|
|
# HA Semantic Colors #
|
|
######################
|
|
# List from the "semantic.globals.ts" file in home-assistant/frontend.
|
|
|
|
ha-color-focus: var(--ha-color-orange-60)
|
|
|
|
# Text
|
|
ha-color-text-primary: var(--catppuccin-text)
|
|
ha-color-text-secondary: var(--catppuccin-subtext1)
|
|
ha-color-text-disabled: var(--catppuccin-overlay1)
|
|
ha-color-text-link: var(--catppuccin-blue)
|
|
|
|
# Border primary
|
|
ha-color-border-primary-quiet: var(--ha-color-primary-80)
|
|
ha-color-border-primary-normal: var(--ha-color-primary-70)
|
|
ha-color-border-primary-loud: var(--ha-color-primary-40)
|
|
|
|
# Border neutral
|
|
ha-color-border-neutral-quiet: var(--ha-color-neutral-80)
|
|
ha-color-border-neutral-normal: var(--ha-color-neutral-60)
|
|
ha-color-border-neutral-loud: var(--ha-color-neutral-40)
|
|
|
|
# Border danger
|
|
ha-color-border-danger-quiet: var(--ha-color-red-80)
|
|
ha-color-border-danger-normal: var(--ha-color-red-70)
|
|
ha-color-border-danger-loud: var(--ha-color-red-40)
|
|
|
|
# Border warning
|
|
ha-color-border-warning-quiet: var(--ha-color-orange-80)
|
|
ha-color-border-warning-normal: var(--ha-color-orange-70)
|
|
ha-color-border-warning-loud: var(--ha-color-orange-40)
|
|
|
|
# Border success
|
|
ha-color-border-success-quiet: var(--ha-color-green-80)
|
|
ha-color-border-success-normal: var(--ha-color-green-70)
|
|
ha-color-border-success-loud: var(--ha-color-green-40)
|
|
|
|
# Fill primary quiet
|
|
ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95)
|
|
ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90)
|
|
ha-color-fill-primary-quiet-active: var(--ha-color-primary-95)
|
|
|
|
# Fill primary normal
|
|
ha-color-fill-primary-normal-resting: var(--ha-color-primary-90)
|
|
ha-color-fill-primary-normal-hover: var(--ha-color-primary-80)
|
|
ha-color-fill-primary-normal-active: var(--ha-color-primary-90)
|
|
|
|
# Fill primary loud
|
|
ha-color-fill-primary-loud-resting: var(--ha-color-primary-40)
|
|
ha-color-fill-primary-loud-hover: var(--ha-color-primary-30)
|
|
ha-color-fill-primary-loud-active: var(--ha-color-primary-40)
|
|
|
|
# Fill neutral quiet
|
|
ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95)
|
|
ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90)
|
|
ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95)
|
|
|
|
# Fill neutral normal
|
|
ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90)
|
|
ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80)
|
|
ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90)
|
|
|
|
# Fill neutral loud
|
|
ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40)
|
|
ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30)
|
|
ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40)
|
|
|
|
# Fill disabled quiet
|
|
ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95)
|
|
|
|
# Fill disabled normal
|
|
ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95)
|
|
|
|
# Fill disabled loud
|
|
ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80)
|
|
|
|
# Fill danger quiet
|
|
ha-color-fill-danger-quiet-resting: var(--ha-color-red-95)
|
|
ha-color-fill-danger-quiet-hover: var(--ha-color-red-90)
|
|
ha-color-fill-danger-quiet-active: var(--ha-color-red-95)
|
|
|
|
# Fill danger normal
|
|
ha-color-fill-danger-normal-resting: var(--ha-color-red-90)
|
|
ha-color-fill-danger-normal-hover: var(--ha-color-red-80)
|
|
ha-color-fill-danger-normal-active: var(--ha-color-red-90)
|
|
|
|
# Fill danger loud
|
|
ha-color-fill-danger-loud-resting: var(--ha-color-red-50)
|
|
ha-color-fill-danger-loud-hover: var(--ha-color-red-40)
|
|
ha-color-fill-danger-loud-active: var(--ha-color-red-50)
|
|
|
|
# Fill warning quiet
|
|
ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95)
|
|
ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90)
|
|
ha-color-fill-warning-quiet-active: var(--ha-color-orange-95)
|
|
|
|
# Fill warning normal
|
|
ha-color-fill-warning-normal-resting: var(--ha-color-orange-90)
|
|
ha-color-fill-warning-normal-hover: var(--ha-color-orange-80)
|
|
ha-color-fill-warning-normal-active: var(--ha-color-orange-90)
|
|
|
|
# Fill warning loud
|
|
ha-color-fill-warning-loud-resting: var(--ha-color-orange-70)
|
|
ha-color-fill-warning-loud-hover: var(--ha-color-orange-50)
|
|
ha-color-fill-warning-loud-active: var(--ha-color-orange-70)
|
|
|
|
# Fill success quiet
|
|
ha-color-fill-success-quiet-resting: var(--ha-color-green-95)
|
|
ha-color-fill-success-quiet-hover: var(--ha-color-green-90)
|
|
ha-color-fill-success-quiet-active: var(--ha-color-green-95)
|
|
|
|
# Fill success normal
|
|
ha-color-fill-success-normal-resting: var(--ha-color-green-90)
|
|
ha-color-fill-success-normal-hover: var(--ha-color-green-80)
|
|
ha-color-fill-success-normal-active: var(--ha-color-green-90)
|
|
|
|
# Fill success loud
|
|
ha-color-fill-success-loud-resting: var(--ha-color-green-50)
|
|
ha-color-fill-success-loud-hover: var(--ha-color-green-40)
|
|
ha-color-fill-success-loud-active: var(--ha-color-green-50)
|
|
|
|
# On primary
|
|
ha-color-on-primary-quiet: var(--ha-color-primary-50)
|
|
ha-color-on-primary-normal: var(--ha-color-primary-40)
|
|
ha-color-on-primary-loud: var(--white-color)
|
|
|
|
# On neutral
|
|
ha-color-on-neutral-quiet: var(--ha-color-neutral-50)
|
|
ha-color-on-neutral-normal: var(--ha-color-neutral-40)
|
|
ha-color-on-neutral-loud: var(--white-color)
|
|
|
|
# On disabled
|
|
ha-color-on-disabled-quiet: var(--ha-color-neutral-80)
|
|
ha-color-on-disabled-normal: var(--ha-color-neutral-70)
|
|
ha-color-on-disabled-loud: var(--ha-color-neutral-95)
|
|
|
|
# On danger
|
|
ha-color-on-danger-quiet: var(--ha-color-red-50)
|
|
ha-color-on-danger-normal: var(--ha-color-red-40)
|
|
ha-color-on-danger-loud: var(--white-color)
|
|
|
|
# On warning
|
|
ha-color-on-warning-quiet: var(--ha-color-orange-50)
|
|
ha-color-on-warning-normal: var(--ha-color-orange-40)
|
|
ha-color-on-warning-loud: var(--white-color)
|
|
|
|
# On success
|
|
ha-color-on-success-quiet: var(--ha-color-green-50)
|
|
ha-color-on-success-normal: var(--ha-color-green-40)
|
|
ha-color-on-success-loud: var(--white-color)
|
|
|
|
###################
|
|
# HA Other Colors #
|
|
###################
|
|
# List from the "color.globals.ts" file in home-assistant/frontend.
|
|
|
|
# Text
|
|
primary-text-color: var(--ha-color-text-primary)
|
|
secondary-text-color: var(--ha-color-text-secondary)
|
|
text-primary-color: var(--catppuccin-crust)
|
|
text-light-primary-color: var(--catppuccin-crust)
|
|
disabled-text-color: var(--catppuccin-overlay1)
|
|
|
|
# Main interface colors
|
|
# primary-color: var(--ha-color-primary-40)
|
|
dark-primary-color: var(--ha-color-primary-30)
|
|
darker-primary-color: var(--ha-color-primary-20)
|
|
light-primary-color: var(--ha-color-primary-50)
|
|
accent-color: var(--primary-color)
|
|
divider-color: rgba(var(--catppuccin-overlay1-rgb), 0.15)
|
|
outline-color: var(--catppuccin-crust)
|
|
outline-hover-color: var(--catppuccin-surface2)
|
|
|
|
# RGB
|
|
rgb-primary-color: var(--catppuccin-mauve-rgb)
|
|
rgb-accent-color: var(--catppuccin-mauve-rgb)
|
|
rgb-primary-text-color: var(--catppuccin-text-rgb)
|
|
rgb-secondary-text-color: var(--catppuccin-subtext1-rgb)
|
|
rgb-text-primary-color: var(--catppuccin-text-rgb)
|
|
rgb-card-background-color: var(--catppuccin-base-rgb)
|
|
|
|
rgb-warning-color: var(--catppuccin-yellow-rgb)
|
|
rgb-error-color: var(--catppuccin-red-rgb)
|
|
rgb-success-color: var(--catppuccin-green-rgb)
|
|
rgb-info-color: var(--catppuccin-blue-rgb)
|
|
|
|
scrollbar-thumb-color: var(--primary-color)
|
|
|
|
error-color: var(--catppuccin-red)
|
|
warning-color: var(--catppuccin-yellow)
|
|
success-color: var(--catppuccin-green)
|
|
info-color: var(--catppuccin-blue)
|
|
|
|
# Backgrounds
|
|
card-background-color: var(--catppuccin-base)
|
|
primary-background-color: var(--catppuccin-mantle)
|
|
secondary-background-color: var(--catppuccin-mantle)
|
|
clear-background-color: var(--card-background-color)
|
|
|
|
# For label-badge
|
|
label-badge-grey: var(--secondary-text-color)
|
|
|
|
# States icon
|
|
state-icon-color: var(--primary-color)
|
|
|
|
# Energy
|
|
energy-grid-consumption-color: var(--catppuccin-lavender)
|
|
energy-grid-return-color: var(--catppuccin-mauve)
|
|
energy-solar-color: var(--catppuccin-yellow)
|
|
energy-non-fossil-color: var(--catppuccin-green)
|
|
energy-battery-out-color: var(--catppuccin-teal)
|
|
energy-battery-in-color: var(--catppuccin-pink)
|
|
energy-gas-color: var(--catppuccin-red)
|
|
energy-water-color: var(--catppuccin-sky)
|
|
|
|
# Color
|
|
disabled-color: var(--catppuccin-overlay1)
|
|
red-color: var(--catppuccin-red)
|
|
pink-color: var(--catppuccin-pink)
|
|
purple-color: var(--catppuccin-mauve)
|
|
deep-purple-color: var(--catppuccin-mauve)
|
|
indigo-color: var(--catppuccin-lavender)
|
|
blue-color: var(--catppuccin-blue)
|
|
light-blue-color: var(--catppuccin-sky)
|
|
cyan-color: var(--catppuccin-teal)
|
|
teal-color: var(--catppuccin-teal)
|
|
green-color: var(--catppuccin-green)
|
|
light-green-color: var(--catppuccin-green)
|
|
lime-color: var(--catppuccin-green)
|
|
yellow-color: var(--catppuccin-yellow)
|
|
amber-color: var(--catppuccin-yellow)
|
|
orange-color: var(--catppuccin-peach)
|
|
deep-orange-color: var(--catppuccin-maroon)
|
|
brown-color: var(--catppuccin-flamingo)
|
|
light-grey-color: var(--catppuccin-surface0)
|
|
grey-color: var(--catppuccin-surface2)
|
|
dark-grey-color: var(--catppuccin-overlay1)
|
|
blue-grey-color: var(--dark-grey-color)
|
|
black-color: var(--catppuccin-text)
|
|
white-color: var(--catppuccin-crust)
|
|
|
|
# Input components
|
|
input-idle-line-color: var(--primary-text-color)
|
|
input-hover-line-color: var(--accent-color)
|
|
input-disabled-line-color: var(--disabled-text-color)
|
|
input-outlined-idle-border-color: var(--disabled-text-color)
|
|
input-outlined-hover-border-color: var(--disabled-text-color)
|
|
input-outlined-disabled-border-color: var(--disabled-text-color)
|
|
input-fill-color: var(--primary-background-color)
|
|
input-disabled-fill-color: var(--catppuccin-surface1)
|
|
input-ink-color: var(--primary-text-color)
|
|
input-label-ink-color: var(--secondary-text-color)
|
|
input-disabled-ink-color: var(--disabled-text-color)
|
|
input-dropdown-icon-color: var(--secondary-text-color)
|
|
|
|
# State color
|
|
state-active-color: var(--catppuccin-mauve)
|
|
|
|
sidebar-background-color: var(--catppuccin-crust)
|
|
switch-unchecked-color: var(--catppuccin-overlay0)
|
|
switch-unchecked-button-color: var(--switch-unchecked-color)
|
|
switch-unchecked-track-color: var(--switch-unchecked-color)
|
|
|
|
app-header-text-color: var(--primary-text-color)
|
|
app-header-background-color: var(--catppuccin-crust)
|
|
|
|
# Codemirror
|
|
codemirror-keyword: var(--catppuccin-mauve)
|
|
codemirror-operator: var(--catppuccin-sky)
|
|
codemirror-variable: var(--catppuccin-blue) # Functions
|
|
codemirror-variable-2: var(--catppuccin-text) # "Special variable"s
|
|
codemirror-variable-3: var(--catppuccin-text) # Currently unused
|
|
codemirror-builtin: var(--catppuccin-red)
|
|
codemirror-atom: var(--catppuccin-red)
|
|
codemirror-number: var(--catppuccin-peach)
|
|
codemirror-def: var(--catppuccin-text)
|
|
codemirror-string: var(--catppuccin-green)
|
|
codemirror-string-2: var(--catppuccin-green) # Currently unused
|
|
codemirror-comment: var(--catppuccin-overlay2)
|
|
codemirror-tag: var(--catppuccin-blue) # Currently unused
|
|
codemirror-meta: var(--catppuccin-overlay2)
|
|
codemirror-attribute: var(--catppuccin-yellow)
|
|
codemirror-property: var(--catppuccin-blue)
|
|
codemirror-qualifier: var(--catppuccin-peach)
|
|
codemirror-type: var(--catppuccin-yellow) # Currently unused
|
|
|
|
################
|
|
# Other colors #
|
|
################
|
|
# These colors are respected by Home Assistant (currently), but aren't
|
|
# defined directly in the main theme.
|
|
text-accent-color: var(--catppuccin-crust)
|
|
md-slider-inactive-track-color: var(--catppuccin-overlay0)
|
|
app-header-edit-background-color: var(--catppuccin-surface2)
|
|
app-header-edit-text-color: var(--primary-text-color)
|
|
|
|
mdc-ripple-color: "#aaaaaa"
|
|
mdc-linear-progress-buffer-color: "#f00"
|
|
|
|
##########
|
|
# Graphs #
|
|
##########
|
|
graph-color-1: var(--catppuccin-mauve)
|
|
graph-color-2: var(--catppuccin-green)
|
|
graph-color-3: var(--catppuccin-red)
|
|
graph-color-4: var(--catppuccin-blue)
|
|
graph-color-5: var(--catppuccin-pink)
|
|
graph-color-6: var(--catppuccin-yellow)
|
|
graph-color-7: var(--catppuccin-sky)
|
|
graph-color-8: var(--catppuccin-maroon)
|
|
graph-color-9: var(--catppuccin-lavender)
|
|
graph-color-10: var(--catppuccin-peach)
|
|
graph-color-11: var(--catppuccin-teal)
|
|
graph-color-12: var(--catppuccin-rosewater)
|
|
graph-color-13: var(--catppuccin-sapphire)
|
|
graph-color-14: var(--catppuccin-flamingo)
|
|
Catppuccin Auto Latte Frappe:
|
|
modes:
|
|
light: *latte
|
|
dark: *frappe
|
|
Catppuccin Auto Latte Macchiato:
|
|
modes:
|
|
light: *latte
|
|
dark: *macchiato
|
|
Catppuccin Auto Latte Mocha:
|
|
modes:
|
|
light: *latte
|
|
dark: *mocha
|