jeremyc
(Jeremy Cook)
May 6, 2026, 12:59pm
1
Hi all, from today (release 2026.5) you will be able to add a theme to individual sections in a sections view. This means you can have cascading styles - one main theme for the view / dashboard and separate themes for individual sections. For a simple example you might want a big clock on your wall panel that you can see from the other side of the room, and smaller cards with more detail such as in a weather station like the one I am running on my wall mounted tablet like this:
Until now you would need to resort to a custom plugin such as card-mod but now you can achieve some of those things natively.
I made a github gist with more details of this example so that you can create your own:
README.md
# Section Themes Example Dashboard
This gist demonstrates the **per-section themes** feature introduced in Home Assistant 2026.5, which lets you apply a different theme to individual sections within a dashboard view — independently of the view-level theme. You can have multiple themes per dashboard.
Before this feature, all tile and Mushroom cards on the same dashboard shared the same styling. Changing font sizes, weights, or colours for one group of cards meant they all changed together — unless you installed a custom frontend plugin to work around it. Per-section themes solve this natively: each section can now have its own card appearance while still inheriting shared defaults from the view theme.
<img width="1016" height="261" alt="image" src="https://gist.github.com/user-attachments/assets/0ae20eac-3b32-4e1c-bba6-3a5dbf4811ee" />
---
This file has been truncated. show original
big_clock.yaml
big_clock:
ha-tile-info-primary-font-size: 20px
ha-tile-info-primary-font-weight: 500
# secondary font
ha-tile-info-secondary-font-size: 125px
ha-tile-info-secondary-font-weight: 600
modes:
dark:
ha-section-background-color: white
desktop.yaml
views:
- type: sections
sections:
- type: grid
cards:
- type: custom:mushroom-template-card
primary: '{{ states(''sensor.current_date'') }}'
secondary: '{{ states(''sensor.time'') }}'
icon: ''
entity: sensor.time
This file has been truncated. show original
There are more than three files. show original