Share your Themes

[aschor (nono)]

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

[JOHLC]

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

[dougmaitelli]

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 (Lord Adrian)]

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 (Sam Debruyn)]

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

[silvrr]

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

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

[udisteanumarian]

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]

That would be super!

[chasut (Charles Sutton)]

Very nice. Please do share. Thanks

[Mariusthvdb (Marius)]

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 (Stefan)]

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 (Stefan)]

@Sjefske

cover no-repeat url("https://cdn.hipwallpaper.com/i/82/46/quiEhb.jpg") fixed'

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 (Denis Joshua)]

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

[gomeq]

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 (Fredrik)]

Here is my take on it:

[Piranha160573]

My first Test

[Piranha160573]

[kilopter (Kiloptero)]

Amazing!! a little question. Im trying to replicate this kibibit Theme with the Chip …

And specially with info in the chip icons. how to do it? thanks a lot

[kilopter (Kiloptero)]

Amazing!! how you create info in the chips and put in the top of the other cards? Thanks!!!

[KAGEY]

I know it’s been a while, but I would love to hear how you made this.