Weather Forecast Card


The Weather Forecast card displays the weather. Very useful to include on interfaces that people display on the wall.

Screenshot of the weather card Screenshot of the weather card.

Configuration Variables

type

(string)(Required)

weather-forecast

entity

(string)(Required)

The entity_id of the weather platform to use.

name

(string)(Optional)

Overwrites the friendly name.

Default value:

Entity Name

show_forecast

(boolean)(Optional)

Show next hours/days forecast.

Default value:

true

secondary_info_attribute

(boolean)(Optional)

Which attribute to display under the temperature.

Default value:

Defaults to extrema if available, if not available then precipitation and if precipitation isn’t available then humidity.

theme

(string)(Optional)

Set to any theme within themes.yaml

Example

type: weather-forecast
entity: weather.openweathermap

This card works only with platforms that define a weather entity.

E.g., it works with OpenWeatherMap but not OpenWeatherMap Sensor

Advanced

Themeable Icons

The default weather icons are themable via a Theme. Theme variables include:

--weather-icon-cloud-front-color
--weather-icon-cloud-back-color
--weather-icon-sun-color
--weather-icon-rain-color
--weather-icon-moon-color

Example theme configuration:

--weather-icon-cloud-front-color: white
--weather-icon-cloud-back-color: blue
--weather-icon-sun-color: orange
--weather-icon-rain-color: purple

 

Personal Icons

Weather icons can be overwritten with your own personal images via a Theme. Theme variables include:

--weather-icon-clear-night
--weather-icon-cloudy
--weather-icon-fog
--weather-icon-lightning
--weather-icon-lightning-rainy
--weather-icon-partlycloudy
--weather-icon-pouring
--weather-icon-rainy
--weather-icon-hail
--weather-icon-snowy
--weather-icon-snowy-rainy
--weather-icon-sunny
--weather-icon-windy
--weather-icon-windy-variant
--weather-icon-exceptional

// If your state is not above, use this format
--weather-icon-<state>

Example theme configuration:

--weather-icon-sunny: url("/local/sunny.png")