Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme switcher (light/dark mode) #480

Merged
merged 1 commit into from
Dec 6, 2023
Merged

Theme switcher (light/dark mode) #480

merged 1 commit into from
Dec 6, 2023

Conversation

MobCode100
Copy link
Contributor

Description:

A function to switch between light/dark mode

Preview:

image

Key changes:

  • Added function switch_theme (web_ui/utils.py) to display the option to switch theme
  • The callback apply_theme (web_ui/utils.py) which will run every time the theme changes
  • theme config option so the web server will start with the correct theme that was previously chosen

I have fully read and understood the terms and conditions laid down in the general Contributor License Agreement

  • I agree to distribute my code contributions under MIT License, and will not change it in the future.
  • I agree that any contribution once merged, cannot be taken back by me.
  • I will abide by the Code of Conduct
  • I understand that the decision of the maintainer is final and abiding. And the maintainer reserves all rights to modify my code. I also understand that the maintainer can remove my code in future, if he thinks so.
  • Once my contribution is merged, my name will permanently appear in the Contribtor's List of this repository.

@MobCode100 MobCode100 requested a review from aahnik as a code owner July 29, 2023 12:26
@MobCode100
Copy link
Contributor Author

This PR might be unnecessary, but I would love to have a dark mode version of tgcf-web, less pain for my eyes XD. I remembered that Streamlit has already a default dark mode which can be accessed by the app menu. I thought to just enable the app menu, but you might have some reasons to disable it. So I implemented a custom theme switcher.

Actually, I made two versions of the feature:

  1. The first one is by reading theme config and start the Streamlit app with the theme. Once the theme is changed by clicking the save button, tgcf-web will automatically restart with the new configuration.
  2. The second one also reads the theme config but uses JavaScript's localStorage that simulates the default Streamlit theme switcher on the app menu. The only difference is that a website refresh is required for changes to take effect.

I decide to go with the second one, as it is a lot faster to just refresh a website and probably more stable than the first one.

Sorry for the very simple UI tho 🤣, I can't think a better way to do that. Feel free to change anything and please give your feedback if any. Thank you for your time and efforts!

@aahnik
Copy link
Owner

aahnik commented Aug 4, 2023

This is awesome 😎👍

I am stuck in some other work..
I will try my best to test and merge everything as soon as possible.

Thanks again for your contributions. 😊🔥

@aahnik aahnik merged commit d109bd6 into aahnik:main Dec 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants