Full list of theme.yaml lines

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.

https://pastebin.com/ErmaxPg7

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 :slight_smile:

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
3 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