Configuration

Now that we have downloaded and placed the files, its time to do some configuration.

Load the Theme

1. Open your configuration.yaml file. This file is located in the root of your Home Assistant instance.

2. Add the following code to the top of your file to load frontend themes. This is a part of Home Assistant itself and not HaCasa’s. Place it underneath default_config: if you have that.

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

3. Add the next part of code also to the configration.yaml to enable YAML mode for the new dashboard:

    lovelace:
    mode: "storage"
    resources:
        - url: "/hacsfiles/button-card/button-card.js"
        type: "module"
        - url: "/hacsfiles/my-cards/my-cards.js"
        type: "module"
        - url: "/hacsfiles/kiosk-mode/kiosk-mode.js"
        type: module
        - url: "/hacsfiles/lovelace-card-mod/card-mod.js"
        type: module   
        - url: "/hacsfiles/mini-graph-card/mini-graph-card-bundle.js"
        type: module 
        - url: "/hacsfiles/lovelace-layout-card/layout-card.js"
        type: module        
        - url: "https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900"
        type: css
    dashboards:
        hacasa-dashboard:
        mode: "yaml"
        title: HaCasa
        icon: fapro:house-fill
        show_in_sidebar: true
        filename: "dashboard/HaCasa/main.yaml"
   

   As you can see, we load the needed intergrations and add a new dashboard called HaCasa and because we set the mode to storage (underneath lovelace), we don’t remove any other dashboards you created with UI.

4. Save the file and Restart Home Assistant.

Change the Theme

We have two teams available by default. The gold (and original) one and the new Peach theme. You can always switch later.

1. Go to your Home Assistant profile settings.
2. Change the theme to your desired theme. You can access your profile settings here.

Create a Default View

1. Navigate to the dashboard/HaCasa/views folder.
2. Create a new file named 00-default_view.yaml. This file will also be used in the examples from the Usage section.

3. Add the following content to the file and change the values to your entities:

    title: Home
    path: "home"
    cards:
    - type: vertical-stack
        cards:
        - type: custom:button-card
        template: hc_header_card
        entity: <weather entity>
        variables:
        air_quality_sensor: <air quality sensor> # Optional
        person_entity: <person entity>
        - type: custom:button-card
        template: hc_security_card_small
        entity: <alarm entity>
        - type: custom:button-card
        template: hc_title_card
        name: "Welcome Home"
        label: "What are you up to"
        - type: custom:button-card
        template: hc_scene_card
        entity: <scene input selector>
        variables:
        icon_1: fapro:house-fill
        name_1: Home
        scene_1: scene.home
        icon_2: fapro:computer
        name_2: Work
        scene_2: scene.work
        icon_3: fapro:door-open
        name_3: Away
        scene_3: scene.away
        icon_4: fapro:moon-stars
        name_4: Night
        scene_4: scene.night      
        icon_5: fapro:clapper-open
        name_5: Movie
        scene_5: scene.movie
   

4. Save the file.

Verify the Dashboard

1. Open your Home Assistant webpage.
2. Navigate to the new HaCasa dashboard.
3. Verify that the header card, alarm card and scene card are displayed correctly like the image below (based on peachy theme):

If everything works as expected, you are ready to start customizing your dashboard 🎉! Explore the cards section in the menu for more options.