Share your Themes

[gareth78 (Gareth)]

@Tyfoon @klogg @FaceBush - hope this helps, let me know if i can document any more parts of it.

Here is my raw theme YAML file:

# Theme Name
Colourful:
  background-image: linear-gradient(230deg, rgb(29, 3, 68), rgb(30, 71, 91) 50%, rgb(144, 57, 73))
  header-image: hsla(0,0%,100%,.1)
  secondary-background: var(--background-image)


# Colour Palette
  p-col: "#FF6188"
  p-light-col: "#ffca47"
  p-dark-col: "#c66a00"
  b-col: "#606060"
  b-light-col: "#8d8d8d"
  b-dark-col: "#363636"
  text-on-p: "#000000"
  text-on-b: "#ffffff"

  colour-pink: "#FF6188"
  colour-black: "#36454f"
  colour-white: "#fdfff5"
  colour-dark-blue: "#36454f"
  colour-lighter-grey: "#727072"
  colour-yellow: "#fdbb2d"
  colour-blue: "#0984FF"
  colour-aqua: "#488EA3"
  colour-purple: "#2A56A7"
  colour-red: "#4f3645"
  colour-row1: "#7691a2"
  colour-row2: "#95a9b7"

  button-active: "#fdfff5"
  button-active-text: "#36454f"

  # red for finding element
  # var(--colour-finder1)
  colour-finder1: "#ff0000"

  # green for finding element
  # var(--colour-finder2)
  colour-finder2: "#00ff00"

  # cyan for finding element
  # var(--colour-finder3)
  colour-finder3: "#00ffff"

  primary-color: var(--colour-yellow) #text on header when it's submenu or selector, color of full dimmer on light - MAYBE REVERSE TO BRIGHT WITH DARK TEXT
  light-primary-color: var(--colour-red) # color of cirle around username and icons
  primary-background-color: var(--colour-dark-blue) #checker board on main page and header on subpage
  secondary-background-color: var(--colour-dark-blue) # alternating lines on state page background of username menu
  divider-color: var(--primary-background-color) # thin dividing lines on page including dashboard
  accent-color: var(--colour-pink) # little edit buttons the ones that look like penicls
  
# Text
  primary-text-color: var(--colour-white) #HA Name, main titles, letter in username
  secondary-text-color: var(--colour-yellow)  # secondary text on cards on on pickers and kebabs, through menus
  text-primary-color: var(--colour-white) # underline on subment in addons
  disabled-text-color: var(--colour-lighter-grey) # remaining dimmer on a light after current point, donw arrow on menu

  # Sidebar Menu
  sidebar-icon-color: var(--colour-white) # also include back arrows
  sidebar-text-color: var(--colour-white)
  sidebar-selected-background-color: var(--colour-finder1)
  sidebar-selected-icon-color: var(--colour-white)
  sidebar-selected-text-color: var(--colour-white)
  # States and Badges
  state-icon-color: var(--colour-white)
  state-icon-active-color: var(--colour-yellow)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--colour-finder1)

  # Sliders
  paper-slider-knob-color: "#FFF"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode
  paper-slider-secondary-color: var(--paper-slider-knob-color)
  paper-slider-container-color: rgba(255, 255, 255, 0.5)
  paper-slider-font-color: "#000"
  ha-slider-background: none !important
  # 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
  # Cards
  card-background-color: var(--secondary-background-color)  # Unused entities table background
  paper-listbox-background-color: var(--primary-background-color)
  ha-card-border-radius: 7px #reduced from 20
  ha-card-background: "#0a0a0a60"
  paper-card-background-color: var(--ha-card-background)
  # Toggles
  paper-toggle-button-checked-button-color: "#484848"
  paper-toggle-button-checked-bar-color: "#484848"
  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
  # Table row
  table-row-background-color: var(--colour-row1)
  table-row-alternative-background-color: var(--colour-row2)
  # Switches
  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode
  switch-checked-button-color: "#FFF"
  # Other
  paper-dialog-background-color: rgba(55, 55, 55, 0.6)
  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)
  more-info-header-background: rgba(25, 25, 25, 0.5)
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # mini-media-player-artwork-opacity: 0.7  # causing some bug

  # HACS
  hacs-badge-color: 'var(--primary-color)'                                         # New Badge
  hacs-status-installed: 'var(--text-color)'                                      # Installed Icon
  hacs-status-pending-restart: 'var(--text-light-color)'                          # Restart Icon
  hacs-status-pending-update: 'var(--accent-color)'                               # Update Icon

My custom compact header config:

custom_header:
  active_tab_color: var(--colour-yellow)
  background: var(--header-image)
  compact_mode: true
  elements_color: var(--button-active)
  tab_indicator_color: var(--colour-yellow)

Example of light button:

entity: light.table_lamp
name: Table Lamp
template: lightswitch_bc_template
type: 'custom:button-card'

Lightswitch_bc_template from RAW config:

button_card_templates:
  lightswitch_bc_template:
    aspect_ratio: 1/1
    color: auto
    hold_action:
      action: more-info
      haptic: light
    show_state: false
    size: 45%
    state:
      - styles:
          card:
            - background-color: var(--button-active)
          name:
            - color: var(--button-active-text)
        value: 'on'
    styles:
      card:
        - font-size: 100%
    tap_action:
      action: toggle
      haptic: light

Title Examples:

Welcome home:

content: |
  ## Welcome home, {{user}}
style: |
  ha-card {
    margin: 0px 14px -5px 14px;
    box-shadow: none;
    background: none;
  }
  ha-icon {
    float: right;
  }
  h2 {
    font-size: 26px;
    font-weight: 100;
    padding-left: 10px;
    border-left: 3px solid var(--colour-yellow);
  }
type: markdown

Room Heading:

content: |
  ## Navigation
style: |
  ha-card {
    margin: 0px 14px -5px 14px;
    box-shadow: none;
    background: none;
  }
  ha-icon {
    float: right;
  }
  h2 {
    font-size: 18px;
    font-weight: 100;
    padding-left: 10px;
    border-left: 3px solid rgba(253, 187, 45);
  }
type: markdown

Status Icons:

double_tap_action:
  action: more-info
entity: binary_sensor.home_occupied
show_name: false
show_state: false
state:
  - color: var(--disabled-text-color)
    icon: 'mdi:home-circle-outline'
    value: 'off'
  - color: var(--primary-color)
    icon: 'mdi:home-circle'
    value: 'on'
style: |
  ha-card {
    background: none;
    box-shadow: none;
  }
tap_action:
  action: none
type: 'custom:button-card'

[klogg]

Excellent. Thank you.

[Tyfoon]

Thanks mate!

[firstof9]

From what I can tell try this in a theme:

ha-card-header-color:  var(--primary-color)

unfortunately I don’t see one for font-weight halfway there tho right?

[ObiKaiKenobi]

Hi community,

could anyone please give me a hint where to fix this issue?

First of all this is my current theme (as seen before in this thread):

trantsprent_theme:
# Main colors
# https://www.color-hex.com/color/5294e2
  primary-color: '#5294E2'                                                        # Header
  accent-color: '#E45E65'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks                                         
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
  ha-card-border-radius: '6px'   
  ha-card-background: 'rgba(150, 150, 150, 0.1)'
  
# Text colors                                                                  
  primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
  text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
#  secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
  secondary-text-color: '#74a9e7'                                                 # For secondary titles in more info boxes etc.
  disabled-text-color: '#7F848E'                                                  # Disabled text colour
  label-badge-border-color: 'green'                                               # Label badge border, just a reference value   

# Background colors                                                            
#  primary-background-color: '#383C45'                                             # Settings background
  primary-background-color: '#4b4f57'                                             # Settings background
  secondary-background-color: '#383C45'                                           # Main card UI background  
  divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider 

# Table rows                                                                   
  table-row-background-color: '#353840'                                           # Table row
  table-row-alternative-background-color: '#3E424B'                               # Table row alternative

# Nav Menu                                                                   
  paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
  paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
  paper-grey-50: 'var(--primary-text-color)'                                   
  paper-grey-200: '#414A59'                                                       # Navigation menu selection
  sidebar-icon-color: 'var(--primary-color)' 

# Paper card                                                               
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  paper-card-background-color: 'rgba(150, 150, 150, 0.1)'                         # Card background colour
  paper-dialog-background-color: '#434954'                                        # Card dialog background colour
  paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#F9C536'                                         # Icon color active
  paper-item-icon_-_color: 'green'           
  paper-item-selected_-_background-color: '#434954'                               # Popup item select                      
  paper-tabs-selection-bar-color: 'green'
  card-background-color: 'var(--paper-card-background-color)'
  
# Labels 
  label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
  label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
  label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here
  label-badge-background: 'rgba(255, 255, 255, 0.1)'

# Switches
  paper-toggle-button-checked-button-color: 'var(--accent-color)'
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  paper-toggle-button-checked-ink-color: 'var(--accent-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'  

# Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

# Google colors
  google-red-500: '#E45E65'
  google-green-500: '#39E949'

# Sidebar
  sidebar-background-color: 'var(--primary-background-color)'
  sidebar-icon-color: 'var(--primary-text-color)'
  sidebar-selected-icon-color: 'var(--primary-color)'
  sidebar-selected-text-color: 'var(--primary-text-color)'
  sidebar-text-color: 'var(--primary-text-color)'
  slider-bar-color: 'var(--disabled-text-color)'
  slider-color: 'var(--primary-color)'
  slider-secondary-color: 'var(--light-primary-color)'

# Table
  table-row-background-color: 'var(--primary-background-color)'
  table-row-alternative-background-color: 'var(--secondary-background-color)'
  data-table-background-color: 'var(--primary-background-color)'

# compact-custom-header https://github.com/maykar/compact-custom-header/wiki/Styling-Config
#  cch-background: 'rgba(150, 150, 150, 0.2)'

In most of the drop-down menues the backround color is rendered correctly:

But all drop-downs under the development-tools are shown with transparent packground and therfore are hard to read:

I haven’t figured it out yet and would appreciate every bit of help.

THX to all of you!

[Krocko]

It is card-background-color.
U use the value from paper-card-background-color. And there is a transparency (0.1).

[ObiKaiKenobi]

Danm @Krocko, you are genius!!

Changed it to card-background-color: var(--paper-listbox-background-color) and everything is fine.

Thank you and have a good one!

[Eoin]

@ObiKaiKenobi

var(–paper-listbox-background-color)

I’ve had this issue for weeks or longer and been too lazy to work out a solution, thank you so much!

[Markus99 (Mark)]

Any ideas on what changes these two items? They’re both #000 on my theme…

[Krocko]

It is a bug in the frontend. @ludeeus has already fixed this. I think it is available in ha 0.110

[ludeeus]

I did not fix it, @basnijholt did https://github.com/home-assistant/frontend/pull/5754
And it is a part of supervisor 221, which has it’s own release schedule.

[Krocko]

Thank you for clarification.

[DickSwart]

Swart Ninja Dark Theme

If you like this theme please star this repo and share with your friends.

Screenshots

Overview of some of Home Assistant native controls.

Notifications

Developer Tools

Configuration

Profile

---

Support

If you like this theme please star this repo and share with your friends.

[AgMa]

Hi,
Thanks for your share, I’m trying your theme but I have some issues.
First of all, can’t show the background image that you have. Also light button is completely white when enabled. Any help?

[gareth78 (Gareth)]

HI AgMa,

you should be able to check the background quickly by taking out the variable, in your RAW config for lovelace add the following line:

background: linear-gradient(230deg, rgb(29, 3, 68), rgb(30, 71, 91) 50%, rgb(144, 57, 73))

See if that works.

Regarding the light colour when on, part of this will depend on what colour you lights are, temp and colour are relevant, i’ll highlight the relevant bit below, keep in mind i am using the custom:button-card addon:

type: 'custom:button-card'
entity: light.table_lamp
name: Table Lamp
aspect_ratio: 1/1
color: auto #<-----this sets the colour of the button to match the colour of the light
hold_action:
    action: more-info
    haptic: light
show_state: false
size: 45%
state:
    - styles:
        card:
        - background-color: var(--button-active)
        name:
        - color: var(--button-active-text)
    value: 'on'
styles:
    card:
    - font-size: 100%
tap_action:
    action: toggle
    haptic: light

[AgMa]

Thanks for your response. Yes it is working. I thought that this:

Colourful:
  background-image: linear-gradient(230deg, rgb(29, 3, 68), rgb(30, 71, 91) 50%, rgb(144, 57, 73))
  header-image: hsla(0,0%,100%,.1)
  secondary-background: var(--background-image)

had to be into theme.yaml file.
So according to this, this part of code has to be in lovelace and not into theme.yaml?
Regarding the light colour when on, I mean this:

[gareth78 (Gareth)]

AgMa,

you can achieve the background through either lovelace or theme.yaml, the answer i gave last time was using lovelace. The way i do it is through theme.yaml file but in order to do it you have to add a variable configuration to lovelace:

lovelace entry:

background: var(--background-image)

theme.yaml file:

Colourful:
  background-image: linear-gradient(230deg, rgb(29, 3, 68), rgb(30, 71, 91) 50%, rgb(144, 57, 73))

Hope that makes sense.

With regard to your buttons being white, thats config straight in the button:

    state:
      - styles:
          card:
            - background-color: var(--button-active) #<--------
          name:
            - color: var(--button-active-text)
        value: 'on'

You can see in my example why i do it. but i also never have a full width button i always go with a horizontal-stack and have blanks where i need them:

color_type: blank-card
type: 'custom:button-card'

Try removing that. or in your theme.yaml file change the var(–button-active) variable to something else. Sorry it’s not the cleanest config as i mentioned i do need to tidy it up, but the more experimentation i do the more messy it gets

[AgMa]

From what I understand, there is no problem with the button or the code. But when the light is set to white (it’s an rgb bulb) it’s invisible because it’s the same colour as the rest button border.
Maybe outline could help here?

[denisj (Denis Joshua)]

Hey @Tyfoon,
in my opinion your modifed theme is the most nice of all themes.
Do you think is possible to have it via HACS please ?
Thanks a lot

[denisj (Denis Joshua)]

I think the site is not working again
Have you a link to the last version of this theme please ?
Thanks