Summer breeze

capstan1 · May 16, 2019, 12:42pm

A yellowish theme using a lot of transparency I build within the last weeks and was asked to share.

The code:

summer_breeze:
  lovelace-background: 'center / cover no-repeat url("/local/background-summer_breeze.jpg") fixed' #Background-image
  # Define basic colors
  element-dark-color: "rgba(44,29,5,0.9)"                                                                   # nearly black
  element-light-color: "rgb(47, 35, 23,0.6)"                                                                # Medium grey
  element-medium-color: "rgba(44,29,5,0.7)"                                                                 # Light grey
  accent-color: 'rgba(218,165,32,0.8)'                                                                      # dark-yellow
  accent-color-darker: 'rgba(184,134,11,1)' 
  background-color: '#F7F8F9'                                                                               # Light grey 
  background-color-2: '#dedfe0'                                                                             # Light grey 
  transparent-background-color: 'rgba(255,255,255,0.2)'                                                     # white transparent
  #transparent-background-color-darker: 'rgba(89,87,86,0.15)'                                               # grey transparent
  less-transparent-background-color: 'rgba(89,87,86,0.5)'                                                   # grey less transparent
  non-transparent-background-color: '#A28E66'                                                               # non transparent yelowish grey
  border-color: '#EAEAEA'                                                                                   # Light grey border
  
  # Header
  primary-color: 'var(--non-transparent-background-color)'                                                  # color of the headers background, the highlighted element in the Sidebar, buttons in lovelace
  text-primary-color: 'var(--element-medium-color)'
  # Compact Custom Header
  cch-background: 'var(--less-transparent-background-color)'
  cch-button-color-menu: 'var(--element-dark-color)'

  # Left Menu
  paper-listbox-background-color: transparent #'var(--non-transparent-background-color)'                    # Background of the Menu in sidebar (containing shortcuts)

  # UI
  #paper-card-header-color: #'var(--element-dark-color)'                                                    # Title in settings - doesnt seem to have any effect
  primary-background: 'var(--background-color)'                                                             # background of dialogs, title background in left menu)
  sidebar-background: 'var(--background-color-2)'
  app-toolbar-background-color: transparent

  # Card
  paper-card-background-color: 'var(--transparent-background-color)'                                        # Background of cards -> mostly transparent
  ha-card-border-radius: '10px'                                                                             # rounded corners
  #dark-primary-color: red #'var(--element-dark-color)'                                                     # doesnt seem to have any effect
  #primary-element-dark-color: red #'var(--element-dark-color)'                                             # doesnt seem to have any effect
  paper-listbox-color: 'var(--element-dark-color)'
  light-primary-color: 'var(--accent-color)'
  secondary-element-dark-color: green #'var(--element-light-color)'
  paper-dialog-button-color: red #'var(--element-dark-color)'
  secondary-background-color: transparent #'var(--less-transparent-background-color)'                       # secondary color that can be used by cards, e.g. custom updater card uses it to color every second row, also header of popups

  paper-dialog-background-color: 'var(--background-color)'                                                  # background color of dialogs that appear when clicking on a entity
  paper-dialog-color: 'var(--element-light-color)'                                                          # text color of these dialogs
  paper-dialog-header-background: 'var(--element-dark-color)'
  more-info-header-color: 'var(--element-dark-color)'
  more-info-header-background: white #'var(--less-transparent-background-color)'

  
  # Icons
  paper-item-icon-color: 'var(--element-light-color)'                                                       # Off
  paper-item-icon-active-color: 'var(--accent-color-darker)'                                                # On (gets overriden by light color if its sent)
  
  # Switches
  paper-toggle-button-checked-button-color: '#FFF'                                                          # Knob On
  paper-toggle-button-checked-bar-color:  'var(--accent-color-darker)'                                      # Background On
  paper-toggle-button-unchecked-button-color: '#FFF'                                                        # Knob Off
  paper-toggle-button-unchecked-bar-color: 'var(--element-light-color)'                                     # Background Off
                                                                              
  
  #slider
  paper-slider-knob-color: 'white'                                                                          # color of the handle
  paper-slider-container-color: 'rgba(44,29,5,0.2)'                                                         # color of the sliders line
  paper-slider-active-color: 'rgba(44,29,5,0.4)'                                                            # color of the active part of the slider (left of the knob)
  paper-slider-knob-start-color: 'rgba(255,255,255,0.6)'                                                    # color of the knob when beeing at 0
  paper-slider-height: '5px'                                                                                # thickness of the sliders' line

  #Progress
  paper-progress-height: 7px                                                                                # height of the progress bars

  # Shadows
  shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'
  shadow-elevation-4dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-6dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-8dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-10dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-12dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-14dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 3px var(--light-color)'
  ha-card-box-shadow: "0px 5px 5px rgba(0,0,0,0.3)"

The background image:

(save this as background-summer_breeze.jpg in your www folder)

How to apply this theme (for beginners)

create a folder named themes in your home assistant directory
download summer_breeze.yaml and place it in this new folder
– (place other themes’ files you downloaded before/your preexisting themes.yaml to that very same folder)
download the background image and place it in your www folder (create a folder called www if there is none yet)

add the following to your configuration.yaml

frontend:
  themes: !include_dir_merge_named themes

open the lovelace raw editor in the frontend (top right corner of the overview) and add this line:
```
background: var(--lovelace-background)
```
apply the theme by clicking on your Avatar/your letter in the sidebar and choose summer_breeze there
you’re done!

Custom components I used / Credits:

Compact Custom Header
Card Modder
- changes the colors of the markdown cards I used for headers (“Lautsprecher”, “Sensoren”) darker
- changes the background to transparent for cards used inside vertical stack in card (image 3)
Vertical Stack in Card
- used for cards in image 3
Slider Entity Row
- for the sliders used underneath each light
Simple Weather Card
Mini Graph Card
Mini Media Player
Theme Maker (helped me a lot while tweaking)
I started based on Clear Theme, thanks a lot for this @naofireblade

Hope you like it!

PS: If anyone finds a way to increase the space between cards and between the columns, any hint would be appreciated!

doubleUS · May 16, 2019, 2:41pm

I would like to use this, but the background image doesn’t work. Any idea what could be wrong? I tested it on Safari and Chromium.

silvrr · May 16, 2019, 2:47pm

Is there a file named background-summer_breeze.jpg in your www folder of the config directory? Did you add the theme as noted below? Is the rest of the theme working?

You need to reload the theme and a refresh helps sometimes (ctrl + shift + r ) helps. Check in incognito/private mode to see if its a caching issue.

doubleUS · May 16, 2019, 3:00pm

Yes, yes I think so and yes.

You need to reload the theme and a refresh helps sometimes (ctrl + shift + r ) helps. Check-in incognito/private mode to see if its a caching issue.

Did so. Still doesn’t display the background. Tested it with Brave in the incognito mode.

capstan1 · May 16, 2019, 3:04pm

For me, clearing the browsers cache always forces to reload the background image. You might try that.

silvrr · May 16, 2019, 3:08pm

Try adding the following to your lovelace config.

background: var(--lovelace-background)

Docs:

Example from my config:

github.com

SilvrrGIT/HomeAssistant/blob/master/ui-lovelace.yaml#L25



title: Home
background: var(--background-image)
views:
  - !include lovelace/rooms.yaml
  - !include lovelace/switches.yaml
  - !include lovelace/devicestatus.yaml
  - !include lovelace/ha.yaml
  - !include lovelace/network.yaml
  - !include lovelace/automations.yaml
  - !include lovelace/googlehomehub.yaml

####################################################
#                                                  #
#          END OF CONFIGURATION FILE               #
#                                                  #
####################################################

Dino-Tech · May 16, 2019, 5:20pm

@capstan1 For spacing, you have several options depending on what you are trying to achieve: custom:layout-card for column spacing, lovelace-dummy-entity-row and lovelace-gap-card for card spacing. Hope these help! Nice theme!

capstan1 · May 16, 2019, 5:58pm

Thanks! Gonna give these a look!
Hope that we will be able to define things like these from the theme in the future (also spacing of cards itself)

doubleUS · May 16, 2019, 6:57pm

This did the trick! Thanks. Also for your beautiful theme!

Dino-Tech · May 16, 2019, 7:04pm

On custom:layout-card you can create dummy columns and set them to px or %, eg.

       recurse: false
       card:
         type: custom:layout-card
         layout: vertical
         column_num: 5
         max_width: [392px, 10px, 687px, 10px,  200px]
         cards:
           - type: custom:compact-custom-header

and a dummy card has to be placed in the dummy columns in order to keep the place, or it will ignore the column if nothing is in it. Not the best method, but works…

wzwick · May 28, 2019, 9:48am

love the theme, thanks for including comments to guide us for customizing it.

doubleUS · July 4, 2019, 7:50pm

Could you explain where and how you did this?

doubleUS · July 4, 2019, 8:17pm

Nevermind. I found it already:

cards:
  - artwork: cover
    entity: media_player.woonkamer
    hide:
      controls: false
      icon: false
      info: false
      shuffle: false
      sound_mode: false
      source: false
    name: Radio en Spotify
    shortcuts:
      buttons:
        - id: script.radio_538
          name: Radio 538
          type: script
        - id: script.q_music
          name: Q-Music
          type: script
        - id: script.radio_10
          name: Radio 10
          type: script
        - id: script.veronica
          name: Veronica
          type: script
        - id: script.sky_radio
          name: Sky Radio
          type: script
        - id: script.grandprix_radio
          name: GP Radio
          type: script
        - id: script.bnr
          name: BNR
          type: script
        - id: script.npo_radio_1
          name: Radio 1
          type: script
        - id: script.start_spotify
          name: Spotify
          type: script
        - id: script.playlist_vangelis
          name: Vangelis
          type: script
        - id: script.playlist_eline
          name: Eline
          type: script
        - id: script.playlist_top2000
          name: Top 2000
          type: script
        - id: script.playlist_armin
          name: Armin
          type: script
        - id: script.playlist_zomer2019
          name: Zomer 2019
          type: script
        - id: script.playlist_howard_jones
          name: Howard Jones radio
          type: script
        - id: script.playlist_imagine_dragons
          name: Imagine Dragons radio
          type: script
      columns: 4
      hide_when_off: false
    style: |
      ha-card {
        --paper-card-background-color: rgba(255,255,255,0.1);
      }
    type: 'custom:mini-media-player'
  - entity: media_player.spotify
    hide:
      controls: true
      hide_when_off: false
      icon: false
      info: true
      name: false
      power: true
      runtime: true
      shuffle: true
      source: false
      volume: true
    style: |
      ha-card {
        --paper-card-background-color: rgba(255,255,255,0.1);
      }
    type: 'custom:mini-media-player'
type: 'custom:vertical-stack-in-card'

MRV · July 20, 2019, 6:02pm

Great looking theme!

Sorry for the incredibly newbyish question, but where is the Home Assistant directory? I’m using Hass.io and I don’t see that directory. There is a “config” directory. Should I use that one?

capstan1 · July 21, 2019, 12:06am

Config should be the right one. It’s the same folder were your configuration.yaml is stored.

MRV · August 1, 2019, 4:47pm

Beautiful! Thanks.

evok66 · October 8, 2019, 9:07pm

Hello,
I installed your summer_breeze theme, on HASSOS 2.12 and Home Assistant 0.99.3.
The transparency and the background work properly but not the CCH (the header is still as if there was no CCH) (home wizard problem version 0.99.3?)
In which file should we paste this line? :
background: var (- lovelace-background)

I had to delete the first line of the code of the summer_breeze.yaml file:
" summer_breeze: " because that makes me errors.

Thanks for your help

Here is my code of the configuration.yaml file:

# Configure a default setup of Home Assistant (frontend, api, etc)
default_config:

# Uncomment this if you are using SSL/TLS, running in Docker container, etc.
# http:
#   base_url: example.duckdns.org:8123

# Text to speech
tts:
  - platform: google_translate

group: !include groups.yaml
automation: !include automations.yaml
script: !include scripts.yaml
hacs:
  token: 4e21da53030e085171771bb569446228165e844a
  
# frontend:
#  themes: !include_dir_merge_named themes
  
frontend:
  themes:
    transparent: !include themes/transparent.yaml
    summer_breeze: !include themes/summer_breeze.yaml

evok66 · October 10, 2019, 1:29pm

Writing posts about your themes that does not work is useless! in your documentations you do not check the installed version of HA etc. which evolves with the new versions but the documentations and codes no longer work. If you do not want to share your themes effectively, it does not help the community. Not a single example of your configuration files.yaml! you do not answer simple problems … in spite of this beautiful theme

capstan1 · October 11, 2019, 5:32am

Wow, that’s a nice attitude you bring along. You waited exactly one day before bashing. Not exactly what gets me to answer you. You are aware that the community users here have a real live with real work, too?

The theme works, the instructions are there, as you can see users managed to install it, so just read the instructions.

Where to put this:?
background: var (- lovelace-background)

It’s right there in your screenshot!

So now do your homework and read the instructions carefully. It’s okay to ask questions but Demand things is not what keeps open source alive.

Mariusthvdb · October 11, 2019, 5:54am

sorry to bump this, but checking your 3d image, we see the vertical stacks have these elevated single cards for Küche, Wohnzimer and Bad. Must say I havent seen that yet (do like it!), so please let me ask how you did that?