Hi all,
Does someone have the full theme example file? Where all lines are add that you can change in your needs?
Hi all,
Does someone have the full theme example file? Where all lines are add that you can change in your needs?
Here is mine. Noctis is my favorite. It’s the last one in the code.
Add to frontend.yaml
what I mean is a standart template where all possible lines like this:
# Text
text-color: '#ffffff'
primary-text-color: 'var(--text-color)'
text-primary-color: 'var(--text-color)'
secondary-text-color: "#BAC0C6"
text-medium-light-color: '#A0A2A8'
text-medium-color: '#80828A'
primary-color: 'var(--secondary-text-color)'
is shown. Lots of themes have some of them, other have different once.
I want a standard full list, everything in it. Then I can edit my own theme
I’ve not seen something like you are describing. I use Chrome’s DevTools to see what CSS fields are available for modifying.
Maybe im not clear what I mean.
We have a default theme in HA, you can create your own theme for HA. But what are the possible lines to edit for your own theme. So a theme example file that show all standard possible lines that you can use to make it your own. I
Im now combine some themes and filter it. Get a long list of possible edible lines:
template:
# var(--disabled-text-color) # Use this when you want use a different variable for same line
# background: "center / cover no-repeat url("/local/background.jpg") fixed"
#################################
# TEXT
#################################
primary-text-color: "rgba(255, 255, 255, 1)"
secondary-text-color: "rgba(190, 190, 190, 1)"
text-primary-color: "rgba(255, 255, 255, 1)"
disabled-text-color: "rgba(0, 0, 0, 1)"
#################################
# MAIN INTERFACE COLORS
#################################
primary-color: "rgba(0, 0, 0, 1)"
dark-primary-color: "rgba(0, 0, 0, 1)"
light-primary-color: "rgba(0, 0, 0, 1)"
accent-color: "rgba(0, 255, 0, 1)"
#################################
# table lines around sidebar
#################################
divider-color: "rgba(0, 190, 0, 1)"
scrollbar-thumb-color: 'rgba(0, 0, 0, 1)’
error-color: '#db4437'
error-state-color: 'var(--error-color)'
#################################
# CARDS
#################################
ha-card-border-radius: "5px"
ha-card-box-shadow: "inset 1px 1px 1px 1px var(--border-color)"
ha-card-header-color: "rgba(255, 255, 255, 1)"
#################################
# STATES AND BADGES
#################################
state-icon-active-color: "rgba(0, 0, 0, 1)"
state-icon-color: "rgba(0, 0, 0, 1)"
state-icon-unavailable-color: "rgba(0, 0, 0, 1)"
#################################
# BACKGROUND AND SIDEBAR
#################################
card-background-color: "rgba(0, 0, 0, 1)"
primary-background-color: "rgba(90, 90, 90, 1)"
secondary-background-color: "rgba(90, 90, 90, 1)"
#################################
# SIDEBAR MENU
#################################
sidebar-text-color: "rgba(255, 255, 0, 1)"
sidebar-background-color: "rgba(100, 255, 100, 1)"
sidebar-icon-color: "rgba(0, 255, 255, 1)"
sidebar-selected-icon-color: "rgba(255, 255, 255, 1)"
sidebar-selected-text-color: "rgba(255, 255, 255, 1)"
sidebar-selected-background-color: "rgba(0, 0, 0, 1)"
#################################
# CONTROLS
#################################
switch-checked-color: "rgba(0, 0, 0, 1)"
switch-unchecked-color: "rgba(0, 0, 0, 1)"
switch-checked-button-color: "rgba(166, 0, 255, 1)"
switch-unchecked-button-color: "rgba(0, 0, 0, 1)"
switch-checked-track-color: "rgba(0, 0, 0, 1)"
switch-unchecked-track-color: "rgba(0, 0, 0, 1)"
slider-color: rgba(0, 0, 0, 1)"
slider-secondary-color: rgba(0, 0, 0, 1)"
slider-bar-color: 'var(--disabled-text-color)'
#################################
# FOR LABEL BADGE
#################################
label-badge-background-color: "rgba(0, 0, 0, 1)"
label-badge-text-color: "rgba(0, 0, 0, 1)"
label-badge-blue: "rgba(0, 0, 255, 1)"
label-badge-green: "rgba(0, 255, 0, 1)"
label-badge-red: "rgba(255, 0, 0, 1)"
label-badge-yellow: "rgba(255, 255, 0, 1)"
label-badge-grey: "rgba(125, 125, 125, 1)"
#################################
# Paper-styles color.html dependency is stripped on build.
# When a default paper-style color is used, it needs to be copied
# from paper-styles/color.html to here.
#################################
paper-grey-50: "rgba(0, 0, 0, 1)"
paper-grey-200: "rgba(0, 0, 0, 1)"
paper-grey-400: "rgba(0, 0, 0, 1)"
#################################
# for paper-spinner
#################################
google-blue-500: "var(--make-blue)"
google-green-500: "var(--make-green)"
google-red-500: "rgba(0, 0, 0, 1)"
google-yellow-500: "rgba(0, 0, 0, 1)"
paper-spinner-color: "rgba(0, 0, 0, 1)"
#################################
# for paper-slider
#################################
paper-blue-400: "rgba(0, 0, 0, 1)"
paper-green-400: "rgba(0, 0, 0, 1)"
paper-orange-400: "rgba(0, 0, 0, 1)"
#################################
# opacity for dark text on a light background
#################################
dark-divider-opacity: "0"
dark-disabled-opacity: '0.38' #or hint text or icon
dark-secondary-opacity: '0.54'
dark-primary-opacity: '0.87'
#################################
# opacity for light text on a dark background
#################################
light-divider-opacity: "0"
light-disabled-opacity: '0.3' # or hint text or icon
light-secondary-opacity: '0.7'
light-primary-opacity: '1.0'
#################################
# derived colors, to keep existing themes mostly working
#################################
paper-card-background-color: "rgba(0, 0, 0, 1)"
paper-listbox-background-color: "rgba(0, 0, 0, 1)"
paper-item-icon-active-color: "rgba(0, 0, 0, 1)"
paper-item-icon-color: "rgba(0, 0, 0, 1)"
table-row-alternative-background-color: "rgba(166, 0, 255, 1)"
table-row-background-color: "rgba(166, 0, 255, 1)"
#################################
# set our slider style
#################################
paper-slider-knob-color: "rgba(0, 0, 0, 1)"
paper-slider-knob-start-color: "rgba(0, 0, 0, 1)"
paper-slider-pin-color: "rgba(0, 0, 0, 1)"
paper-slider-active-color: "rgba(0, 0, 0, 1)"
paper-slider-secondary-color: "rgba(0, 0, 0, 1)"
paper-slider-container-color: "rgba(0, 0, 0, 1)"
ha-paper-slider-pin-font-size: '15px'
#################################
# set data table style
#################################
data-table-background-color: "rgba(0, 0, 0, 1)"
#################################
# Change some parts in developer tools
#################################
paper-dialog-background-color: "rgba(0,255,0,1)"
paper-dialog-color: "rgba(0, 0, 0, 1)"
#################################
# rgb
#################################
rgb-primary-color: 'rgb(3, 169, 244)'
rgb-accent-color: 'rgb(255, 152, 0)'
rgb-primary-text-color: 'rgb(33, 33, 33)'
rgb-secondary-text-color: 'rgb(114, 114, 114)'
rgb-text-primary-color: 'rgb(255, 255, 255)'
#################################
# mwc
#################################
mdc-theme-primary: "rgba(0, 0, 0, 1)"
mdc-theme-secondary: 'var(--accent-color)'
mdc-theme-background: 'var(--primary-background-color)'
mdc-theme-surface: 'var(--paper-card-background-color, var(--card-background-color))'
#################################
# mwc text styles
#################################
mdc-theme-on-primary: 'var(--text-primary-color)'
mdc-theme-on-secondary: 'var(--text-primary-color)'
mdc-theme-on-surface: 'var(--primary-text-color)'
#################################
# app header background color
#################################
app-header-background-color: "rgba(0, 0, 255, 1)"
app-header-text-color: 'var(--text-primary-color)'
#################################
#
# UNKNOWN LINES
#
#################################
divider-color: "rgba(0, 190, 0, 1)"
accent-medium-color: "rgba(0, 0, 0, 1)"
background-card-color: "rgba(0, 0, 0, 1)"
background-color-2: "rgba(0, 0, 0, 1)"
background-image: "center / cover no-repeat url('/local/background.jpg') fixed"
# Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
base-hue: "120"
# Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
base-sat: "80%"
border-color: "rgba(0, 0, 0, 1)"
ch-active-tab-color: "var(--accent-color)"
ch-all-tabs-color: "var(--sidebar-icon-color)"
ch-background: "var(--background-color)"
ch-notification-dot-color: "var(--accent-color)"
ch-tab-indicator-color: "var(--accent-color)"
ha-label-badge-color: "rgba(0, 0, 0, 1)"
huesat: "var(--base-hue), var(--base-sat),"
iron-overlay-backdrop-background-color: "rgba(0, 0, 0, 1)"
label-badge-border-color: "rgba(0, 0, 0, 1)"
make-disable: "rgba(0, 0, 0, 1)"
make-carbon: "rgba(30,30,30,1)"
make-light-carbon: "rgba(40,40,40,1)"
make-grey: "rgba(150,150,150,1)"
make-blue: "rgba(0,0,255,1)"
make-green: "rgba(0,255,0,1)"
make-orange: "rgba(255,127,0,1)"
make-red: "rgba(255,0,0,1)"
make-white: "rgba(255,255,255,1)"
make-yellow: "rgba(255,255,0,1)"
paper-button-color: "rgba(0, 0, 0, 1)"
paper-button-ink-color: "rgba(0, 0, 0, 1)"
paper-card-header-color: "rgba(0, 0, 0, 1)"
paper-dialog-button-color: "rgba(0, 0, 0, 1)"
primary-font-family: "Gill Sans"
paper-font-body_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-weight: "500"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-weight: "500"
paper-font-headline_-_letter-spacing: "-0.5px"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
paper-icon-button-active-color: "rgba(0, 0, 0, 1)"
paper-icon-button-inactive-color: "rgba(0, 0, 0, 1)"
paper-item-icon_-_color: "rgba(0, 0, 0, 1)"
paper-item-selected_-_background-color: "rgba(0, 0, 0, 1)"
paper-listbox-color: "rgba(0, 0, 0, 1)"
paper-progress-secondary-color: "rgba(0, 0, 0, 1)"
paper-slider-disabled-active-color: "rgba(0, 0, 0, 1)"
paper-slider-disabled-secondary-color: "rgba(0, 0, 0, 1)"
paper-tabs-selection-bar-color: "rgba(0, 0, 0, 1)"
paper-toggle-button-checked-bar-color: "rgba(0, 0, 0, 1)"
paper-toggle-button-checked-button-color: "rgba(0, 0, 0, 1)"
paper-toggle-button-checked-ink-color: "rgba(0, 0, 0, 1)"
paper-toggle-button-unchecked-bar-color: "rgba(0, 0, 0, 1)"
paper-toggle-button-unchecked-button-color: "rgba(0, 0, 0, 1)"
paper-toggle-button-unchecked-ink-color: "rgba(0, 0, 0, 1)"
shadow-elevation-16dp_-_box-shadow: "inset 0px 0px 0px 4px hsl(var(--huesat) 28%)"
shadow-elevation-2dp_-_box-shadow: "inset 0px 0px 0px 4px hsl(var(--huesat) 18%)"
sidebar-text_-_background: "rgba(0, 0, 0, 1)"
sidebar-text_-_color: "rgba(0, 0, 0, 1)"
text-color: "rgba(0, 0, 0, 1)"
text-dark-color: "rgba(255, 255, 255, 1)"
text-medium-color: "rgba(255, 255, 255, 1)"
text-medium-light-color: "rgba(255, 255, 255, 1)"
Can someone tell me if the lines below
#################################
#
# UNKNOWN LINES
#
#################################
are custom created lines to use them in a
var(--primary-text-color)
part, or they actual a line to change something in the theme?
Did you ever find a full list? I would love to see that as well.
Was looking for the theme info of the default backend theme but didn’t find it. Here I have a theme that looks very complete to edit:
When you use HA 0.113x you need change these lines:
paper-card-background-color
to ha-card-background
or card-background-color
demo_template:
# var(--disabled-text-color) # Use this when you want use a different variable for same line
# background: "center / cover no-repeat url("/local/background.jpg") fixed"
#################################
# TEXT
#################################
lovelace-background: 'center / cover no-repeat url("/local/background.jpg") fixed' #Background-image
primary-text-color: '#212121'
secondary-text-color: '#727272'
text-primary-color: '#ffffff'
disabled-text-colour: '#bdbdbd'
#################################
# MAIN INTERFACE COLORS
#################################
primary-color: '#03a9f4'
dark-primary-color: '#0288d1'
light-primary-color: '#b3e5fC'
accent-color: '#ff9800'
#################################
# table lines around sidebar
#################################
divider-color: 'rgba(0, 0, 0, .12)'
scrollbar-thumb-color: 'rgb(194, 194, 194)'
error-color: '#db4437'
error-state-color: 'var(--error-color)'
################################# # CARDS #################################
ha-card-border-radius: "15px"
ha-card-box-shadow: "inset 0px 0px 2px 2px var(--border-color)"
ha-card-header-color: "rgba(255, 255, 255, 1)"
################################# # STATES AND BADGES #################################
state-icon-color: '#44739e'
state-icon-active-color: '#FDD835'
state-icon-unavailable-color: 'var(--disabled-text-color)'
################################# # BACKGROUND AND SIDEBAR #################################
card-background-color: '#ffffff'
primary-background-color: '#fafafa'
secondary-background-color: '#e5e5e5' #behind the cards on state
################################# # SIDEBAR MENU #################################
sidebar-text-color: 'var(--primary-text-color)'
sidebar-background-color: 'var(--paper-listbox-background-color)' #backward compatible with existing themes
sidebar-icon-color: 'rgba(0, 0, 0, 0.5)'
sidebar-selected-text-color: 'var(--primary-color)'
sidebar-selected-icon-color: 'var(--primary-color)'
sidebar-selected-background-color: "rgba(0, 0, 0, 1)"
################################# # CONTROLS #################################
switch-checked-color: 'var(--primary-color)'
switch-unchecked-color: 'var(--accent-color)'
switch-checked-button-color: 'var(--switch-checked-color, var(--paper-grey-50))'
switch-checked-track-color: 'var(--switch-checked-color, #000000)'
switch-unchecked-button-color: 'var(--switch-unchecked-color, var(--paper-grey-50))'
switch-unchecked-track-color: 'var(--switch-unchecked-color, #000000)'
slider-color: 'var(--primary-color)'
slider-secondary-color: 'var(--light-primary-color)'
slider-bar-color: 'var(--disabled-text-color)'
################################# # FOR LABEL BADGE #################################
label-badge-background-color: 'white'
label-badge-text-color: 'rgb(76, 76, 76)'
label-badge-red: '#DF4C1E'
label-badge-blue: '#039be5'
label-badge-green: '#0DA035'
label-badge-yellow: '#f4b400'
label-badge-grey: 'var(--paper-grey-500)'
#################################
# Paper-styles color.html dependency is stripped on build.
# When a default paper-style color is used, it needs to be copied
# from paper-styles/color.html to here.
#################################
paper-grey-50: '#fafafa' # default for: --mwc-switch-unchecked-button-color
paper-grey-200: '#eeeeee' # for ha-date-picker-style
paper-grey-500: '#9e9e9e' # --label-badge-grey
#################################
# for paper-spinner
#################################
google-red-500: '#db4437'
google-blue-500: '#4285f4'
google-green-500: '#0f9d58'
google-yellow-500: '#f4b400'
paper-spinner-color: 'var(--primary-color)'
#################################
# for paper-slider
#################################
paper-green-400: '#66bb6a'
paper-blue-400: '#42a5f5'
paper-orange-400: '#ffa726'
#################################
# opacity for dark text on a light background
#################################
dark-divider-opacity: '0.12'
dark-disabled-opacity: '0.38' #or hint text or icon
dark-secondary-opacity: '0.54'
dark-primary-opacity: '0.87'
#################################
# opacity for light text on a dark background
#################################
light-divider-opacity: '0.12'
light-disabled-opacity: '0.3' # or hint text or icon
light-secondary-opacity: '0.7'
light-primary-opacity: '1.0'
#################################
# derived colors, to keep existing themes mostly working
#################################
paper-card-background-color: "rgba(0, 0, 0, 1)"
paper-listbox-background-color: "rgba(0, 0, 0, 1)"
paper-item-icon-active-color: "rgba(0, 0, 0, 1)"
paper-item-icon-color: "rgba(0, 0, 0, 1)"
table-row-alternative-background-color: "rgba(166, 0, 255, 1)"
table-row-background-color: "rgba(166, 0, 255, 1)"
#################################
# set our slider style
#################################
paper-slider-knob-color: 'var(--slider-color)'
paper-slider-knob-start-color: 'var(--slider-color)'
paper-slider-pin-color: 'var(--slider-color)'
paper-slider-active-color: 'var(--slider-color)'
paper-slider-secondary-color: 'var(--slider-secondary-color)'
paper-slider-container-color: 'var(--slider-bar-color)'
ha-paper-slider-pin-font-size: '55px'
#################################
# set data table style
#################################
data-table-background-color: 'var(--card-background-color)'
#################################
# Change some parts in developer tools
#################################
paper-dialog-background-color: "rgba(0,255,0,1)"
paper-dialog-color: "rgba(0, 0, 0, 1)"
#################################
# rgb
#################################
rgb-primary-color: 'rgb(3, 169, 244)'
rgb-accent-color: 'rgb(255, 152, 0)'
rgb-primary-text-color: 'rgb(33, 33, 33)'
rgb-secondary-text-color: 'rgb(114, 114, 114)'
rgb-text-primary-color: 'rgb(255, 255, 255)'
#################################
# mwc
#################################
mdc-theme-primary: "rgba(0, 0, 0, 1)"
mdc-theme-secondary: 'var(--accent-color)'
mdc-theme-background: 'var(--primary-background-color)'
mdc-theme-surface: 'var(--paper-card-background-color, var(--card-background-color))'
#################################
# mwc text styles
#################################
mdc-theme-on-primary: 'var(--text-primary-color)'
mdc-theme-on-secondary: 'var(--text-primary-color)'
mdc-theme-on-surface: 'var(--primary-text-color)'
#################################
# app header background color
#################################
app-header-background-color: "rgba(0, 0, 255, 1)"
app-header-text-color: 'var(--text-primary-color)'
Quite a lot of useful info can be found here:
Is this yours? If not, could you point me to the source? Thanks!
Sorry dont know where i got this… Somewhere on the net…
Thanks, that has a lot of them. This will be helpful.
Thanks, I will be giving that a look.
I regex-ed this list out of html output. I’m sure they will change over time.
--accent-color
--app-header-background-color
--app-header-text-color
--app-toolbar-font-size
--card-background-color
--chip-background-color
--dark-disabled-opacity
--dark-divider-opacity
--dark-primary-color
--dark-primary-opacity
--dark-secondary-opacity
--dark-theme-base-color
--data-table-background-color
--disabled-text-color
--divider-color
--energy-battery-in-color
--energy-battery-out-color
--energy-gas-color
--energy-grid-consumption-color
--energy-grid-return-color
--energy-non-fossil-color
--energy-solar-color
--error-color
--error-state-color
--ha-card-border-radius
--ha-card-header-font-size
--header-height
--info-color
--input-disabled-fill-color
--input-disabled-ink-color
--input-disabled-line-color
--input-dropdown-icon-color
--input-fill-color
--input-hover-line-color
--input-idle-line-color
--input-ink-color
--input-label-ink-color
--input-outlined-disabled-border-color
--input-outlined-hover-border-color
--input-outlined-idle-border-color
--label-badge-background-color
--label-badge-blue
--label-badge-green
--label-badge-grey
--label-badge-red
--label-badge-text-color
--label-badge-yellow
--layout_-_display
--layout-around-aligned_-_align-content
--layout-around-aligned_-_-ms-align-content
--layout-around-aligned_-_-ms-flex-line-pack
--layout-around-aligned_-_-webkit-align-content
--layout-around-justified_-_justify-content
--layout-around-justified_-_-ms-flex-pack
--layout-around-justified_-_-webkit-justify-content
--layout-baseline_-_align-items
--layout-baseline_-_-ms-flex-align
--layout-baseline_-_-webkit-align-items
--layout-between-aligned_-_align-content
--layout-between-aligned_-_-ms-align-content
--layout-between-aligned_-_-ms-flex-line-pack
--layout-between-aligned_-_-webkit-align-content
--layout-block_-_display
--layout-center_-_align-items
--layout-center_-_-ms-flex-align
--layout-center_-_-webkit-align-items
--layout-center-aligned_-_align-content
--layout-center-aligned_-_-ms-align-content
--layout-center-aligned_-_-ms-flex-line-pack
--layout-center-aligned_-_-webkit-align-content
--layout-center-center_-_align-items
--layout-center-center_-_justify-content
--layout-center-center_-_-ms-flex-align
--layout-center-center_-_-ms-flex-pack
--layout-center-center_-_-webkit-align-items
--layout-center-center_-_-webkit-justify-content
--layout-center-justified_-_justify-content
--layout-center-justified_-_-ms-flex-pack
--layout-center-justified_-_-webkit-justify-content
--layout-end_-_align-items
--layout-end_-_-ms-flex-align
--layout-end_-_-webkit-align-items
--layout-end-aligned_-_align-content
--layout-end-aligned_-_-ms-align-content
--layout-end-aligned_-_-ms-flex-line-pack
--layout-end-aligned_-_-webkit-align-content
--layout-end-justified_-_justify-content
--layout-end-justified_-_-ms-flex-pack
--layout-end-justified_-_-webkit-justify-content
--layout-fit
--layout-fit_-_bottom
--layout-fit_-_left
--layout-fit_-_position
--layout-fit_-_right
--layout-fit_-_top
--layout-fixed-bottom_-_bottom
--layout-fixed-bottom_-_left
--layout-fixed-bottom_-_position
--layout-fixed-bottom_-_right
--layout-fixed-left_-_bottom
--layout-fixed-left_-_left
--layout-fixed-left_-_position
--layout-fixed-left_-_top
--layout-fixed-right_-_bottom
--layout-fixed-right_-_position
--layout-fixed-right_-_right
--layout-fixed-right_-_top
--layout-fixed-top_-_left
--layout-fixed-top_-_position
--layout-fixed-top_-_right
--layout-fixed-top_-_top
--layout-flex_-_flex
--layout-flex_-_flex-basis
--layout-flex_-_-ms-flex
--layout-flex_-_-webkit-flex
--layout-flex_-_-webkit-flex-basis
--layout-flex-10_-_flex
--layout-flex-10_-_-ms-flex
--layout-flex-10_-_-webkit-flex
--layout-flex-11_-_flex
--layout-flex-11_-_-ms-flex
--layout-flex-11_-_-webkit-flex
--layout-flex-12_-_flex
--layout-flex-12_-_-ms-flex
--layout-flex-12_-_-webkit-flex
--layout-flex-2_-_flex
--layout-flex-2_-_-ms-flex
--layout-flex-2_-_-webkit-flex
--layout-flex-3_-_flex
--layout-flex-3_-_-ms-flex
--layout-flex-3_-_-webkit-flex
--layout-flex-4_-_flex
--layout-flex-4_-_-ms-flex
--layout-flex-4_-_-webkit-flex
--layout-flex-5_-_flex
--layout-flex-5_-_-ms-flex
--layout-flex-5_-_-webkit-flex
--layout-flex-6_-_flex
--layout-flex-6_-_-ms-flex
--layout-flex-6_-_-webkit-flex
--layout-flex-7_-_flex
--layout-flex-7_-_-ms-flex
--layout-flex-7_-_-webkit-flex
--layout-flex-8_-_flex
--layout-flex-8_-_-ms-flex
--layout-flex-8_-_-webkit-flex
--layout-flex-9_-_flex
--layout-flex-9_-_-ms-flex
--layout-flex-9_-_-webkit-flex
--layout-flex-auto_-_flex
--layout-flex-auto_-_-ms-flex
--layout-flex-auto_-_-webkit-flex
--layout-flex-none_-_flex
--layout-flex-none_-_-ms-flex
--layout-flex-none_-_-webkit-flex
--layout-fullbleed_-_height
--layout-fullbleed_-_margin
--layout-horizontal_-_display
--layout-horizontal_-_flex-direction
--layout-horizontal_-_-ms-flex-direction
--layout-horizontal_-_-webkit-flex-direction
--layout-horizontal-reverse_-_display
--layout-horizontal-reverse_-_flex-direction
--layout-horizontal-reverse_-_-ms-flex-direction
--layout-horizontal-reverse_-_-webkit-flex-direction
--layout-inline_-_display
--layout-invisible_-_visibility
--layout-justified_-_justify-content
--layout-justified_-_-ms-flex-pack
--layout-justified_-_-webkit-justify-content
--layout-relative_-_position
--layout-scroll_-_overflow
--layout-scroll_-_-webkit-overflow-scrolling
--layout-self-baseline_-_align-self
--layout-self-baseline_-_-ms-align-self
--layout-self-baseline_-_-webkit-align-self
--layout-self-center_-_align-self
--layout-self-center_-_-ms-align-self
--layout-self-center_-_-webkit-align-self
--layout-self-end_-_align-self
--layout-self-end_-_-ms-align-self
--layout-self-end_-_-webkit-align-self
--layout-self-start_-_align-self
--layout-self-start_-_-ms-align-self
--layout-self-start_-_-webkit-align-self
--layout-self-stretch_-_align-self
--layout-self-stretch_-_-ms-align-self
--layout-self-stretch_-_-webkit-align-self
--layout-start_-_align-items
--layout-start_-_-ms-flex-align
--layout-start_-_-webkit-align-items
--layout-start-aligned_-_align-content
--layout-start-aligned_-_-ms-align-content
--layout-start-aligned_-_-ms-flex-line-pack
--layout-start-aligned_-_-webkit-align-content
--layout-start-justified_-_justify-content
--layout-start-justified_-_-ms-flex-pack
--layout-start-justified_-_-webkit-justify-content
--layout-vertical_-_display
--layout-vertical_-_flex-direction
--layout-vertical_-_-ms-flex-direction
--layout-vertical_-_-webkit-flex-direction
--layout-vertical-reverse_-_display
--layout-vertical-reverse_-_flex-direction
--layout-vertical-reverse_-_-ms-flex-direction
--layout-vertical-reverse_-_-webkit-flex-direction
--layout-wrap_-_flex-wrap
--layout-wrap_-_-ms-flex-wrap
--layout-wrap_-_-webkit-flex-wrap
--layout-wrap-reverse_-_flex-wrap
--layout-wrap-reverse_-_-ms-flex-wrap
--layout-wrap-reverse_-_-webkit-flex-wrap
--light-disabled-opacity
--light-divider-opacity
--light-primary-color
--light-primary-opacity
--light-secondary-opacity
--light-theme-background-color
--light-theme-disabled-color
--light-theme-secondary-background-color
--light-theme-secondary-color
--light-theme-text-color
--markdown-code-background-color
--material-background-color
--material-body-text-color
--material-button-font-size
--material-caption-font-size
--material-disabled-color
--material-disabled-text-color
--material-divider-color
--material-error-color
--material-error-text-color
--material-h6-font-size
--material-primary-color
--material-primary-contrast-color
--material-primary-text-color
--material-secondary-background-color
--material-secondary-text-color
--material-shadow-elevation-12dp
--material-shadow-elevation-16dp
--material-shadow-elevation-24dp
--material-shadow-elevation-2dp
--material-shadow-elevation-3dp
--material-shadow-elevation-4dp
--material-shadow-elevation-6dp
--material-shadow-elevation-8dp
--material-small-font-size
--mdc-button-disabled-ink-color
--mdc-button-outline-color
--mdc-checkbox-disabled-color
--mdc-checkbox-unchecked-color
--mdc-dialog-scroll-divider-color
--mdc-radio-disabled-color
--mdc-radio-unchecked-color
--mdc-select-disabled-dropdown-icon-color
--mdc-select-disabled-fill-color
--mdc-select-disabled-ink-color
--mdc-select-dropdown-icon-color
--mdc-select-fill-color
--mdc-select-hover-line-color
--mdc-select-idle-line-color
--mdc-select-ink-color
--mdc-select-label-ink-color
--mdc-select-outlined-disabled-border-color
--mdc-select-outlined-hover-border-color
--mdc-select-outlined-idle-border-color
--mdc-tab-text-label-color-default
--mdc-text-field-disabled-fill-color
--mdc-text-field-disabled-ink-color
--mdc-text-field-disabled-line-color
--mdc-text-field-fill-color
--mdc-text-field-hover-line-color
--mdc-text-field-idle-line-color
--mdc-text-field-ink-color
--mdc-text-field-label-ink-color
--mdc-text-field-outlined-disabled-border-color
--mdc-text-field-outlined-hover-border-color
--mdc-text-field-outlined-idle-border-color
--mdc-theme-background
--mdc-theme-error
--mdc-theme-on-primary
--mdc-theme-on-secondary
--mdc-theme-on-surface
--mdc-theme-primary
--mdc-theme-secondary
--mdc-theme-surface
--mdc-theme-text-disabled-on-light
--mdc-theme-text-hint-on-background
--mdc-theme-text-icon-on-background
--mdc-theme-text-primary-on-background
--mdc-theme-text-secondary-on-background
--mini-media-player-overlay-color-stop
--paper-dropdown-menu
--paper-dropdown-menu-button
--paper-dropdown-menu-disabled
--paper-dropdown-menu-icon
--paper-dropdown-menu-input
--paper-dropdown-menu-ripple
--paper-font-body1_-_font-family
--paper-font-body1_-_font-size
--paper-font-body1_-_font-weight
--paper-font-body1_-_line-height
--paper-font-body1_-_-webkit-font-smoothing
--paper-font-body2_-_font-family
--paper-font-body2_-_font-size
--paper-font-body2_-_font-weight
--paper-font-body2_-_line-height
--paper-font-body2_-_-webkit-font-smoothing
--paper-font-button_-_font-family
--paper-font-button_-_font-size
--paper-font-button_-_font-weight
--paper-font-button_-_letter-spacing
--paper-font-button_-_line-height
--paper-font-button_-_overflow
--paper-font-button_-_text-overflow
--paper-font-button_-_text-transform
--paper-font-button_-_-webkit-font-smoothing
--paper-font-button_-_white-space
--paper-font-caption_-_font-family
--paper-font-caption_-_font-size
--paper-font-caption_-_font-weight
--paper-font-caption_-_letter-spacing
--paper-font-caption_-_line-height
--paper-font-caption_-_overflow
--paper-font-caption_-_text-overflow
--paper-font-caption_-_-webkit-font-smoothing
--paper-font-caption_-_white-space
--paper-font-code1_-_font-family
--paper-font-code1_-_font-size
--paper-font-code1_-_font-weight
--paper-font-code1_-_line-height
--paper-font-code1_-_-webkit-font-smoothing
--paper-font-code2_-_font-family
--paper-font-code2_-_font-size
--paper-font-code2_-_font-weight
--paper-font-code2_-_line-height
--paper-font-code2_-_-webkit-font-smoothing
--paper-font-common-base_-_font-family
--paper-font-common-base_-_-webkit-font-smoothing
--paper-font-common-code_-_font-family
--paper-font-common-code_-_-webkit-font-smoothing
--paper-font-common-expensive-kerning_-_text-rendering
--paper-font-common-nowrap_-_overflow
--paper-font-common-nowrap_-_text-overflow
--paper-font-common-nowrap_-_white-space
--paper-font-display1_-_font-family
--paper-font-display1_-_font-size
--paper-font-display1_-_font-weight
--paper-font-display1_-_letter-spacing
--paper-font-display1_-_line-height
--paper-font-display1_-_-webkit-font-smoothing
--paper-font-display2_-_font-family
--paper-font-display2_-_font-size
--paper-font-display2_-_font-weight
--paper-font-display2_-_letter-spacing
--paper-font-display2_-_line-height
--paper-font-display2_-_-webkit-font-smoothing
--paper-font-display3_-_font-family
--paper-font-display3_-_font-size
--paper-font-display3_-_font-weight
--paper-font-display3_-_letter-spacing
--paper-font-display3_-_line-height
--paper-font-display3_-_overflow
--paper-font-display3_-_text-overflow
--paper-font-display3_-_-webkit-font-smoothing
--paper-font-display3_-_white-space
--paper-font-display4_-_font-family
--paper-font-display4_-_font-size
--paper-font-display4_-_font-weight
--paper-font-display4_-_letter-spacing
--paper-font-display4_-_line-height
--paper-font-display4_-_overflow
--paper-font-display4_-_text-overflow
--paper-font-display4_-_-webkit-font-smoothing
--paper-font-display4_-_white-space
--paper-font-headline_-_font-family
--paper-font-headline_-_font-size
--paper-font-headline_-_font-weight
--paper-font-headline_-_letter-spacing
--paper-font-headline_-_line-height
--paper-font-headline_-_overflow
--paper-font-headline_-_text-overflow
--paper-font-headline_-_-webkit-font-smoothing
--paper-font-headline_-_white-space
--paper-font-menu_-_font-family
--paper-font-menu_-_font-size
--paper-font-menu_-_font-weight
--paper-font-menu_-_line-height
--paper-font-menu_-_overflow
--paper-font-menu_-_text-overflow
--paper-font-menu_-_-webkit-font-smoothing
--paper-font-menu_-_white-space
--paper-font-subhead
--paper-font-subhead_-_font-family
--paper-font-subhead_-_font-size
--paper-font-subhead_-_font-weight
--paper-font-subhead_-_line-height
--paper-font-subhead_-_overflow
--paper-font-subhead_-_text-overflow
--paper-font-subhead_-_-webkit-font-smoothing
--paper-font-subhead_-_white-space
--paper-font-title_-_font-family
--paper-font-title_-_font-size
--paper-font-title_-_font-weight
--paper-font-title_-_line-height
--paper-font-title_-_overflow
--paper-font-title_-_text-overflow
--paper-font-title_-_-webkit-font-smoothing
--paper-font-title_-_white-space
--paper-input-container-input
--paper-input-container-input_-_font-size
--paper-input-container-input-align
--paper-input-container-input-color
--paper-input-container-shared-input-style_-_background
--paper-input-container-shared-input-style_-_border
--paper-input-container-shared-input-style_-_box-shadow
--paper-input-container-shared-input-style_-_color
--paper-input-container-shared-input-style_-_font-family
--paper-input-container-shared-input-style_-_font-size
--paper-input-container-shared-input-style_-_font-weight
--paper-input-container-shared-input-style_-_line-height
--paper-input-container-shared-input-style_-_margin
--paper-input-container-shared-input-style_-_max-width
--paper-input-container-shared-input-style_-_outline
--paper-input-container-shared-input-style_-_padding
--paper-input-container-shared-input-style_-_position
--paper-input-container-shared-input-style_-_text-align
--paper-input-container-shared-input-style_-_vertical-align
--paper-input-container-shared-input-style_-_-webkit-appearance
--paper-input-container-shared-input-style_-_-webkit-font-smoothing
--paper-input-container-shared-input-style_-_width
--paper-item-disabled
--paper-item-disabled-color
--paper-item-focused
--paper-item-focused-before
--paper-item-icon-active-color
--paper-item-icon-color
--paper-item-min-height
--paper-item-selected
--paper-item-selected-weight
--paper-listbox-background-color
--paper-slider-active-color
--paper-slider-container-color
--paper-slider-knob-color
--paper-slider-knob-start-color
--paper-slider-pin-color
--paper-slider-pin-start-color
--paper-slider-secondary-color
--primary-background-color
--primary-color
--primary-text-color
--rgb-accent-color
--rgb-card-background-color
--rgb-primary-color
--rgb-primary-text-color
--rgb-secondary-text-color
--rgb-text-primary-color
--scrollbar-thumb-color
--secondary-background-color
--secondary-text-color
--shadow-elevation-12dp_-_box-shadow
--shadow-elevation-16dp_-_box-shadow
--shadow-elevation-24dp_-_box-shadow
--shadow-elevation-2dp_-_box-shadow
--shadow-elevation-3dp_-_box-shadow
--shadow-elevation-4dp_-_box-shadow
--shadow-elevation-6dp_-_box-shadow
--shadow-elevation-8dp_-_box-shadow
--shadow-none_-_box-shadow
--shadow-transition_-_transition
--sidebar-background-color
--sidebar-icon-color
--sidebar-selected-icon-color
--sidebar-selected-text-color
--sidebar-text-color
--slider-color
--slider-secondary-color
--slider-track-color
--state-climate-auto-color
--state-climate-cool-color
--state-climate-dry-color
--state-climate-eco-color
--state-climate-fan_only-color
--state-climate-heat-color
--state-climate-idle-color
--state-climate-manual-color
--state-climate-off-color
--state-home-color
--state-icon-active-color
--state-icon-color
--state-icon-error-color
--state-icon-unavailable-color
--state-idle-color
--state-not_home-color
--state-off-color
--state-on-color
--state-unavailable-color
--state-unknown-color
--success-color
--switch-checked-button-color
--switch-checked-color
--switch-checked-track-color
--switch-unchecked-button-color
--switch-unchecked-color
--switch-unchecked-track-color
--table-row-alternative-background-color
--table-row-background-color
--text-light-primary-color
--text-primary-color
--warning-color
Might be much better if they just let you deliver a custom css file where you can override base-styles that gets injected for official theming (not that you can already do that by adding a custom resource) … instead of this weird yaml mapping to css-vars that’s lacking options left and right.
Maybe point is with a “Default View”, is that you are able to “reverse” to Default, if you fu your CSS
A Theme is just a long list off CSS, you don’t have to use “weird” mapping, if you don’t see the point in that, so your " Custom CSS file " is exactly a " Theme ", which you place in a Folder and get access to it, in your views and cards ( and you can have several Themes / CSS-files , … you can also choose to place your "Theme/CSS(style definitions) in top of the (Official Theming) … So i think you just don’t know what you want and what you “Have” , because you have exactly what you want … not 1, but 2 options (actually 3, in cards) where you can “deliver your own CUSTOM css” and overwrite base-style … And again, if you have “problems” with your “personal” css escapades, you can’t blame other than your-self, but luckily you have an “untouched” Default Theme