šŸ“± Mobile First Dashboard - A minimalist and user-friendly UI for your dashboard

Hey and sorry for the late reply, you have to modify all the views as side views and it should work as expected, this is expected to have a centered view on desktop :slightly_smiling_face: And you have to replace the file of your theme with the file from my repo, and after that reload your theme in the dev menu.

Hi everyone, I have updated my theme (Noctis in the theme folder). You need to replace yours with this one to get full support for HA 2023.4.

It fixes the issue of the header reappearing after updating HA and the occasional appearance of a kind of ā€œfooterā€.

1 Like

What do you use the silence input boolean for? Is it mapped to an automation?

I use it as a condition in every automation that can have sound, and I also use it to mute my house (music, vacuum, Google Minis, ā€¦). This is triggered automatically when I do or receive a call.

Interesting. I hadnā€™t thought to use it like this.

I might implement something similarā€¦

Hello Cloos,

I copied your Lovelace.yaml but there are soms parsing issues. Can you look at it plz? Or can you get me a copie of your working yaml file?

Kind regards
Milan

Hello everyone,

Iā€™ve updated my GitHub repository and this post with a new redesigned version, I hope you like it!

And there is now an installation guide.

@Milou020789 Please check this guide to see if this can help you.

1 Like

@Cloos
Thanks so much, this is BRILIANT and I really like it,

Just one question though.
For the cards - you use the header_live_weather_background header.
Is there a way to do this with a static image - or get the style from your screenshots without a camera?

Thanks!

The easier way for doing what you want is to create a generic camera that change automatically based on your screenshots, I tried with screenshots directly but there is a lot of issues this way (images not refreshing, no images loading between two screenshotsā€¦).

Here is how:

Iā€™m having the same problem, ie. same blue shade on text and icons after I create the locelace. No theme can change the color. Instead it seems that this blueish shade ā€leaksā€ to other parts of home assistant ui, and normal colors return there when i delete this dashboard.

As far as Iā€™m concerned, I donā€™t really need any screenshot changing. Just the blue-ish tint on the top while the rest of the card is darker.
What do you think?

You are not alone with this issue, can you try the service frontend.reload_themes then in a desktop browser (Chrome is the one I use) can you right click on an element that is not with the good color and select Inspect, in the Styles tab can you search for any mention of --sidebar-text-color or --primary-text-color then can you send me a screenshot? Also are you sure that you have selected my theme in your profile and for that view? And also just to be sure have you installed my version of Noctis and not the original one from HACS?

Edit: Iā€™ve changed a line of code in my theme, maybe this will fix it: Home-Assistant-Mobile-First/noctis.yaml at bd83a8b3a5f6737ed3d031af5f1c9f68d7de08c4 Ā· Clooos/Home-Assistant-Mobile-First Ā· GitHub

Sorry I misunderstood your question, can you also check my comment related to this issue?

Will do as soon I get to main workstation.

Meanwhile I can confirm that correct theme is chosen (infact currently it is the only theme installed and naturally selected both in my profile and in dashboardā€™s yaml).

ā€”sidebar-text-color and ā€”primary-text-color are both white

Also without even with default theme in use (both light and dark) the color stays the same.

If Iā€™m not mistaken, the color is the same as it is with inbuilt raw editor for most indented text block (where usually text is white, orange and then this blueish color).

I really donā€™t understand how this can be happening, but a screenshot of all your variables in the Inspect view can be really interesting.

Edit: This should be fixed, you can try this new version of the theme:

Iā€™m sorry, maybe I misunderstood.
Can you try to point me to that comment?

My question - basically - is how to get the dashboard style to be brighter on the top-right header (like you have in your screenshots in GitHub).
There I see you use header_live_weather_background - with a camera (toward the sky?).
I donā€™t have such camera.

Ok I get it now, take a look at this link, you can replace the camera with a picture (a blue one should do the effect):

For some strange reason this didnā€™t help. I reloaded themes, restarted whole home assistant, tried with another computer with totally empty cache. Still the same blue, even with this new updated theme yaml.

If I simply add any normal card to the page, text and icons are bright white.

But all decluttering-cards; the same wrong blue. Ie. header menu, sticky menu are all suffering from this.

Inspecting is difficult, since Iā€™m unable to get right click from header menu or sticky menu items. With normal cards I can, but as I said, they are bright white as they should :). Iā€™ll fiddle with decluttering cards next.

EDIT: tried out rest of your lovelace. Vacuum cardsā€™ icons on bottom are also this blue, as are titles of cards (Chambre, Salon etc). But then smaller titles within those cards are white, as is all relevant texts and icons in ā€œnormalā€ cards such as slider-button cards, text elements (but not the action icons) in vacuum cards.

And again, I can right click and inspect only icons and texts that are white. All items with that blue shade are unclickable with right buton of mouse.

I might have a clue, can you add this dependency in HACS?

For some reason itā€™s probably a mandatory one that I forgot to add in my guide.

Edit: Itā€™s now in my guide.

Removed link

Sadly, I think Iā€™m beyond hopeā€¦ :frowning: That didnā€™t help either. Iā€™ll try it one more time and make clean install of home assistant on virtual machine just to make sure it is not some corrupting integration or something on my installation. Iā€™m quite sure considering rest of the users of your great work are not having this issue! :slight_smile:

Edit: as Iā€™m no wizard in css, I can live with adding ā€œcolor: whiteā€ to every block of each decluttering template. I assume there is nothing to lose here? I.e. the color of the text or icons are not changing depending on state or anything that using brute force like this would break?