Hi all,
Does someone have the full theme example file? Where all lines are add that you can change in your needs?
1 Like
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 
4 Likes
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)"
1 Like
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.
1 Like
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)'
3 Likes
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
4 Likes
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.
2 Likes
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