Basnijholt / lovelace-ios-themes

Hi

I have been switching all my devices to HA and so far so good.
I have installed basnijholt lovelace-ios-themes. from hacs.

Please could someone take me through what to do next.
specifically these instructions -
A step by step guide would be appreciated.

  1. Add the following code to your configuration.yaml file (reboot required).

frontend:
… # your configuration.
themes: !include_dir_merge_named themes
… # your configuration.

  1. Add the following line to your lovelace-ui.yaml or use the RAW editor:

background: var(–background-image)

Thank you in advance.

Hello Ashley,
welcome here! Two pieces of information are needed:
Do you have access to your configuration.yaml file?
What mode are you using? The standard interface or yaml mode?

Thanks for replying

Yes I have access to the Configuration.yaml file.
I am using the standard interface from the overview screen

Great, let’s go:

A.

  1. Access your config directory
  2. Check if there’s a folder names themes
  3. Open your configuration.yaml file
  4. Look for the line frontend:
  5. Add under that line themes: !include_dir_merge_named themes (take care of the right indentation!)
    Example:
#### configuration.yaml
homeassistant:
  name: !secret home_location
  …

automation: !include automations.yaml
group: !include groups.yaml
scene: !include scenes.yaml
script: !include scripts.yaml

…

frontend:                                                                 # <—— no indentation 
  themes: !include_dir_merge_named themes       # <—— 2 step indentation 

  1. Save your configuration.yaml file
  2. Restart Home Assistant

B.

  1. After your HA has been restarted, go to your dashboard
  2. Click on the 3 vertical dots in the top right corner to access edit mode
  3. Click again on the 3 vertical dots in the top right corner and choose ‘raw configuration editor’
  4. Add in the very first line above all other lines background: var(--background-image)
  5. Save the raw config
  6. Close the raw config view by clicking on the x in the top left corner

Hi error message on validation

Invalid config for [frontend]: string value is None for dictionary value @ data[‘frontend’][‘themes’][‘ios-dark-mode-dark-blue’][‘resources’]. Got None. (See /config/configuration.yaml, line 13).

This is my file


Thanks for your time

Your configuration.yaml is correct; the failure message references to a ressources error. Sometimes it helps to clear the browser cache. Alas, sometimes the HACS installation fails. Have you checked the theme folder?

1 Like

Thank you very much pedolsky. I removed the theme and re downloaded it and cleared the cache.
All ok now.

Regards

Ashley

Glad to hear!

One last question please.

I am using the custom button card and want to change the colour of my icon.

what is the input in the code editor?

thanks

Please post your code.

Hi pedolsky.

This is my attempt at a code for a lamp switch. Please be aware I learnt everything about Yaml code online in the last few weeks. I didn’t know anything about it before then​:man_shrugging:t2::joy:

type: custom:button-card
styles:
card:
- background-color: ‘#512E5F
- font-size: 17px
- font-weight: bold
- height: 95px
- width: 95px
- color: Black
- icon: mdi:lamp-outline
state:

  • value: ‘on’
    styles:
    card:
    - background-color: ‘#7cd147
    - font-size: 20px
    - font-weight: bold
    - height: 95px
    - width: 95px
    - color: black
    icon: mdi:lamp-outline
    action: toggle
    name: Bedroom 1

Thanks again

There are several possibilities:

######## state definitions
      - type: custom:button-card
        entity: light.test
        name: Bedroom 1
        icon: mdi:cat
        styles:
          card:
            …
        state:
          - value: 'on'
            icon: mdi:lamp-outline
            color: red
            styles:
              card:
                …
          - value: 'off'
            icon: mdi:lamp
            color: white
            styles:
              card:
                …

######## color type definitions*
      - type: custom:button-card
        entity: light.test
        name: Bedroom 1
        icon: mdi:lamp-outline
        color_type: icon
        color: auto
        styles:
          card:
            …
        state:
          - value: 'on'
            styles:
              card:
                # any other styles #


######## template definitions
      - type: custom:button-card
        entity: light.test
        name: Bedroom 1
        icon: mdi:lamp-outline
        color_type: icon
        color: |
          [[[ return entity.state == 'on' 
              ? 'yellow'
              : 'pink'
          ]]]
        styles:
          card:
            …

*see

Color of the icon/card. auto sets the color based on the color of a light including the temperature of the light. Setting this to auto-no-temperature will behave like home-assistant’s default, ignoring the temperature of the light. By default, if the entity state is off , the color will be var(--paper-item-icon-color) , for on it will be var(--paper-item-icon-active-color) and for any other state it will be var(--primary-text-color) . You can redefine each colors using state

1 Like

Thanks again.

I’m slowly beginning to understand the yaml basics

I will carry on learning.

I could use some help trying to get this up and going. I’ve added to the Config .yaml file and rebooted and am greeted with "Setup failed for themes Integration not found as well as Failed to load integration for translation: Integration ‘themes’ not found.