My first theme

Configuration Frontend
1

Hi all!!!

I tried to create my own theme so I can tweak a bit the colors and learn how this whole lovelace thing works. So here is what I did:

I created a new folder in my themes folder called my-theme
Inside that folder I created a file called my_theme.yaml
I copied the code from the ios-dark-mode-blue-red theme in the my_theme.yaml
I copied the image in the my-theme folder
I made changes in the code referring to the background image location
I restarted HA
I selected my theme in a dashboard and I can’t see the background image. Is there anything else I have to change/fix to see the background image?

Here is my theme yaml code

#
# iOS Dark Mode Theme - blue-red
#
ios-dark-mode-blue-red:
  # Global
  background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/my-theme/homekit-bg-blue-red.jpg')"
  lovelace-background: var(--background-image)
  primary-color: "#ff9f09"  # from Apple systemOrange dark mode
  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
  primary-background-color: "#2c2c2e"  # systemGray5 dark mode
  secondary-background-color: rgba(25, 25, 25, 0.9)
  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode
  accent-color: rgba(255, 159, 9, 1)
  # Text
  primary-text-color: "#FFF"
  secondary-text-color: "#d3d3d3"
  text-primary-color: "#FFF"
  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
  text-dark-color: "#FFF"
  # Sidebar Menu
  sidebar-background-color: var(--primary-background-color)
  sidebar-icon-color: var(--light-primary-color)
  sidebar-text-color: "#F1F1F1"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  # States and Badges
  state-icon-color: "#FFF"
  state-icon-active-color: rgba(255, 214, 10, 1)  # or make light icons yellow when active: rgba(255, 214, 10, 1)
  state-icon-unavailable-color: var(--disabled-text-color)
  paper-item-icon-active-color: rgba(255, 214, 10, 1)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
  # Sliders
  paper-slider-knob-color: "#FFFFFF"
  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: 20px
  ha-card-background: rgba(10, 10, 10, 0.4)
  paper-card-background-color: var(--ha-card-background)
  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357
  # 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(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  # 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.8)  # e.g., background of more-info
  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)
  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
  app-header-background-color: rgba(30, 2, 61, 0.4)
  markdown-code-background-color: "#464646"
  code-editor-background-color: "#161616"
  # Custom
  mcg-title-letter-spacing: .15em
  mini-media-player-base-color: white
  mini-media-player-icon-color: white
  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72
  input-ink-color: var(--primary-text-color)
  input-fill-color: transparent
  input-disabled-fill-color: transparent
  input-label-ink-color: var(--primary-text-color)
  input-disabled-ink-color: var(--disabled-text-color)
  input-dropdown-icon-color: var(--primary-text-color)
  input-idle-line-color: var(--secondary-text-color)
  input-hover-line-color: var(--secondary-text-color)
  codemirror-property: var(--accent-color)

and here is my configuration.yaml file


# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes


# Text to speech
tts:
  - platform: google_translate

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

#Sonoff Sensors Compensate
template:
  - sensor:
      - name: "lounge_temp_offset"
        unit_of_measurement: "°C"
        state: "{{ states('sensor.sonoff_a480041241_temperature')|float -1 }}"

  - sensor:
      - name: "bedroom_temp_offset"
        unit_of_measurement: "°C"
        state: "{{ states('sensor.sonoff_a48003fc6b_temperature')|float +1 }}"

  - sensor:
      - name: "studio_temp_offset"
        unit_of_measurement: "°C"
        state: "{{ states('sensor.sonoff_a48004331f_temperature')|float +1 }}"

  - sensor:
      - name: "terrace_temp_offset"
        unit_of_measurement: "°C"
        state: "{{ states('sensor.sonoff_a480044815_temperature')|float -3 }}"

# Example of History Stats use
sensor:
  - platform: history_stats
    name: Lamp ON today
    entity_id: light.bookshelf
    state: "on"
    type: time
    start: "{{ now().replace(hour=0, minute=0, second=0) }}"
    end: "{{ now() }}"
# Time & date
  - platform: time_date
    display_options:
      - "time"
      - "date"
      - "date_time"
      - "date_time_utc"
      - "date_time_iso"
      - "time_date"
      - "time_utc"
      - "beat"
# Parts of the day - View the current part of the day
  - platform: template
    sensors:
      greeting:
        friendly_name: 'Part of the day'
        value_template: >
          {% set state = states('sensor.time') %}
          {% if '22:00' <= state < '06:00' %}
            Night
          {% elif '06:00' <= state < '08:00' %}
            Morning
          {% elif '08:00' <= state < '20:00' %}
            Day
          {% else %}
            Evening
          {% endif %}

Can anyone help a noobie? :slight_smile:

2

There are a few people who are having an issue where the background image is no longer showing. I think it happened after the last update but I’m not 100% sure.

Try loading it in Chrome. Hit the f12 key to open the inspector and reload the page the background is on (CTRL+F5). In the inspector, hit the network tab and see what it says. I get a 404 in red when it tried to load my background.

3

Just FYI, I tried saving my background to imgur and linking to it in the theme yaml file and it works. I also tried linking to another folder in HA away from the themes folder but it didn’t work.

4

I think for local files these needs to be put into config/www folder to work. I do not recall rationale behind this, but for some reason all graphics I use are loaded to this folder and it works for me…