search

danielperna84 / hass-configurator

Configuration UI for Home Assistant
MIT License
306 stars 168 forks source link

Dark themes not applying to left and top bar #199

Open jensuffhaus opened 4 years ago

jensuffhaus commented 4 years ago

Selecting a dark theme in the settings for the editor only applies to the actual text edit panel and not the side or top panels of the editor.

image

image

danielperna84 commented 4 years ago

Yes, the scope of the available themes is limited to the editor. The whole configurator app itself does not support theming, and there are no plans to add support from my side. I'd be open to contributions by others though.

killtux commented 2 years ago

@danielperna84 is it possible to realize a simple dark mode that automatically switches like Home Assistant interface itself or switch if its a bright/dark theme? that white really burns into your eyes if every app and site on your computer is dark 😅.

i am afraid i don't have the skills to contribute the necessary code changes, sorry for that.

danielperna84 commented 2 years ago

@killtux

If someone volunteers to implement it, sure. The main problem is, that the UI-framework used in this project still was in beta-state back then. Switching to a more recent version requires some effort. And even then I don't know if the framework has builtin support for a dark mode.

Anyways, I won't take care of this issue. But anybody is welcome to do so.

Vince1024 commented 8 months ago

Hi, Mine is not taking any count of the chosen theme at all event the center part of the UI. Is it possible to get the current HA theme taking in count in File editor ? Thanks

danielperna84 commented 8 months ago

@Vince1024 no, as explained further above, the File Editor does not support theming.

igorsantos07 commented 8 months ago

I'm wondering if I can spend some time trying to work this out... It's something that bothers me very much and VSCode is terrible on my RPi. Here's what I could summarize and would like some opinion :)

Materialize is sadly defunct, but they released a v1 before dying. Here's the upgrade guide, but given there's nothing new still being launched, I don't think it's worth upgrading? @danielperna84 if you could take a quick look on it and see if you can spot used UI elements that could benefit from the upgrade...

Also, Daniel, I'm thinking how this could be implemented. To my poor understanding of HA, the add-on isn't able to get which theme HA is using, and thus it would only change color based on the code theme selected. Seems right? And if so, do you think it would be feasible to sniff out if the theme is light or dark (maybe even based on a manual list) to then decide if the external UI should be light/dark? I guess, running a theme checker on startup (for existing setups) and on theme change. I'm asking this because I haven't checked almost anything from the source to see how it works under the hood.

And then, I hope it's possible to apply light/dark based on CSS variables, either coming from a system-wide class or can changed programmatically in the style prop from <html>. I say "hope" because it depends on how colors are setup via Materialize... but given our palette is quite simple an the whole project is pretty much frozen, hardcoded new colors wouldn't hurt?

danielperna84 commented 8 months ago

@igorsantos07

I haven't followed what has happened to materialize. But I think it should be considered to switch to a different UI framework. A lot of websites select their mode based on the OS settings. Just like HA does. So it would make sense to see how HA detects the OS-setting, and within the configurator provide a select-box with the values "bright", "dark" and "os".

That being said, this would only apply to the blue and white areas around the editor. The editor has its own theming. And I don't know how that could be kept in sync with a potential dynamic style when in OS-mode.

igorsantos07 commented 8 months ago

I remember seeing JS APIs and media-queries to automatically identify the default dark/light mode - never used them but I know they exist, it's even possible to emulate that from DevTools. I'll try going that route, then. Having the option to manually select it is important anyway, as for instance my OS doesn't properly report dark mode :joy:

And yep, I agree that moving out of Materialize is the way to go in the long run, but definitely out of the scope for such a "simple" problem as this issue. That's great once some time is found to rework some of the interface and upgrade other components of it :)

And thanks for the quick answer!

danielperna84 commented 7 months ago

@igorsantos07

I just found this community-maintained fork of Materialize, which also has theme support: https://materializeweb.com/themes.html

Maybe that's an option?