Who's got "the original" theme as theme.yaml?

Tags: #<Tag:0x00007f7800beb098> #<Tag:0x00007f7800beaf58>

Who’s got “the original” theme as theme.yaml?

I would like to make only some minor tweaks to the original interface.
Would be nice to have the standard orginal theme as a reference to start with.
Does anybody has that? Would be great :slight_smile:

i think you can find them here:

or here:

I’m probably not telling you anything you don’t already know, but you can change what you want on the default theme without manually entering all of the settings. For instance, I like the default them for my “light” theme, but I wanted rounded corners. This is my light theme:

my-light-theme:
  # Cards
  ha-card-border-radius: 20px

All other default settings remain in place.

It looks like this on my frontend:

I add the radius corners to slate theme for my dark theme:

No I didn’t now that.

So I make a theme.yaml add it to the config.yaml and in that them I only put:

my-light-theme:
  # Cards
  ha-card-border-radius: 20px

? Because that is exactly what I want, only round edges. :slight_smile:

Would this represent the, alsmost, complete code for the orginal theme do you think? Then I can start modifying it for my original-modified.yaml theme :slight_smile:

primary-text-color: #212121;
secondary-text-color: #727272;
text-primary-color: #ffffff;
disabled-text-color: #bdbdbd;

primary-color: #03a9f4;
dark-primary-color: #0288d1;
light-primary-color: #b3e5fC;
accent-color: #ff9800;
divider-color: rgba(0, 0, 0, .12);

scrollbar-thumb-color: rgb(194, 194, 194);

error-color: #db4437;

state-icon-color: #44739e;
state-icon-active-color: #FDD835;

card-background-color: #ffffff;
primary-background-color: #fafafa;
secondary-background-color: #e5e5e5; 

label-badge-red: #DF4C1E;
label-badge-blue: #039be5;
label-badge-green: #0DA035;
label-badge-yellow: #f4b400;

paper-grey-50: #fafafa; 
paper-grey-200: #eeeeee; 
paper-grey-500: #9e9e9e;  

google-red-500: #db4437;
google-blue-500: #4285f4;
google-green-500: #0f9d58;
google-yellow-500: #f4b400;

paper-green-400: #66bb6a;
paper-blue-400: #42a5f5;
paper-orange-400: #ffa726;

dark-divider-opacity: 0.12;
dark-disabled-opacity: 0.38; 
dark-secondary-opacity: 0.54;
dark-primary-opacity: 0.87;

light-divider-opacity: 0.12;
light-disabled-opacity: 0.3; 
light-secondary-opacity: 0.7;
light-primary-opacity: 1.0;

ha-paper-slider-pin-font-size: 15px;

rgb-primary-color: 3, 169, 244;
rgb-accent-color: 255, 152, 0;
rgb-primary-text-color: 33, 33, 33;
rgb-secondary-text-color: 114, 114, 114;
rgb-text-primary-color: 255, 255, 255;

background-color: var(--primary-background-color)

paper-spinner-color: "var(--primary-color)"
error-state-color: "var(--error-color)"
state-icon-unavailable-color: "var(--disabled-text-color)"

sidebar-text-color: "var(--primary-text-color)"
sidebar-background-color: "var(--paper-listbox-background-color);"
sidebar-selected-text-color: "var(--primary-color)"
sidebar-selected-icon-color: "var(--primary-color)"
sidebar-icon-color: "rgba(var(--rgb-primary-text-color), 0.6)"

switch-checked-color: "var(--primary-color)"
switch-checked-button-color: "var(--switch-checked-color, var(--primary-background-color))"
switch-checked-track-color: "var(--switch-checked-color, #000000)"
switch-unchecked-button-color: "var(--switch-unchecked-color, var(--primary-background-color))"
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)"

label-badge-grey: "var(--paper-grey-500)"
label-badge-background-color: "var(--card-background-color)"
label-badge-text-color: "rgba(var(--rgb-primary-text-color), 0.8)"

paper-card-background-color: "var(--card-background-color)"
paper-listbox-background-color: "var(--card-background-color)"
paper-item-icon-color: "var(--state-icon-color)"
paper-item-icon-active-color: "var(--state-icon-active-color)"
table-row-background-color: "var(--primary-background-color)"
table-row-alternative-background-color: "var(--secondary-background-color)"

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)"

data-table-background-color: "var(--card-background-color)"

mdc-theme-primary: "var(--primary-color)"
mdc-theme-secondary: "var(--accent-color)"
mdc-theme-background: "var(--primary-background-color)"
mdc-theme-surface: "var(--card-background-color)"
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-text-color: "var(--text-primary-color)"
app-header-background-color: "var(--primary-color)"

material-body-text-color: "var(--primary-text-color)"
material-background-color: "var(--card-background-color)"
material-secondary-background-color: "var(--secondary-background-color)"
1 Like

@Salty

Nice buttons…
image

Are they made up of a dynamic background overlaid with face icons or are they just single images?

Oh when I do that is gives an error:

2020-02-24 09:59:43 ERROR (MainThread) [homeassistant.components.hassio] Invalid config for [frontend]: value should be a string for dictionary value @ data[‘frontend’][‘themes’][‘round’][‘standard-theme-round’]. Got OrderedDict([(‘ha-card-border-radius’, ‘20px’)]). (See /config/configuration.yaml, line 113).

Thanks @klogg. They are single images, but that’s an interesting idea about doing a dynamic overlay.
Mine are simple picture-entity cards using the person entity state_image for each state. I just grabbed the avatars from the iPhone and overlaid them over transparent state images in a graphics program, then saved each state to an individual file.

state_image:
  wifework: /local/persons/wife_avatar_work_v202001211218.png
  home: /local/persons/wife_avatar_home_v202001211224.png
  not_home: /local/persons/wife_avatar_away_minicooper_v202001230851.png
1 Like

@ydn It may be an indention issue with your configuration.yaml theme reference, but that’s just a guess without seeing the code.

Here is how I have it setup in my configuration.yaml:

frontend:
  themes: !include_dir_merge_named themes

Under my config folder, there is a folder created named “themes” and under the “themes” folder, I have a file named “my-light-theme.yaml”:

/config/themes/my_light_theme.yaml

my-light-theme:
  # Cards
  ha-card-border-radius: 20px

I have another file called /config/themes/my_dark_theme.yaml that contains my dark theme and automation that changes it based on the sun:

#############################################################
#  _____                _      __  __             _       
# |  __ \              | |    |  \/  |           | |      
# | |  | |  __ _  _ __ | | __ | \  / |  ___    __| |  ___ 
# | |  | | / _` || '__|| |/ / | |\/| | / _ \  / _` | / _ \
# | |__| || (_| || |   |   <  | |  | || (_) || (_| ||  __/
# |_____/  \__,_||_|   |_|\_\ |_|  |_| \___/  \__,_| \___|
#                                                         
#############################################################


#################################################################
#  Set default light theme at sunrise
#################################################################    

- id: '20200110142500'
  alias: Theme Selection Based on Sunrise
  trigger:
  - event: sunrise
    platform: sun
  action:
    service: frontend.set_theme
    data:
      name: my-light-theme
      
#################################################################
#  Set default dark theme at sunset
#################################################################    
      
- id: '20200110143100'
  alias: Theme Selection Based on Sunset
  trigger:
  - event: sunset
    platform: sun
  action:
    service: frontend.set_theme
    data:
      name: my-dark-theme

#################################################################
#  Set theme based on sun if Home Assistant restarted
#################################################################    
      
- id: '20200110201500'
  alias: Theme Selection on Home Assistant Restart
  trigger:
    - platform: homeassistant
      event: start
    - platform: state
      entity_id: sun.sun
  action:
    - service_template: frontend.set_theme
      data_template:
        name: >
          {% if states.sun.sun.state == "above_horizon" %}
            my-light-theme
          {% else %}
            my-dark-theme
          {% endif %}

Found the problem (I’ve should have known this). The correct formatting should be:

# standard-theme-round:
ha-card-border-radius: "20px"

That’s interesting that adding the quotes resolved it. I don’t have quotes on mine, and it works fine, and other themes like the ios dark mode theme don’t have the radius in quotes. At any rate, I’m glad it is working for you.

It’s not only the quotes, also the spaces before ha-card-… and a # before the title.