Dwains Dark Theme

A Lovelace Dark theme based on Dwains Dashboard

Created by Léon van der Linden

Also take a look at Dwains Light Theme

Dwains Light Theme	Dwains Dark Theme

Prerequisite ⚙️

---

• Make sure you can access youre Home Assistant config files with Samba Share or ssh

Installation Dwains Dark Theme ⚙️

---

• Download the themes folder and place dwains_dark_theme in to your config/theme directory.
• Make shure you have created a themes folder in youre config/ directory and added the following code to youre configuration.yaml

# Core Configuration
default_config:
frontend:
  themes: !include_dir_merge_named themes/

• Reboot Home Assistant or after installation Dwains Dark Theme

Selecting Dwains Dark Theme 🔧

---

• Click on youre profile picture
• By themes you need to select Dwains Dark Theme

Automation options 🔧

---

Set HA theme for day and night

• When you want to switch automatic between the Dark and Light theme based on the sun, please copy the file auto_switch_theme.yaml into youre automations.yaml or directory
• Reboot Home Assistant

- alias: Set HA theme for day and night
  id: set_theme_for_day_and_night
  trigger:
    - platform: homeassistant
      event: start
    - platform: state
      entity_id: sun.sun
      to: above_horizon
    - platform: state
      entity_id: sun.sun
      to: below_horizon
  action:
    - service: frontend.set_theme
      data:
        name: >
          {% if states.sun.sun.state == "above_horizon" %}
            Dwains Light Theme
          {% else %}
            Dwains Dark Theme
          {% endif %}

Automation for default theme after starup HA

• When you want to have a default theme after startup HA, please copy the file set_theme_at_startup.yaml into youre automations.yaml or directory
• Reboot Home Assistant

- alias: 'Set theme at startup'
  trigger:
    platform: homeassistant
    event: start
  action:
    service: frontend.set_theme
    data:
      name: Dwains Dark Theme

State icons 🎨

---

Name	Type	Default	Since	Code
state icon	color	#299ec2	v2.0.1	color: var(-- state-icon-active-color)
active icon	color	#ffd60a	v2.0.1	color: var(--state-icon-color)
unavailable icon	color	#a9b1bc	v2.0.1	color: var(--state-icon-unavailable-color)

Fonts 🎨

---

Theme font (HA)

• If you whant to change the font of HA, you can change the Google font in theme theme file on line 8

primary-font-family: 'Open Sans' # <- if you whant to change the font, fill in de richt google font name between ''

Dwains Dashboard font

• If you want to change the fonnt from Dwains Dashboard, to get it the same as your HA theme, go to the dashboard theme files in directory /config/custom_components/dwains_dashboard/lovelace/themefiles/
• Open the dashboard theme .yaml file
• Search for primary-font-family: 'Open Sans'
• Fill in the right Google font name between ''
• Reboot Home Assistant

Dark and Light Theme 🎨

---

Icon	Place	Type
🎨	Lovelace Theme	Dwains Light Theme
🎨	Lovelace Theme	Dwains Dark Theme

Dwains Light Theme	Dwains Dark Theme

Result

---

Enjoy my Lovelace theme? Help me out for a couple of 🍻 or a ☕!