I have seen a request for a “default theme” a number of times on the forum. Also requests for the variables that are available. This “default theme” should help with both items.
The variables are pulled from here on the main HA github repo. Feel free to comment in this thread, on the theme github repo or submit a pull request if you see something incorrect or can add additional theme variables that can be utilized.
Really nice thanks!
Do you know where we can find the dark version of it? 
You just saved the night!
Thank you so much!
Sorry for a bit offtopic here, hopefully not spamming too much. Anyone knows if it’s possible to specify a default dark and default light theme to be applied by HA automatically when the operating system’s theme changes on the device running HA application??
I just want to have a bit customized version of the default themes, but I didn’t find a way to ‘tell’ HA to use another theme automatically when it switches to dark from light and the other way around. The default themes are always used. I’m not interested in applying a theme by a service call. I want HA app to do this automatically whenever OS theme changes on my device.
If you’re also interested in such behaviour - please vote for my feature request here: Ability to specify default light and dark modes
Precisely what I was looking for. However, I found a difference - var(–sidebar-icon-color) is set to blue-ish color, when in default theme it’s grey, #7a7a7a to be exact (or at least that’s what ms paint says). Other than that, everything else seems spot on. Great Work!
Is the sideboard icon color displaying incorrectly?
I believe that the icons are grey initially and are “HA Blue” after they are selected.
Correct, however, with your theme, it was blue no matter if selected or not. In my case changing –sidebar-icon-color to #7a7a7a made it so if not selected it is gray and if selected it is blue with lighter blue background, just as it is in the default theme.
What I’d really like you guru’s to extract is the color scheme you see when you edit lovelace. It switches to a subdued “gray” instead of the blue. To me, that always seems more pleasant on the eye. The “dark” theme is way too dark, but that gray is just right.
I’ve also noticed that label-badge-text-color is set to #FFFFFF, when it should be #767676. This makes the badge icons in lovelace invisible.
Is there really still no selectable default skill. If I would set a user skill (dark one), but want to override this in a lovelace view (e.g. for the browser plugin described in the HA blog), I cannot select default.
I tried to create a custom one with starting point above, but with this limited lines, this one is combined with the set user skin. So I took everything from the github link, but this is still not enough and still combined with the set skin. Only with some tweaks, like additional ha-card-background, rewrite of shadow, … I’m near to default, if another skin is set.
BTW This my my current Default try:
#################################################################
# #
# DEFAULT HA #
# #
#################################################################
default_ha:
# The items below are some of the default values from
# https://github.com/home-assistant/frontend/blob/9612bc78fede200cb82f2438bea522ffba47a716/src/resources/ha-style.ts
# Text Colors
text-color: '#ffffff'
primary-text-color: "#212121"
text-primary-color: 'var(--text-color)'
secondary-text-color: "#727272"
text-light-primary-color: "#212121"
disabled-text-color: "#bdbdbd"
# Main Interface Colors
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"
warning-color: "#FF9800"
success-color: "#0f9d58"
info-color: "#4285f4"
# states and badges
state-icon-color: "#44739e"
state-icon-active-color: "#FDD835"
# background and sidebar
background-color: '#fafafa'
primary-background-color: 'var(--background-color)'
background-color-2: '#20293c'
secondary-background-color: "#e5e5e5"
markdown-code-background-color: 'var(--background-color)'
card-background-color: 'var(--ha-card-background)'
ha-card-background: 'rgba(255,255,255,1)'
ha-card-box-shadow: "0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)"
ha-card-border-radius: "4px"
border-color: 'none'
# for label-badge
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"
# for paper-slider
paper-green-400: "#66bb6a"
paper-blue-400: "#42a5f5"
paper-orange-400: "#ffa726"
# set our slider style
ha-paper-slider-pin-font-size: "15px"
But I’m still not sure, if everything is as “default” and esp. not merged, if you have another skin enabled.
And I would be more than happy, if there is a. a selectable “complete” default skin and b. a complete definition of this.
This is just what I was looking for. But it seems no longer to be available. Is there a current version anywhere?
Danke