ESPHome Dark Theme

It would be great to have a Dark Theme on ESPHome. Now that ESPHome uses the Monaco editor, I am guessing it should be relatively easy to add the same theme options as the Studio Code Server which I believe uses the same editor.

My eyes need a break :slight_smile:

I totally support this!

I love the way @sabeechen did it for the google drive addon so we can freely choose.


I started working on this: Dark theme · Issue #347 · esphome/dashboard · GitHub, but this is WIP


cool, when do we get to see it?

Very fitting username. :sweat_smile:

On my mobile and on Edge I suddenly notice the dark theme being applied,
however on Firefox, still I don’t have the theme,
so some progress, but not for all browsers?

[edit] in private mode is also works on Firefox,
so probably I have to reset stuff and do my settings again

It is currently set to light or dark mode based on how your browser is set.

Release Announcement here…

Thanks @grahambrown11

(It looked like the same person IE picture but if it’s not let me know.)

@aruffell Would you care to mark this as complete?

1 Like

@Sir_Goodenough - Great to know it was a released feature as it isn’t working reliably for me yet. When I access HA via its direct IP, the page is dark, when I access it via nabu casa, the page is still white. I tried a few things but can’t get it to go to dark mode. Anyhow, I am super happy it was finally done!

Edit: I can’t find a way to make this completed… suggestions?

You marked the solution, that’s all that’s needed.

1 Like

Read the docs. It is supposedly following the theme in the browser, so depending on the theme it changes, Ask in the forums somewhere if there is more info, but that is what the release notes I pointed to said.

that’s not working for me either,

darkmode browser, editor is black, the rest is not.

But I think it’s somehow caching as in private mode it works, only I’m not able to clear the cash.

So maybe I have to wait for 30 days, or relogin or something

While I haven’t tried a full wipe of all cache, etc. I did a partial one (only selected less disruptive settings under chrome’s privacy settings where you pick what to wipe) and it did not help. I tried logging out and back on too. I suspect it is something related to access permissions when using https but I don’t know enough about this to investigate further.

that also doesn’t seem to work,
maybe waiting for 30 days will :wink:

I just tried HA 2023.7.0b0 and it now works both in http and https.

That seems like a browser cache issue… the ESPHome CSS was changed for the dark colors, but the editor colors are not part of the CSS it is done programatically that’s why you are seeing the difference… In theory it should have come right by now as ESPHome sets the cache to ~24 hours for static assets. You could “Empty cache and hard reload” if still like that

Those windows are not HA, so themes won’t be applied. Those are separate softwares that control those colors. HA just opens the window to those softwares. If you installed those softwares outside HA, they would look exactly the same.