Home Assistant Shabbat & Yom Tov Dashboards (Jan 2025)
Daniel Rosehill
For religiously observant Jews, home automation provides a great means of observing the Shabbat and its strictures around the use of electronics. I've covered some binary sensor configurations in another post.
In this one I wanted to share a slightly updated version of my Shabbat dashboard which I have running on an Android display. This version was updated in January 2025 with the help of Claude Sonnet 3.5 which added some nice stylistic elements to the sensor displays.
Shabbat Dashboard
This version of the dashboard leverages a few different add-ons in order to provide a unified display providing the red alert sensors, the Shabbat times and the weather forecast provided by the Israel Meteorological Service, IMS. The weekly Torah portion (parsha) and zmanim geolocated to your locality can be easily added as well.
Add-Ons & Integrations
I use the following add-ons and integrations in order to build my dashboards:
Official IMS Custom Component (weather widget)
Many thanks to all of the authors for their hard work in making this technology available and accessible.
Security Disclaimer
As I'm based in Israel, it's important for me to keep on top of the Red Alert sensors. But given that these are hugely important, I feel obliged to make the recommendation that you shouldn't rely on these as your only source of information for this vital purpose. I use the official Pikud HaOref app as my primary notifier but these provide a nice additional display (hopefully they remain green!).#
Shabbat Display Setup
The beauty of Home Assistant is that just about anything is possible.
In order to display this dashboard over Shabbat, I picked up a budget Android tablet and installed Fully Kiosk Mode Browser. It's even possible to coordinate the tablet's turn-on and turn-off time in coordination with the Shabbat times provided by that sensor.
Although I began my Home Assistant journey before the AI era, large language models have made configuring Home Assistant configurations vastly easier. I use Claude's Sonnet 3.5 for writing a lot of widget elements that would be too time consuming to code manually (or, frankly, beyond my abilities!)
YAML Snippets For Widgets
If you like the approach and styling, feel free to customise these YAML snippets to create your own dashboards:
Hebrew Date & Time Row
This snippet provides a two column styled button card showing the Hebrew date alongside the local time:
type: custom:button-card
entity: sensor.hebcal_hebrew_date
show_name: false
show_state: true
show_icon: false
styles:
card:
- background: "linear-gradient(135deg, #4B6CB7 0%, #182848 100%)"
- border-radius: 15px
- padding: 16px
state:
- color: white
- font-weight: bold
- font-size: 18px
- text-align: center
- justify-self: center
Next / Upcoming Shabbat Display Row
type: grid
title: Next Shabbat
titleColor: white
columns: 2
square: false
cards:
- type: entity
entity: sensor.hebcal_start_of_shabbat
name: Shabbat In
card_mod:
style: |
ha-card {
background: linear-gradient(120deg, #2980b9, #6dd5fa);
border-radius: 15px;
padding: 15px;
}
.card-content {
color: white !important;
}
.primary {
font-size: 1.8em;
font-weight: bold;
color: white !important;
}
.secondary {
font-size: 1.2em;
color: white !important;
}
:host {
--primary-text-color: white;
--secondary-text-color: white;
}
- type: entity
entity: sensor.hebcal_end_of_shabbat
name: Shabbat Out
card_mod:
style: |
ha-card {
background: linear-gradient(120deg, #2980b9, #6dd5fa);
border-radius: 15px;
padding: 15px;
}
.card-content {
color: white !important;
}
.primary {
font-size: 1.8em;
font-weight: bold;
color: white !important;
}
.secondary {
font-size: 1.2em;
color: white !important;
}
:host {
--primary-text-color: white;
--secondary-text-color: white;
}
Red Alert Display Row
Important note: you will need to refer to the add-on documentation to change the entities to your alerting area.;
square: false
type: grid
columns: 2
cards:
- type: custom:button-card
entity: binary_sensor.oref_alert_jerusalem_all_areas
name: Jerusalem All Areas
icon: mdi:check-circle
styles:
card:
- padding: 12px
name:
- font-weight: bold
- color: white
state:
- color: white
icon:
- color: white
- width: 24px
- height: 24px
state:
- value: "on"
name: Jerusalem All Areas (UNSAFE)
icon: mdi:alert-octagram
styles:
card:
- background-color: "#ea4335"
icon:
- animation: blink 1s ease infinite
- value: "off"
name: Jerusalem All Areas (Safe)
styles:
card:
- background-color: "#34a853"
- value: unavailable
styles:
card:
- background-color: "#ffa500"
- type: custom:button-card
entity: binary_sensor.oref_alert
name: Jerusalem Center
icon: mdi:check-circle
styles:
card:
- padding: 12px
name:
- font-weight: bold
- color: white
state:
- color: white
icon:
- color: white
- width: 24px
- height: 24px
state:
- value: "on"
name: Jerusalem Center (UNSAFE)
icon: mdi:alert-octagram
styles:
card:
- background-color: "#ea4335"
icon:
- animation: blink 1s ease infinite
- value: "off"
name: Jerusalem Center (Safe)
styles:
card:
- background-color: "#34a853"
- value: unavailable
styles:
card:
- background-color: "#ffa500"
title: Red Alerts
IMS Weather Widget
And finally, a weather widget!
show_current: true
show_forecast: false
type: weather-forecast
entity: weather.ims_weather
forecast_type: daily
name: Jerusalem, IL
Full Dashboard Configuration
Here's a full YAML configuration for my Shabbat dashboard with my personal sensors (like lighting displays) excluded:
views:
- title: Home
sections:
- type: grid
cards:
- type: grid
title: Shabbat Times
titleColor: white
columns: 1
square: false
cards:
- type: entity
entity: sensor.hebcal_start_of_shabbat
name: Shabbat In
card_mod:
style: |
ha-card {
background: linear-gradient(120deg, #2980b9, #6dd5fa);
border-radius: 15px;
padding: 15px;
}
.card-content {
color: white !important;
}
.primary {
font-size: 1.8em;
font-weight: bold;
color: white !important;
}
.secondary {
font-size: 1.2em;
color: white !important;
}
:host {
--primary-text-color: white;
--secondary-text-color: white;
}
- type: entity
entity: sensor.hebcal_end_of_shabbat
name: Shabbat Out
card_mod:
style: |
ha-card {
background: linear-gradient(120deg, #2980b9, #6dd5fa);
border-radius: 15px;
padding: 15px;
}
.card-content {
color: white !important;
}
.primary {
font-size: 1.8em;
font-weight: bold;
color: white !important;
}
.secondary {
font-size: 1.2em;
color: white !important;
}
:host {
--primary-text-color: white;
--secondary-text-color: white;
}
- type: entity
entity: sensor.time
name: Current Time (Jerusalem)
card_mod:
style: |
ha-card {
background: linear-gradient(120deg, #2980b9, #6dd5fa);
border-radius: 15px;
padding: 15px;
}
.card-content {
color: white !important;
}
.primary {
font-size: 1.8em;
font-weight: bold;
color: white !important;
}
.secondary {
font-size: 1.2em;
color: white !important;
}
:host {
--primary-text-color: white;
--secondary-text-color: white;
}
- square: false
type: grid
columns: 1
cards:
- type: markdown
content: |
## Shabbat Schedule
🌅 **Start of Shabbat** Shabbat Mode Active
🌙 **00:00** Bedtime Mode
☀️ **09:00** Morning Lights
🌤️ **14:30** Afternoon Lights
style: |
ha-card {
padding: 16px;
background: var(--card-background-color);
border-radius: var(--ha-card-border-radius);
}
h2 {
color: var(--primary-text-color);
border-bottom: 1px solid var(--divider-color);
padding-bottom: 8px;
margin-bottom: 8px;
}
- type: entity
entity: sensor.hebcal_parsha
name: Parsha
card_mod:
style: |
ha-card {
background: linear-gradient(120deg, #2980b9, #6dd5fa);
border-radius: 15px;
padding: 15px;
text-align: center;
}
.card-content {
color: white !important;
}
.primary {
font-size: 1.6em;
font-weight: bold;
color: white !important;
line-height: 1.2;
}
.secondary {
font-size: 1.4em;
color: white !important;
line-height: 1.2;
}
:host {
--primary-text-color: white;
--secondary-text-color: white;
}
badges:
- type: entity
entity: sensor.hebcal_hebrew_date
name: Hebrew Date
attribute: ''
state_header: 'Shabbat Dashboard For:'
secondary_info: none
card_mod:
style: |
ha-card {
background: linear-gradient(120deg, #2980b9, #6dd5fa);
border-radius: 15px;
padding: 15px;
text-align: center;
width: 100%;
margin: 0;
box-sizing: border-box;
}
.card-content {
color: white !important;
width: 100%;
}
.primary {
font-size: 1.6em;
font-weight: bold;
color: white !important;
line-height: 1.2;
width: 100%;
}
.secondary {
font-size: 1.4em;
color: white !important;
line-height: 1.2;
width: 100%;
}
:host {
--primary-text-color: white;
--secondary-text-color: white;
width: 100%;
}
.name {
display: none;
}
Yom Tov Version
I created a downstream binary sensor for Shabbat or Yom Tov because for the purpose of driving home automations, at least in my case it doesn't matter which of the conditions is true.
Here’s the configuration:
binary_sensor:
- platform: template
sensors:
is_shabbat:
friendly_name: "Is Shabbat"
value_template: "{{ states('sensor.hebcal_is_it_shabbat') == 'True' }}"
is_yom_tov:
friendly_name: "Is Yom Tov"
value_template: "{{ states('sensor.hebcal_is_it_yom_tov') != 'No Info' }}"
is_shabbat_or_yom_tov:
friendly_name: "Is Shabbat or Yom Tov"
value_template: >-
{{ states('sensor.hebcal_is_it_shabbat') == 'True' or
states('sensor.hebcal_is_it_yom_tov') != 'No Info' }}
With this dual sensor, you can easily create styled status grids like these:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: switch.plata
name: Plata
icon: mdi:lightbulb
styles:
card:
- border-radius: 12px
- transition: background-color 0.3s ease, box-shadow 0.3s ease
- box-shadow: |
[[[
if (entity.state === 'on')
return '0 6px 10px rgba(0, 128, 0, 0.4)';
else
return '0 4px 6px rgba(255, 0, 0, 0.2)';
]]]
- background-color: |
[[[
if (entity.state === 'on')
return 'rgba(0, 128, 0, 0.6)';
else
return 'rgba(255, 0, 0, 0.6)';
]]]
icon:
- color: white
name:
- font-weight: bold
- color: white
- type: custom:button-card
entity: binary_sensor.is_shabbat
name: Shabbat?
icon: mdi:candle
styles:
card:
- border-radius: 12px
- transition: background-color 0.3s ease, box-shadow 0.3s ease
- box-shadow: |
[[[
if (entity.state === 'on')
return '0 6px 10px rgba(0, 128, 0, 0.4)';
else
return '0 4px 6px rgba(255, 0, 0, 0.2)';
]]]
- background-color: |
[[[
if (entity.state === 'on')
return 'rgba(0, 128, 0, 0.6)';
else
return 'rgba(255, 0, 0, 0.6)';
]]]
icon:
- color: white
name:
- font-weight: bold
- color: white
- type: horizontal-stack
cards:
- type: custom:button-card
entity: binary_sensor.is_yom_tov
name: Yom Tov?
icon: mdi:star-david
styles:
card:
- border-radius: 12px
- transition: background-color 0.3s ease, box-shadow 0.3s ease
- box-shadow: |
[[[
if (entity.state === 'on')
return '0 6px 10px rgba(0, 128, 0, 0.4)';
else
return '0 4px 6px rgba(255, 0, 0, 0.2)';
]]]
- background-color: |
[[[
if (entity.state === 'on')
return 'rgba(0, 128, 0, 0.6)';
else
return 'rgba(255, 0, 0, 0.6)';
]]]
icon:
- color: white
name:
- font-weight: bold
- color: white
- type: custom:button-card
entity: binary_sensor.is_shabbat_or_yom_tov
name: Shabbat Or Yom T...
icon: mdi:calendar-clock
styles:
card:
- border-radius: 12px
- transition: background-color 0.3s ease, box-shadow 0.3s ease
- box-shadow: |
[[[
if (entity.state === 'on')
return '0 6px 10px rgba(0, 128, 0, 0.4)';
else
return '0 4px 6px rgba(255, 0, 0, 0.2)';
]]]
- background-color: |
[[[
if (entity.state === 'on')
return 'rgba(0, 128, 0, 0.6)';
else
return 'rgba(255, 0, 0, 0.6)';
]]]
icon:
- color: white
name:
- font-weight: bold
- color: white
An approach to creating a Yom Tov-specific dashboard would be to copy the Shabbat dashboard in its entirety and just swap out the sensors for the Yom Tov ones.
You could even integrate the display into the automation for your tablet (if it’s Shabbat, show the Shabbat dashboard; if it’s Yom Tov, show the Yom Tov dashboard, etc).
Subscribe to my newsletter
Read articles from Daniel Rosehill directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Daniel Rosehill
Daniel Rosehill
I believe that open source is a way of life. If I figure something out, I try to pass on what I know, even if it's the tiniest unit of contribution to the vast sum of human knowledge. And .. that's what led me to set up this page!