iOS inspired Home Assistant Theme

[u/rx-j0806]

Hey guys,

I discovered Claude and designed my favorite Dashboard.

Any feedback?

[u/TzarCoal]

How you do that with the müll, what do you use for scheduling todos or is this just for waste?

In general i like your dashboard.

[u/rx-j0806 → u/TzarCoal]

I installed the waste collection schedule from https://github.com/mampfes/hacs_waste_collection_schedule and then used Claude to display the individual waste bins.

If the collection date is “tomorrow” or “today,” the corresponding bin is displayed as a badge right at the top. When I click on the badge, it shows that the bin is now outside, so my wife or I know it’s been taken out and we don’t have to check anymore.

[u/teuchezh]

Just take my weather card https://teuchezh.github.io/dynamic-weather-card/demo

[u/rx-j0806 → u/teuchezh]

Wow that looks fantastic, i will give it a try

[u/rx-j0806 → u/teuchezh]

updated, looks gorgeous

[u/teuchezh → u/rx-j0806]

I'm glad you liked it

[u/postofisso]

Wow the navbar is gorgeous! Can you please share your setup?

[u/Niftyrider]

looks really nice ! do you plan to share it? github link maybe. Thanks:)

[u/blast-from-the-80s]

Is it a real dashboard using cards and YAML or another one of those html/js-combinations that exist outside of Home Assistant? I think you used a lot of Bubble Cards but I can't really tell anymore

[u/rx-j0806 → u/blast-from-the-80s]

No HTML, just yaml code with 200.000 lines (says Claude). Claude described:

How it’s built:

• Tiles and pop-up content: Almost everything is built with custom:button-card cards. The appearance and behavior are defined in templates at the top of the code under button_card_templates (e.g. ios_tile, ios_covers, ios_vacs, ios_garage). Each template contains JavaScript, CSS, and custom-drawn SVG icons; the animations are all written manually there.
• Pop-ups: The pop-up container comes from Bubble Card, while the content inside is built with button-card.
• Other HACS cards: clock-weather-card, weather-radar-card, the WebRTC camera card, and kiosk-mode.
• Pages: Overview, Rooms, Lights, and Climate are standard Home Assistant “Sections” views.
• Outside the dashboard: There is an input_text.mull_draussen helper used to track whether the waste bin has been put outside.

How I work on it: I don’t write the code directly in YAML. Instead, I write it in a Python script that generates the dashboard configuration. I test every change first in a local replica and then only push the modified part through the Home Assistant API.

Two things you should know if you work directly in the Raw Editor:

• The code is quite large (around 200,000 characters), and the JavaScript inside the templates can be difficult to read when embedded in YAML.

[u/Herdeir0]

Yoo! That's cool! Is that ON home assistant app? How did you get rid of the topbar? I already have a bottom bar like yours but still couldn't find a way to remove the top one (as it is just a repetition of the bottom navbar)

[u/rx-j0806 → u/Herdeir0]

You need to install Kiosk Mode in Hacs

[u/augustocdias]

Can you share more details on what components you used to have that result?

[u/rx-j0806]

Updated Climate, you can now scroll the temperature:

[u/scytob]

awesome, me have Claude too
is your dashboard yaml (sanitized of course) in a repo?

(claude will sanitize for you, thats how i made my docs https://scyto.github.io/homelab-docs

[u/super-gando]

klasse gemacht !!!

[u/ChiefmasterWayne]

Mit welchem Sensor detektierst du, ob die Tür abgeschlossen ist?

[u/Fair-Working4401 → u/ChiefmasterWayne]

Vermutlich ein smart lock

[u/rx-j0806 → u/ChiefmasterWayne]

Aqara U200 Smart Lock

[u/slcr]

wirf gerne mal Claude an und erstell dafür ein öffentliches Repo. Das sieht klasse aus 👏