Iâm just using the MiniHass theme
---
####################### LIGHT MODE ####################
MiniHass_Light:
# contrast
contrast-0: "#ffffff"
contrast-10: "#F2F2F2"
contrast-20: "#e5e5e5"
contrast-33: "#888888"
contrast-66: "#444444"
contrast-100: "#000000"
# main interface colors
color-green: "#39bb4f"
hcv-color-new: "#39bb4f"
color-yellow: rgb(253 204 18)
color-blue: rgba(159,204,250,1)
color-cerise: "#e0188f"
color-purple: rgba(130,30,255)
color-orange: "#F46036"
color-off-grey: "#525252"
color-red: "#E84941"
color-teal: rgba(123,232,183,1)
color-white: "#ffffff"
color-off-white: "#fffff2"
color-black: "#000000"
gradient-yellow: linear-gradient(30deg, rgb(253 204 18) 0%, rgb(253 238 70) 100%)
gradient-green: linear-gradient(120deg, rgba(120,210,155,1), rgba(205,240,200,1))
gradient-red: linear-gradient(45deg, rgba(240,130,140,1), rgba(250,185,195,1))
gradient-grey-cold: linear-gradient(45deg, rgba(235,244,245,1), rgba(181,198,224,1))
gradient-blue: linear-gradient(45deg, rgba(9,116,241,1), rgba(159,204,250,1))
gradient-orange: linear-gradient(45deg, rgba(253,125,90,1), rgba(253,172,90,1))
gradient-teal: linear-gradient(45deg, rgba(123,232,183,1), rgba(123,232,218,1))
gradient-purple: linear-gradient(120deg, rgb(130,30,255), rgb(170,100,250))
gradient-purple-teal: 'linear-gradient(45deg, var(--color-purple), var(--color-teal))'
gradient-teal-purple: 'linear-gradient(45deg, var(--color-teal), var(--color-purple))'
gradient-black: linear-gradient(45deg, rgba(13,13,15,1), rgba(19,20,23,1))
#glow
glow: 0px 0px 0px 0px
glow-color-green: 'var(--glow) var(--color-green)'
glow-color-yellow: 'var(--glow) var(--color-yellow)'
glow-color-dark-blue: 'var(--glow) var(--color-dark-blue)'
glow-color-light-blue: 'var(--glow) var(--color-light-blue)'
glow-color-cerise: 'var(--glow) var(--color-cerise)'
glow-color-violet: 'var(--glow) var(--color-violet)'
glow-color-orange: 'var(--glow) var(--color-orange)'
glow-color-red: 'var(--glow) var(--color-red)'
glow-color-white: 'var(--glow) var(--color-white)'
# background and sidebar
background: '#FFFFFF'
# card
background-neo: linear-gradient(145deg, rgba(250,250,250,.5) 25%, rgba(50,50,50,.1))
box-shadow-neo: 5px 5px 10px rgba(50,50,50,.15), -5px -5px 10px rgba(255,255,255,.5)
border-width: "0px"
border-radius: "16px"
box-shadow: "none"
ha-card-box-shadow: "var(--box-shadow)"
ha-card-background: '#F4F4F4'
background-card-color: 'rgba(14,14,112, 0)'
ha-card-border-width: "var(--border-width)"
# Slider
slider-bar-color: '#7ED8FC'
slider-color: '#00468c'
slider-secondary-color: "var(--color-orange)"
# UI
mdc-button-outline-color: "var(--color-orange)"
mdc-theme-primary: "var(--color-red)"
--energy-grid-consumption-color: "var(--color-red)"
--energy-grid-return-color: "var(--color-red)"
--energy-solar-color: "var(--color-red)"
energy-non-fossil-color: "var(--color-red)"
energy-battery-out-color: "var(--color-red)"
energy-battery-in-color: "var(--color-red)"
--energy-gas-color: "var(--color-red)"
mini-media-player-accent-color: "var(--color-white)"
mini-media-player-icon-color: "var(--color-white)"
mini-media-player-base-color: "var(--color-white)"
swiper-pagination-color: "var(--color-black)"
#Typography (static)
fs-xl: 4rem
fs-1000: 2.5rem
fs-800: 2rem
fs-600: 1.5rem
fs-500: 1.25rem
fs-400: 1rem
fs-300: 0.75rem
fs-200: 0.5rem
#Buttons (static)
button-small: 30px
#Typography (responsive)
#fs-xl: clamp(4rem, 4vw, 8rem)
#fs-1000: clamp(2.5rem, 2vw, 4rem)
#fs-800: clamp(2rem, 2vw, 3rem)
#fs-600: clamp(1.5rem, 2vw, 2.25rem)
#fs-500: clamp(1.25rem, 2vw, 2.25rem)
#fs-400: clamp(1rem, 1vw, 2rem)
#fs-300: clamp(0.75rem, 2vw, 1.25rem)
#fs-200: clamp(0.5rem, 2vw, 1rem)
#Buttons (responsive)
#button-small: clamp(30px, 2vw, 50px)
####################### Backend UI ####################
####################### MACHIATO ####################
# Colors
text: "#fdfdff"
subtext1: "#dcdcde"
subtext0: "#e6e7eb"
overlay2: "#939ab7"
overlay1: "#8087a2"
overlay0: "#6e738d"
surface2: "#5b6078"
surface1: "#494d64"
surface0: "#363a4f"
base: "#24273a"
mantle: "#1e2030"
crust: "#181926"
rosewater: "#f4dbd6"
flamingo: "#f0c6c6"
pink: "#f5bde6"
mauve: "#c6a0f6"
red: "#ed8796"
maroon: "#ee99a0"
peach: "#f5a97f"
yellow: "#eed49f"
green: "#a6da95"
teal: "#8bd5ca"
sky: "#91d7e3"
sapphire: "#7dc4e4"
blue: "#8aadf4"
lavender: "#b7bdf8"
# Black / White
black: "#000000"
white: "#FFFFFF"
# Colors
purple: rgb(var(--purple-rgb))
yellow: rgb(var(--yellow-rgb))
orange: rgb(var(--orange-rgb))
red: rgb(var(--red-rgb))
green: rgb(var(--green-rgb))
blue: rgb(var(--blue-rgb))
# Color tints
purple-tint: rgba(var(--purple-rgb),var(--color-tint))
yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
orange-tint: rgba(var(--orange-rgb),var(--color-tint))
red-tint: rgba(var(--red-rgb),var(--color-tint))
green-tint: rgba(var(--green-rgb),var(--color-tint))
blue-tint: rgba(var(--blue-rgb),var(--color-tint))
# Gradients
brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
###########################
# Header
app-header-background-color: var(--mantle)
app-header-text-color: var(--text)
# Main Interface colors
primary-color: var(--white)
light-primary-color: var(--primary-color)
primary-background-color: var(--base)
secondary-background-color: var(--base)
# Text
primary-text-color: var(--text)
secondary-text-color: var(--subtext1)
text-primary-color: var(--text)
divider-color: var(--base)
accent-color: var(--sky)
disabled-text-color: var(--surface0)
# Sidebar
sidebar-background-color: var(--crust)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-icon-color: var(--subtext0)
sidebar-text-color: var(--subtext0)
sidebar-selected-icon-color: var(--blue)
sidebar-selected-text-color: var(--blue)
# Buttons
paper-item-icon-color: var(--subtext0)
paper-item-icon-active-color: var(--primary-color)
# States and Badges
state-icon-color: var(--white)
state-icon-active-color: var(--primary-color)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: var(--blue)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--blue)
# Labels
label-badge-background-color: var(--surface0)
label-badge-text-color: var(--text)
label-badge-red: var(--red)
label-badge-green: var(--green)
label-badge-blue: var(--blue)
label-badge-yellow: var(--yellow)
label-badge-gray: var(--overlay0)
# Cards
paper-dialog-background-color: var(--overlay0)
paper-listbox-background-color: var(--overlay0)
paper-card-background-color: var(--card-background-color)
# Switches
switch-checked-button-color: var(--green)
switch-checked-track-color: var(--surface0)
switch-unchecked-button-color: rgb(--overlay0)
switch-unchecked-track-color: rgb(--surface0)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
mdc-checkbox-unchecked-color: var(--surface0)
# Dropdowns
material-background-color: var(--primary-background-color)
material-secondary-background-color: var(--primary-background-color)
mdc-theme-surface: var(--primary-background-color)
# Pre/Code
markdown-code-background-color: var(--surface0)
# Checkboxes
mdc-select-fill-color: var(--surface0)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--subtext1)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
# Input
input-fill-color: var(--secondary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
# Toast
paper-toast-background-color: var(--overlay0)
# Colors
error-color: var(--red)
warning-color: var(--yellow)
success-color: var(--green)
info-color: var(--blue)
state-on-color: var(--green)
state-off-color: var(--red)
####################### DARK MODE ####################
MiniHass_Dark:
lovelace-background: 'center / cover no-repeat url("/local/images/bg1.jpg") fixed'
# contrast
contrast-100: rgb(255,255,255)
contrast-66: rgb(136,136,136)
contrast-33: rgb(68,68,68)
contrast-20: rgb(30,30,30)
contrast-10: rgb(17,17,17)
contrast-0: rgb(0,0,0)
# colors
color-green: rgb(57,187,79)
color-yellow: rgb(253 204 18)
color-blue: rgb(159,204,250)
color-cerise: rgb(224,24,143)
color-purple: rgb(130,30,255)
color-orange: rgb(244,96,54)
color-off-grey: rgb(82,82,82)
color-red: rgb(232,73,65)
color-teal: rgb(123,232,183,1)
color-white: rgb(255,255,255)
color-black: rgb(0,0,0)
gradient-yellow: linear-gradient(30deg, rgb(253 204 18) 0%, rgb(253 238 70) 100%)
gradient-green: linear-gradient(120deg, rgba(120,210,155,1), rgba(205,240,200,1))
gradient-red: linear-gradient(45deg, rgba(240,130,140,1), rgba(250,185,195,1))
gradient-grey-cold: linear-gradient(45deg, rgba(235,244,245,1), rgba(181,198,224,1))
gradient-blue: linear-gradient(45deg, rgba(9,116,241,1), rgba(159,204,250,1))
gradient-orange: linear-gradient(45deg, rgba(253,125,90,1), rgba(253,172,90,1))
gradient-teal: linear-gradient(45deg, rgba(123,232,183,1), rgba(123,232,218,1))
gradient-purple: linear-gradient(120deg, rgb(130,30,255), rgb(170,100,250))
gradient-purple-teal: 'linear-gradient(45deg, var(--color-purple), var(--color-teal))'
gradient-teal-purple: 'linear-gradient(45deg, var(--color-teal), var(--color-purple))'
gradient-black: linear-gradient(45deg, rgba(13,13,15,1), rgba(19,20,23,1))
#glow
glow: 0px 0px 15px 1px
glow-color-green: 'var(--glow) var(--color-green)'
glow-color-yellow: 'var(--glow) var(--color-yellow)'
glow-color-dark-blue: 'var(--glow) var(--color-dark-blue)'
glow-color-light-blue: 'var(--glow) var(--color-light-blue)'
glow-color-cerise: 'var(--glow) var(--color-cerise)'
glow-color-violet: 'var(--glow) var(--color-violet)'
glow-color-orange: 'var(--glow) var(--color-orange)'
glow-color-red: 'var(--glow) var(--color-red)'
glow-color-white: 'var(--glow) var(--color-white)'
# background and sidebar
background: '#1b1d21'
# card
box-shadow-neo: 5px 5px 10px rgba(0,0,0,.5), -5px -5px 10px rgba(255,255,255,.03)
border-width: "0px"
border-radius: "16px"
box-shadow: "none"
ha-card-box-shadow: "var(--box-shadow)"
ha-card-background: '#121316'
ha-card-border-radius: "var(--border-radius)"
background-card-color: 'rgba(14,14,112, 0)'
ha-card-border-width: "var(--border-width)"
# slider
slider-bar-color: '#7ED8FC'
slider-color: '#4200AA'
slider-secondary-color: "var(--color-orange)"
# media player
mini-media-player-accent-color: "var(--color-white)"
mini-media-player-icon-color: "var(--color-white)"
mini-media-player-base-color: "var(--color-white)"
#Typography (static)
fs-xl: 4rem
fs-1000: 2.5rem
fs-800: 2rem
fs-600: 1.5rem
fs-500: 1.25rem
fs-400: 1rem
fs-300: 0.75rem
fs-200: 0.5rem
#Buttons (static)
button-small: 30px
#Typography (responsive)
#fs-xl: clamp(4rem, 4vw, 8rem)
#fs-1000: clamp(2.5rem, 2vw, 4rem)
#fs-800: clamp(2rem, 2vw, 3rem)
#fs-600: clamp(1.5rem, 2vw, 2.25rem)
#fs-500: clamp(1.25rem, 2vw, 2.25rem)
#fs-400: clamp(1rem, 1vw, 2rem)
#fs-300: clamp(0.75rem, 2vw, 1.25rem)
#fs-200: clamp(0.5rem, 2vw, 1rem)
#Buttons (responsive)
#button-small: clamp(30px, 2vw, 50px)
####################### Backend UI ####################
####################### MACHIATO ####################
# Colors
text: "#f7f7f7"
subtext1: "#cccccc"
subtext0: "#aaaaaa"
overlay2: "#939ab7"
overlay1: "#8087a2"
overlay0: "#6e738d"
surface2: "#5b6078"
surface1: "#494d64"
surface0: "#363a4f"
base: "#24273a"
mantle: "#1e2030"
crust: "#181926"
rosewater: "#f4dbd6"
flamingo: "#f0c6c6"
pink: "#f5bde6"
mauve: "#c6a0f6"
red: "#ed8796"
maroon: "#ee99a0"
peach: "#f5a97f"
yellow: "#eed49f"
green: "#7cc963"
teal: "#8bd5ca"
sky: "#91d7e3"
sapphire: "#7dc4e4"
blue: "#8aadf4"
lavender: "#b7bdf8"
###########################
# Header
app-header-background-color: var(--mantle)
app-header-text-color: var(--text)
# Main Interface colors
primary-color: var(--blue)
light-primary-color: var(--primary-color)
primary-background-color: var(--base)
secondary-background-color: var(--base)
# Text
primary-text-color: var(--text)
secondary-text-color: var(--subtext1)
text-primary-color: var(--text)
divider-color: var(--base)
accent-color: var(--sky)
disabled-text-color: var(--surface0)
# Sidebar
sidebar-background-color: var(--crust)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-icon-color: var(--subtext0)
sidebar-text-color: var(--subtext0)
sidebar-selected-icon-color: var(--blue)
sidebar-selected-text-color: var(--blue)
# Buttons
paper-item-icon-color: var(--subtext0)
paper-item-icon-active-color: var(--primary-color)
# States and Badges
state-icon-color: var(--white)
state-icon-active-color: var(--primary-color)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: var(--blue)
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--blue)
# Labels
label-badge-background-color: var(--surface0)
label-badge-text-color: var(--text)
label-badge-red: var(--red)
label-badge-green: var(--green)
label-badge-blue: var(--blue)
label-badge-yellow: var(--yellow)
label-badge-gray: var(--overlay0)
# Cards
paper-dialog-background-color: var(--overlay0)
paper-listbox-background-color: var(--overlay0)
paper-card-background-color: var(--card-background-color)
# Switches
switch-checked-button-color: var(--green)
switch-checked-track-color: var(--surface0)
switch-unchecked-button-color: rgb(--overlay0)
switch-unchecked-track-color: rgb(--surface0)
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
mdc-checkbox-unchecked-color: var(--surface0)
# Dropdowns
material-background-color: var(--primary-background-color)
material-secondary-background-color: var(--primary-background-color)
mdc-theme-surface: var(--primary-background-color)
# Pre/Code
markdown-code-background-color: var(--surface0)
# Checkboxes
mdc-select-fill-color: var(--surface0)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--subtext1)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
# Input
input-fill-color: var(--secondary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
# Toast
paper-toast-background-color: var(--overlay0)
# Colors
error-color: var(--red)
warning-color: var(--yellow)
success-color: var(--green)
info-color: var(--blue)
state-on-color: var(--green)
state-off-color: var(--red)
#######################################################
############### Custom global variables ###############
#######################################################
# Black / White
black: "#000000"
white: "#FFFFFF"
# Colors
purple: rgb(var(--purple-rgb))
yellow: rgb(var(--yellow-rgb))
orange: rgb(var(--orange-rgb))
red: rgb(var(--red-rgb))
green: rgb(var(--green-rgb))
blue: rgb(var(--blue-rgb))
# Color tints
purple-tint: rgba(var(--purple-rgb),var(--color-tint))
yellow-tint: rgba(var(--yellow-rgb),var(--color-tint))
orange-tint: rgba(var(--orange-rgb),var(--color-tint))
red-tint: rgba(var(--red-rgb),var(--color-tint))
green-tint: rgba(var(--green-rgb),var(--color-tint))
blue-tint: rgba(var(--blue-rgb),var(--color-tint))
# Gradients
brightness: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.4) 0%, rgba(var(--brightness-high-rgb), 1) 100%)
brightness-tint: linear-gradient(90deg, rgba(var(--brightness-low-rgb), 0.06) 0%, rgba(var(--brightness-high-rgb), var(--color-tint)) 100%)
temperature: linear-gradient(90deg, rgba(var(--temperature-low-rgb), 01) 0%, rgba(var(--temperature-high-rgb), 1) 100%)
temperature-tint: linear-gradient(90deg, rgba(var(--temperature-low-rgb), var(--color-tint)) 0%, rgba(var(--temperature-high-rgb), var(--color-tint)) 100%)
# Color RGB variables
purple-rgb: 239, 177, 255
yellow-rgb: 255, 218, 120
orange-rgb: 255, 181, 129
red-rgb: 255, 145, 138
green-rgb: 204, 233, 161
blue-rgb: 144, 191, 255
# Gradient RGB variables
brightness-low-rgb: 232, 176, 29
brightness-high-rgb: 255, 211, 94
temperature-low-rgb: 177, 197, 255
temperature-high-rgb: 255, 175, 131
# Contrast variables
black1: "#000000"
black2: "#111318"
black3: "#171A21"
black4: "#1C1F27"
black5: "#262A35"
black6: "#353946"
black7: "#434856"
black8: "#535865"
black9: "#636774"
black10: "#777A83"
white10: "#898C94"
white9: "#969AA6"
white8: "#A4A9B6"
white7: "#B3B8C6"
white6: "#C3C8D5"
white5: "#D4D8E2"
white4: "#E1E5EF"
white3: "#EAEDF6"
white2: "#F4F6FB"
white1: "#FFFFFF"
########################################################
############### Variables based on modes ###############
########################################################
modes:
dark:
# Black white contrats
contrast1: var(--black1)
contrast2: var(--black2)
contrast3: var(--black3)
contrast4: var(--black4)
contrast5: var(--black5)
contrast6: var(--black6)
contrast7: var(--black7)
contrast8: var(--black8)
contrast9: var(--black9)
contrast10: var(--black10)
contrast11: var(--white10)
contrast12: var(--white9)
contrast13: var(--white8)
contrast14: var(--white7)
contrast15: var(--white6)
contrast16: var(--white5)
contrast17: var(--white4)
contrast18: var(--white3)
contrast19: var(--white2)
contrast20: var(--white1)
# Color tint transparancy
color-tint: "0.15"
# Contrast RGB variables
contrast1-RGB: 0,0,0
light:
# Black white contrats
contrast1: var(--white1)
contrast2: var(--white2)
contrast3: var(--white3)
contrast4: var(--white4)
contrast5: var(--white5)
contrast6: var(--white6)
contrast7: var(--white7)
contrast8: var(--white8)
contrast9: var(--white9)
contrast10: var(--white10)
contrast11: var(--black10)
contrast12: var(--black9)
contrast13: var(--black8)
contrast14: var(--black7)
contrast15: var(--black6)
contrast16: var(--black5)
contrast17: var(--black4)
contrast18: var(--black3)
contrast19: var(--black2)
contrast20: var(--black1)
# Color tint transparancy
color-tint: "0.20"
# Contrast RGB variables
contrast1-RGB: 255,255,255