How To Change Graph Colors in Energy Dashboard In Home Assistant

In this article, we will look at how you can change colors for your energy graph in the energy dashboard of Home Assistant.

Table of Contents

Requirements
Changing Graph Colors in Energy Dashboard

Requirements

Home Assistant 2023.09 or later up and running.
You can check this link to see how you can install it for the first time
The energy dashboard is already configured showing the energy graph.

Changing Graph Colors in Energy Dashboard

Your energy graph would look something like this.

Now you can specify individual colors for each of your device using the following configuration.

frontend:  
  themes:  
    Custom Home Assistant:    # this is the name of the theme  
      energy-grid-consumption-color-0: "#ed2964"  
      energy-grid-consumption-color-1: "#ff7f17"  
      energy-grid-consumption-color-2: "#00ff00"  
      energy-grid-consumption-color-3: "#17e2fc"  
      energy-grid-consumption-color-4: "#d117ff"  
      energy-grid-consumption-color-5: "#e96697"  
      energy-grid-consumption-color-6: "#f79f07"

For each value starting from the 0th index, the devices would get the colors in the energy graph.

For example, for the above config, the output is something like this.

Now if you are interested in exploring more of such easy to follow step by step guides about Home Assistant, then here are a few suggestions