I made a theme that’s 99% var so your styles actually apply.
My Theme:
# This is the color of the colored stuff.
primary-color: "#FF0000"
# Just make the previous color lighter for this one.
light-primary-color: "#FF4444"
# This is the background color.
primary-background-color: "#DDFFFF"
# This is the text color.
primary-text-color: "#555555"
# If something is disabled, this is the color.
disabled-text-color: "#888888"
# This is the roundness of a card.
ha-card-border-radius: "5px"
# After here, don't worry about anything.
secondary-background-color: var(--primary-background-color)
divider-color: var(--primary-background-color)
card-background-color: var(--primary-background-color)
mdc-theme-secondary: var(--primary-color)
accent-color: var(--primary-color)
secondary-text-color: var(--primary-text-color)
text-primary-color: "#FFFFFF"
sidebar-icon-color: var(--primary-text-color)
sidebar-text-color: var(--primary-text-color)
sidebar-background-color: var(--primary-background-color)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: var(--light-primary-color)
sidebar-selected-text-color: var(--light-primary-color)
app-header-background-color: var(--primary-background-color)
app-header-text-color: var(--primary-text-color)
state-icon-color: var(--primary-text-color)
state-icon-active-color: var(--primary-color)
state-icon-unavailable-color: var(--disabled-text-color)
paper-slider-knob-color: var(--primary-color)
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(--light-primary-color)
label-badge-background-color: var(--primary-background-color)
label-badge-text-color: var(--primary-text-color)
paper-card-background-color: var(--primary-background-color)
paper-listbox-background-color: var(--primary-background-color)
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-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--primary-background-color)
data-table-background-color: var(--primary-background-color)
material-background-color: var(--primary-background-color)
mdc-theme-surface: var(--primary-background-color)
switch-checked-button-color: var(--primary-color)
switch-checked-track-color: var(--primary-color)
switch-unchecked-button-color: var(--disabled-text-color)
switch-unchecked-track-color: var(--disabled-text-color)
material-secondary-background-color: "#88888866"
Might be nice if you’re new and want to change colors. (Based off of some of my theme’s code)