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 
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:
1 Like
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.
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
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
Nice buttons…
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
@anon67474050 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 %}
1 Like
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.