Merge pull request #480 from MobCode100/theme-switcher

Theme switcher (light/dark mode)

tgcf/config.py

@@ -81,6 +81,7 @@ class Config(BaseModel):
 
     # pylint: disable=too-few-public-
     pid: int = 0
+    theme: str = "light"
     login: LoginConfig = LoginConfig()
     admins: List[Union[int, str]] = []
     forwards: List[Forward] = []

tgcf/web_ui/0_👋_Hello.py

@@ -1,12 +1,16 @@
 import streamlit as st
 
-from tgcf.web_ui.utils import hide_st
+from tgcf.web_ui.utils import hide_st, switch_theme
+from tgcf.config import read_config
+
+CONFIG = read_config()
 
 st.set_page_config(
     page_title="Hello",
     page_icon="👋",
 )
 hide_st(st)
+switch_theme(st,CONFIG)
 st.write("# Welcome to tgcf 👋")
 
 html = """

tgcf/web_ui/pages/1_🔑_Telegram_Login.py

@@ -2,7 +2,7 @@
 
 from tgcf.config import CONFIG, read_config, write_config
 from tgcf.web_ui.password import check_password
-from tgcf.web_ui.utils import hide_st
+from tgcf.web_ui.utils import hide_st, switch_theme
 
 CONFIG = read_config()
 
@@ -11,6 +11,7 @@
     page_icon="🔑",
 )
 hide_st(st)
+switch_theme(st,CONFIG)
 if check_password(st):
     CONFIG.login.API_ID = int(
         st.text_input("API ID", value=str(CONFIG.login.API_ID), type="password")

tgcf/web_ui/pages/2_⭐_Admins.py

@@ -2,7 +2,7 @@
 
 from tgcf.config import CONFIG, read_config, write_config
 from tgcf.web_ui.password import check_password
-from tgcf.web_ui.utils import get_list, get_string, hide_st
+from tgcf.web_ui.utils import get_list, get_string, hide_st, switch_theme
 
 CONFIG = read_config()
 
@@ -11,6 +11,7 @@
     page_icon="⭐",
 )
 hide_st(st)
+switch_theme(st,CONFIG)
 if check_password(st):
 
     CONFIG.admins = get_list(st.text_area("Admins", value=get_string(CONFIG.admins)))

tgcf/web_ui/pages/3_🔗_Connections.py

@@ -4,7 +4,7 @@
 
 from tgcf.config import CONFIG, Forward, read_config, write_config
 from tgcf.web_ui.password import check_password
-from tgcf.web_ui.utils import get_list, get_string, hide_st
+from tgcf.web_ui.utils import get_list, get_string, hide_st, switch_theme
 
 CONFIG = read_config()
 
@@ -13,6 +13,7 @@
     page_icon="🔗",
 )
 hide_st(st)
+switch_theme(st,CONFIG)
 if check_password(st):
     add_new = st.button("Add new connection")
     if add_new:

tgcf/web_ui/pages/4_🔌_Plugins.py

@@ -6,7 +6,7 @@
 from tgcf.config import CONFIG, read_config, write_config
 from tgcf.plugin_models import FileType, Replace, Style
 from tgcf.web_ui.password import check_password
-from tgcf.web_ui.utils import get_list, get_string, hide_st
+from tgcf.web_ui.utils import get_list, get_string, hide_st, switch_theme
 
 CONFIG = read_config()
 
@@ -16,6 +16,7 @@
 )
 
 hide_st(st)
+switch_theme(st,CONFIG)
 if check_password(st):
 
     with st.expander("Filter"):

tgcf/web_ui/pages/5_🏃_Run.py

@@ -7,7 +7,7 @@
 
 from tgcf.config import CONFIG, read_config, write_config
 from tgcf.web_ui.password import check_password
-from tgcf.web_ui.utils import hide_st
+from tgcf.web_ui.utils import hide_st, switch_theme
 
 CONFIG = read_config()
 
@@ -31,6 +31,7 @@ def termination():
     page_icon="🏃",
 )
 hide_st(st)
+switch_theme(st,CONFIG)
 if check_password(st):
     with st.expander("Configure Run"):
         CONFIG.show_forwarded_from = st.checkbox(

tgcf/web_ui/pages/6_🔬_Advanced.py

@@ -5,7 +5,7 @@
 from tgcf.config import CONFIG_FILE_NAME, read_config, write_config
 from tgcf.utils import platform_info
 from tgcf.web_ui.password import check_password
-from tgcf.web_ui.utils import hide_st
+from tgcf.web_ui.utils import hide_st, switch_theme
 
 CONFIG = read_config()
 
@@ -14,6 +14,7 @@
     page_icon="🔬",
 )
 hide_st(st)
+switch_theme(st,CONFIG)
 
 if check_password(st):
 

tgcf/web_ui/run.py

@@ -2,13 +2,14 @@
 from importlib import resources
 
 import tgcf.web_ui as wu
+from tgcf.config import CONFIG
 
+package_dir = resources.path(package=wu, resource="").__enter__()
 
 def main():
-    package_dir = resources.path(package=wu, resource="").__enter__()
     print(package_dir)
     path = os.path.join(package_dir, "0_👋_Hello.py")
-    os.environ["STREAMLIT_THEME_BASE"] = "light"
+    os.environ["STREAMLIT_THEME_BASE"] = CONFIG.theme
     os.environ["STREAMLIT_BROWSER_GATHER_USAGE_STATS"] = "false"
     os.environ["STREAMLIT_SERVER_HEADLESS"] = "true"
     os.system(f"streamlit run {path}")

tgcf/web_ui/utils.py

@@ -1,5 +1,8 @@
 import os
 from typing import Dict, List
+from run import package_dir
+from streamlit.components.v1 import html
+from tgcf.config import write_config
 
 
 def get_list(string: str):
@@ -34,6 +37,40 @@ def list_to_dict(my_list: List):
     return my_dict
 
 
+def apply_theme(st,CONFIG,hidden_container):
+    """Apply theme using browser's local storage"""
+    if  st.session_state.theme == '☀️':
+        theme = 'Light'
+        CONFIG.theme = 'light'
+    else:
+        theme = 'Dark'
+        CONFIG.theme = 'dark'
+    write_config(CONFIG)
+    script = f"<script>localStorage.setItem('stActiveTheme-/-v1', '{{\"name\":\"{theme}\"}}');"
+    pages = os.listdir(os.path.join(package_dir,'pages'))
+    for page in pages:
+        script += f"localStorage.setItem('stActiveTheme-/{page[4:-3]}-v1', '{{\"name\":\"{theme}\"}}');"
+    script += 'parent.location.reload()</script>'
+    with hidden_container: # prevents the layout from shifting
+        html(script,height=0,width=0)
+
+
+def switch_theme(st,CONFIG):
+    """Display the option to change theme (Light/Dark)"""
+    with st.sidebar:
+        leftpad,content,rightpad = st.columns([0.27,0.46,0.27])
+        with content:
+            st.radio (
+                'Theme:',['☀️','🌒'],
+                horizontal=True,
+                label_visibility="collapsed",
+                index=CONFIG.theme == 'dark',
+                on_change=apply_theme,
+                key="theme",
+                args=[st,CONFIG,leftpad] # or rightpad
+            )
+
+
 def hide_st(st):
     dev = os.getenv("DEV")
     if dev: