HA-Simple-Theme

A "simple" Home Assistant theme.

Examples

Theme may have been tweaked since writing this README; your milage may vary.

Default

Default color scheme:

• Primary Color: #c7845f $${\color{#c7845f}■}$$
• Accent Color: #dec187 $${\color{#dec187}■}$$

Dark Mode Light Mode

User Edited

Example of a user edited color scheme

• Primary Color: #207336 $${\color{#207336}■}$$
• Accent Color: #f09b51 $${\color{#f09b51}■}$$

Dark Mode Light Mode

Installation

• Allow Home Assistant to read from the themes folder. Append the following to configuration.yaml: (If not already)

  frontend:
    themes: !include_dir_merge_named themes

• Create the themes folder. (if it doesn't exist) Then git clone the repo, and extract theme YAML file.

  mkdir -p /config/themes && cd /config/themes
  git clone https://github.com/GeoDerp/HA-Simple-Theme.git
  mv /config/themes/HA-Simple-Theme/Simple.yaml /config/themes/Simple.yaml

• Press c on the Home Assistant web interface, then type and run All YAML configuration to read the updated YAML changes.
• Select the theme by selecting your profile image on the side bar, and selecting simple in the Theme section.
• For a different color variant, change the following hex colors in the /config/themes/simple.yaml:

    primary-color: "#c7845f"  #Change
    accent-color: "#dec187"  #Change  

  Reset All YAML Configuration and refresh page, to apply any YAML file changes. As of writing, primary-color is used for the majority of the theme; accent-color being used to display some on states.
• If you wish, you can also add the custom lovelace-card-mod css in this repository to their retrospective elements.
  Example: area-card-mod.yaml

  alert_classes:
    - motion
    - moisture
  sensor_classes:
    - temperature
    - humidity
    - power
  type: area
  area: kitchen
  navigation_path: /lovelace/kitchen
  show_camera: false
  card_mod:
    style: |
      .bottom {
      padding: 0 !important;
      margin: 10px !important;
      }
      ha-card:not(.image) .container::before {
          opacity: 0.05;
      }
      .container {
          background: #0000 !important;
      }
      .name, .sensor {
          color: var(--text) !important;
      }
      .name {
          max-width: min-content;
      }
      .buttons {
          min-width: fit-content
      }

  Before:
  
  After:
  
  

Heavily inspired from/copied from:

A shutout to Mushroom Themes and catppuccin in which this theme is inspired and copies aspects from.

piitaya / Mushroom Themes

lovelace-mushroom-themes

catppuccin / home-assistant

catppuccin home assistant theme