[Feature Request]: Save and load theme using settings api

[yashschandra]

Problem description

I mostly run Redisinsight using docker. I prefer light theme so I go to settings and change the theme. However this becomes repetitive (and sometimes annoying 😓 ) whenever I restart docker container. It always load dark theme by default.

How often do you encounter this problem

Every time I restart my docker container.

Alternatives considered

Alternate is to load system theme by default instead of dark theme

Additional information

I could not find any discussions or issue regarding this topic (whether it is intentional or not) hence creating new issue

[yashschandra]

resolution - #4433
alternate resolution - #4434

[pawelangelow]

Thanks for the feedback and suggested solutions, @yashschandra! 🚀 I'll take a look and update you on the action plan.

[pawelangelow]

@yashschandra I merged #4434 so, please, let us know if it works for the scenario you've described. If so, can we close #4433 ? FYI: Our roadmap includes making dynamic updates on the theme.

[yashschandra]

@pawelangelow Hello, the alternate resolution (#4434) works for me since I tend to keep all of my softwares and system in light theme.

I am wondering why we preferred the alternate resolution (#4434) over the normal resolution (#4433)?

The only problem with the merged approach is that it is inflexible. If in future I want to keep Redisinsight in dark theme (different than my system theme) for some reason then this issue will come again ie. I will always get light theme (system theme) after every docker restart rather than the one is selected (dark theme) last time. To handle such cases as well I initially proposed normal resolution (#4433) of setting and getting theme from the api. Do you see any particular problem with this approach?

[pawelangelow]

The proper resolution should include some additional work - such as handling dynamic theme changes (e.g. when the OS-level theme changes, the desktop app should respond accordingly). I also noticed a few areas that could use some refactoring. For now, I’ve merged the alternate solution to give you a working workaround in the meantime.

[yashschandra]

Got it. Closing this issue as it resolves my problem.

@pawelangelow If it is acceptable, you can suggest me what other changes/refactoring the proper resolution require and I will see how much I can do from my side 😅

[pawelangelow]

Hey! Thanks a lot for the initiative — really appreciate your willingness to contribute! ❤️

As a first step, let's open a new issue to keep track of what's happening.

As I mentioned in my previous comment, there are two sub-problems to tackle. Just a heads up: this is based on a high-level overview, so feel free to explore and propose a better approach if you come across one.

1. Electron theme awareness:
   The goal here is to make Electron respond to the OS theme. From what I’ve seen, the nativeTheme object from electron is the way to go. You'll probably need to listen for theme change events and then propagate those to the React app. As a starting point, check out this file:
   https://github.com/RedisInsight/RedisInsight/blob/main/redisinsight/desktop/app.ts

2. React theme refactor:
   Right now, the React side supports two theme options — Light and Dark — and stores the selection in localStorage. You can see that here:
   https://github.com/RedisInsight/RedisInsight/blob/dacde956f677ab28298ff4d8d4f88e89839693e0/redisinsight/ui/src/services/theme.ts#L15
   What I think we should do is support a third option: System. When this option is selected, the app should follow the theme provided by Electron (i.e., the OS theme).

Let me know if anything’s unclear or if you’d like to brainstorm on any of these parts. Looking forward to seeing what you come up with! 🚀

[yashschandra]

Created new issue for tracking #4440