Dark themes not applying to left and top bar #199
Comments
|
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. |
|
@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. |
|
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. |
|
Hi, |
|
@Vince1024 no, as explained further above, the File Editor does not support theming. |
|
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 |
|
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. |
|
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 😂 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! |
|
I just found this community-maintained fork of Materialize, which also has theme support: https://materializeweb.com/themes.html Maybe that's an option? |
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.
The text was updated successfully, but these errors were encountered: