Share your Themes

bergasha · November 17, 2020, 9:55pm

That looks amazing mate, Well done.

Sjefske · January 22, 2021, 12:18pm

I made my own version of a dark theme slightly transparant

Dark-Sjefske:
# Global
  lovelace-background: 'center / cover no-repeat url("https://cdn.hipwallpaper.com/i/82/46/quiEhb.jpg") fixed'

# Colors
  text-color: '#f0f0f0'                                                           # Grey text
  text-medium-light-color: '#bbbcbf'                                              # Medium-light grey text
  text-medium-color: '#9d9ea3'                                                    # Medium grey text
  text-dark-color: '#7b7c85'                                                      # Dark grey text
  accent-color: '#ffa500'                                                         # Orange
  accent-medium-color: '#d49115'                                                  # Decent orange
  background-color: '#000000'                                                     # BLACK background
  background-color-transp: 'rgba(150, 150, 150, 0.1)'                                   # white transparant background

# Header
  app-header-background-color: 'var(--background-color)'                                          # Background color
  
# Primair
  primary-color: 'var(--accent-color)'                                 # Sliders + media player 
  divider-color: 'var(--text-medium-color)'
# Text
  text-primary-color: 'var(--text-color)'
  
# Left Menu
  paper-listbox-background-color: 'var(--background-color)'                     # Background
  sidebar-icon-color: 'var(--text-medium-color)'                                # icons
  sidebar-selected-icon-color: 'var(--text-medium-light-color)'                 # Selected row icon and background (15%)
  sidebar-selected-text-color: 'var(--text-color)'                              # Selected row label

# UI
  paper-card-header-color: 'var(--text-color)'                                  # Title in settings
  primary-background-color: 'var(--background-color)'                           # Background (also title background in left menu)
  mdc-theme-primary: 'var(--accent-medium-color)'                               # Action Buttons (save, restart etc.)
  card-background-color: 'var(--background-color)'                              # Entity Registry Background
   
# Card
  paper-card-background-color: 'var(--background-color-transp)'                   # Background
  primary-text-color: 'var(--text-color)'
  paper-listbox-color: 'var(--text-color)'                                      # TEXT IN POPUP BOX
  light-primary-color: 'var(--text-dark-color)'
  secondary-text-color: 'var(--text-medium-color)'
  disabled-text-color: 'var(--text-dark-color)'
  paper-dialog-button-color: 'var(--text-medium-color)'
  secondary-background-color: 'var(--background-color)'                         # Background more info title
  ha-card-border-radius: '6px'

# Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode
  
# Icons
  paper-item-icon-color: 'var(--text-dark-color)'                                 # Off
  paper-item-icon-active-color: 'var(--accent-color)'                             # On
  
# Switches
  switch-checked-button-color: 'var(--text-medium-color)'                   # Knob On
  switch-unchecked-button-color: 'var(--text-medium-color)'                 # Knob Off
  switch-checked-track-color: 'var(--accent-color)'                                           # Background On
  switch-unchecked-track-color: 'var(--text-dark-color)'                                     # Background Off

# Slider
  
# Shadows
  ha-card-box-shadow: 'inset 0px 0px 2px 2px rgba(255, 255, 255, 0.1)'

Fabian_V · January 23, 2021, 3:44pm

Nice one… did install this one…

basti4k · January 24, 2021, 8:39am

ING Dark Theme

aschor · March 4, 2021, 12:42pm

hi @akkaria, seems like your website has been hackked again …

JOHLC · March 7, 2021, 10:45pm

Here is my theme, available to install via HACS
https://community.home-assistant.io/t/transparent-blue-custom-theme

dougmaitelli · June 18, 2021, 3:19am

Thank you very much to @PhysicalMagic for the amazing work done. I tried to use these config values but they don’t seem to work properly on recent lovelace versions, many colors don’t apply in the correct places. So I decided to use that as inspiration to make something similar looking and very simple.

MyDark:
  base-hue: '220' #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
  base-sat: '16%' #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
  
  huesat: 'var(--base-hue), var(--base-sat),'
  
  # Primary Color
  primary-color: 'hsl(var(--huesat) 60%)'
  accent-color: 'hsl(var(--huesat) 60%)'

  # Nav Bar
  app-header-background-color: 'hsl(var(--huesat) 20%)'
  app-header-text-color: 'hsl(var(--huesat) 100%)'

  # Backgrounds
  sidebar-background-color: 'hsl(var(--huesat) 20%)'
  primary-background-color: 'hsl(var(--huesat) 16%)'

  # Sidebar
  sidebar-icon-color: 'hsl(var(--huesat) 60%)'
  sidebar-text-color: 'hsl(var(--huesat) 60%)'
  sidebar-selected-icon-color: 'hsl(var(--huesat) 90%)'
  sidebar-selected-text-color: 'hsl(var(--huesat) 90%)'

  # Text
  primary-text-color: 'hsl(var(--huesat) 90%)'
  secondary-text-color: 'hsl(var(--huesat) 90%)'
  disabled-text-color: 'hsl(var(--huesat) 70%)'

  # Divider
  divider-color: 'hsla(0, 0%, 0%, 0)'
  dark-divider-opacity: '0'
  light-divider-opacity: '0'

  # Card
  card-background-color: 'hsl(var(--huesat) 12%)'
  ha-card-background: 'var(--card-background-color)'
  ha-card-box-shadow: 'inset 0px 0px 0px 4px hsl(var(--huesat) 18%)'

  # Dialog
  dialog-backdrop-filter: 'blur(2px)'

EDIT:
I’ve made a few updates and improvements to this config, feel free to reach out if you are interested.

akszyn_pl · July 4, 2021, 10:40pm

Could I ask for information on where to get Aurora Frost theme and how to use it? because in this post I did not find information about it

sdebruyn · November 18, 2021, 9:51pm

Your website is down again, do you have it on GitHub somewhere?

silvrr · November 18, 2021, 10:38pm

github.com

yuvalabou/HomeAssistant-Config/blob/0e9badcc4c5f97bf19c06a3a49744a6e98acb5dd/themes/aurora_frost/aurora_frost.yaml

aurora_frost:

  # Fonts
  primary-font-family: 'Raleway,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"
  ha-card-header-font-family: "var(--primary-font-family)"

  # 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'

This file has been truncated. show original

Github history is a great thing. youll have to comb through the history and see if that background image was ever uploaded.

udisteanumarian · December 2, 2021, 12:55pm

Hello there!

I am new here (2, 3 weeks in Home assistant) and here is my theme. It plays video on background and has a buton to change it. If you are interesed in how i make it, let me know and i will try to recreate the steps that i folowed.

GrizzlyAK · December 19, 2021, 2:05am

That would be super!

chasut · December 30, 2021, 5:07pm

Very nice. Please do share. Thanks

Mariusthvdb · January 2, 2022, 10:52am

found this variable in one of the above themes:

markdown-code-background-color: 'var(--background-color)'

and tried that, but none of my markdown cards use it apparently… what is this for, anyone using it?

Sjefske · March 8, 2022, 9:55am

Hi guys with the update 2022.3 there are some changes in the text fields
with the following addition this is solved

# text boxes in [2022.3]
  input-idle-line-color: 'var(--background-color)'
  input-hover-line-color: 'var(--background-color)'
  input-disabled-line-color: 'var(--text-medium-light-color)' 
  input-outlined-idle-border-color: 'var(--text-medium-light-color)' 
  input-outlined-hover-border-color: 'var(--text-medium-light-color)' 
  input-outlined-disabled-border-color: 'var(--text-medium-light-color)' 
  input-fill-color: 'var(--background-color)'
  input-disabled-fill-color: 'var(--background-color)'
  input-ink-color: 'var(--text-color)'
  input-label-ink-color: 'var(--text-color)'
  input-disabled-ink-color: 'var(--text-color)'
  input-dropdown-icon-color: 'var(--text-color)'

Sjefske · November 7, 2022, 9:47am

in the 2022.11 update the divider colour doesn’t match anymore
please see new version below


#########################################################################################################################################
#
#                  dark Sjefske v2 
#
#########################################################################################################################################

Dark-Sjefskev2:
# Global
  lovelace-background: 'center / cover no-repeat url("https://MY_PICTURE_URL.jpg") fixed'

# Colors
  text-color: '#f0f0f0'                                                         # Grey text
  text-medium-light-color: '#bbbcbf'                                            # Medium-light grey text
  text-medium-color: '#9d9ea3'                                                  # Medium grey text
  text-dark-color: '#7b7c85'                                                    # Dark grey text
  accent-color: '#ffa500'                                                       # Orange
  accent-medium-color: '#d49115'                                                # Decent orange
  background-color: '#000000'                                                   # BLACK background
  background-color-transp: 'rgba(10, 10, 10, 0.7)'                              # white transparant background
  devider-color: '#212121'

# Header
  app-header-background-color: 'var(--background-color)'                        # Background color
  
# Primair
  primary-color: 'var(--accent-color)'                                          # Sliders + media player 
  divider-color: 'var(--devider-color)'                                         # card edges 
# Text
  text-primary-color: 'var(--text-color)'
  
# Left Menu
  paper-listbox-background-color: 'var(--background-color)'                     # Background
  sidebar-icon-color: 'var(--text-medium-color)'                                # icons
  sidebar-selected-icon-color: 'var(--text-medium-light-color)'                 # Selected row icon and background (15%)
  sidebar-selected-text-color: 'var(--text-color)'                              # Selected row label

# UI
  paper-card-header-color: 'var(--text-color)'                                  # Title in settings
  primary-background-color: 'var(--background-color)'                           # Background (also title background in left menu)
  mdc-theme-primary: 'var(--accent-medium-color)'                               # Action Buttons (save, restart etc.)
  card-background-color: 'var(--background-color-transp)'                              # Entity Registry Background
   
# Card
#  paper-card-background-color: 'var(--background-color)'                       # Background
  primary-text-color: 'var(--text-color)'
  paper-listbox-color: 'var(--text-color)'                                      # TEXT IN POPUP BOX
  light-primary-color: 'var(--text-dark-color)'
  secondary-text-color: 'var(--text-medium-color)'
  disabled-text-color: 'var(--text-dark-color)'
  paper-dialog-button-color: 'var(--text-medium-color)'
  secondary-background-color: 'var(--background-color)'                         # Background more info title
  ha-card-border-radius: '20px'

# Labels
  label-badge-background-color: "#23232E"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: rgba(255, 159, 9, 0.8)                                       # from Apple systemOrange dark mode
  
# Icons
  paper-item-icon-color: 'var(--text-dark-color)'                               # Off
  paper-item-icon-active-color: 'var(--accent-color)'                           # On
  
# Switches
  switch-checked-button-color: 'var(--text-medium-color)'                       # Knob On
  switch-unchecked-button-color: 'var(--text-medium-color)'                     # Knob Off
  switch-checked-track-color: 'var(--accent-color)'                             # Background On
  switch-unchecked-track-color: 'var(--text-dark-color)'                        # Background Off

# Slider
#  paper-slider-active-color: 'var(--accent-color)'                             # Line On
#  paper-slider-container-color: 'var(--text-dark-color)'                       # Line Off
#  paper-slider-knob-color: 'var(--text-medium-light-color)'                    # Knob On
#  paper-slider-knob-start-color: 'var(--text-medium-light-color)'              # Knob Off
  
# Shadows
  ha-card-box-shadow: 'inset 0px 0px 2px 2px rgba(155, 155, 155, 0.2)'
  
# text boxes in [2022.3]
  input-idle-line-color: 'var(--background-color)'
  input-hover-line-color: 'var(--background-color)'
  input-disabled-line-color: 'var(--text-medium-light-color)' 
  input-outlined-idle-border-color: 'var(--text-medium-light-color)' 
  input-outlined-hover-border-color: 'var(--text-medium-light-color)' 
  input-outlined-disabled-border-color: 'var(--text-medium-light-color)' 
  input-fill-color: 'var(--background-color)'
  input-disabled-fill-color: 'var(--background-color)'
  input-ink-color: 'var(--text-color)'
  input-label-ink-color: 'var(--text-color)'
  input-disabled-ink-color: 'var(--text-color)'
  input-dropdown-icon-color: 'var(--text-color)'

denisj · November 21, 2022, 7:47am

Someone have a link to download this theme please ?
Thanks in advance

gomeq · November 21, 2022, 10:50am

Created a dark theme with six different primary colors. These can be found in HACS under the name ** Dark Theme Pack for Home Assistant** or downloaded from this repo. I’m currenlty working on a version which supports both light and dark theme so if you are interested please follow my repo.

zid · December 19, 2022, 2:46pm

Here is my take on it:

Piranha160573 · March 22, 2023, 9:15pm

My first Test