为Basdonax AI RAG添加暗黑模式：Streamlit主题定制

为Basdonax AI RAG添加暗黑模式：Streamlit主题定制

【免费下载链接】basdonax-ai-rag 项目地址: https://gitcode.com/GitHub_Trending/ba/basdonax-ai-rag

你是否在深夜使用Basdonax AI RAG时被刺眼的白色界面困扰？本文将带你通过修改app/common/streamlit_style.py文件，为这个基于Streamlit的AI应用添加暗黑模式支持，让夜间使用更舒适。完成后你将掌握Streamlit主题定制技巧，能够自由切换明暗两种显示风格。

1. 理解现有样式系统

Basdonax AI RAG的界面样式主要由app/common/streamlit_style.py控制，其中hide_streamlit_style()函数负责隐藏默认元素并设置基础样式。当前代码仅实现了基础样式隐藏，还没有主题切换功能：

def hide_streamlit_style():
    """Oculta los estilos por defecto de Streamlit."""
    hide_st_style = """
        <style>
            .reportview-container {
                margin-top: -2em;
            }
            #MainMenu {visibility: hidden;}
            .stDeployButton {display:none;}
            footer {visibility: hidden;}
            #stDecoration {display:none;}
        </style>
    """
    st.markdown(hide_st_style, unsafe_allow_html=True)

这个函数在应用启动时被app/Inicio.py调用（第8行），为整个应用设置统一样式。我们将在此基础上扩展主题切换功能。

2. 添加主题切换功能

2.1 修改样式工具函数

首先需要扩展app/common/streamlit_style.py，添加一个支持主题切换的新函数。我们将创建apply_custom_theme()函数，根据用户选择的主题应用不同的CSS变量：

def apply_custom_theme(theme="light"):
    """Aplica tema claro/oscuro personalizado"""
    base_style = """
        <style>
            :root {
                --primary-color: #2E7BF7;
                --background-color: %s;
                --text-color: %s;
                --sidebar-bg-color: %s;
                --card-bg-color: %s;
            }
            
            .reportview-container {
                margin-top: -2em;
                background-color: var(--background-color);
                color: var(--text-color);
            }
            
            .stSidebar {
                background-color: var(--sidebar-bg-color);
            }
            
            .stChatMessage {
                background-color: var(--card-bg-color);
                border-radius: 8px;
                padding: 1rem;
                margin-bottom: 1rem;
            }
            
            #MainMenu {visibility: hidden;}
            .stDeployButton {display:none;}
            footer {visibility: hidden;}
            #stDecoration {display:none;}
        </style>
    """
    
    if theme == "dark":
        styled_css = base_style % (
            "#1E1E1E",  # background-color
            "#FFFFFF",  # text-color
            "#2D2D2D",  # sidebar-bg-color
            "#3D3D3D"   # card-bg-color
        )
    else:  # light theme
        styled_css = base_style % (
            "#FFFFFF",  # background-color
            "#000000",  # text-color
            "#F0F2F6",  # sidebar-bg-color
            "#F8F9FA"   # card-bg-color
        )
    
    st.markdown(styled_css, unsafe_allow_html=True)

2.2 集成主题切换UI

修改app/Inicio.py，添加主题选择器并应用样式。需要在现有代码中做两处修改：

1. 替换原有的hide_streamlit_style()调用（第8行）
2. 添加主题切换控件

修改后的代码如下：

# 移除原有的hide_streamlit_style()调用，替换为：
from common.streamlit_style import apply_custom_theme

# 在页面标题前添加主题选择器
st.sidebar.title("主题设置")
theme = st.sidebar.radio(
    "选择显示主题",
    ("浅色模式", "暗黑模式"),
    index=0
)

# 应用选中的主题
apply_custom_theme("dark" if theme == "暗黑模式" else "light")

3. 实现状态持久化

为了让用户偏好的主题在刷新页面后仍然保留，需要使用Streamlit的会话状态（session_state）。修改app/Inicio.py的主题选择部分：

# 初始化会话状态
if "theme" not in st.session_state:
    st.session_state.theme = "light"

# 主题选择器
st.sidebar.title("主题设置")
theme_option = st.sidebar.radio(
    "选择显示主题",
    ("浅色模式", "暗黑模式"),
    index=0 if st.session_state.theme == "light" else 1
)

# 更新会话状态
new_theme = "dark" if theme_option == "暗黑模式" else "light"
if new_theme != st.session_state.theme:
    st.session_state.theme = new_theme
    st.experimental_rerun()  # 重新运行应用以应用新主题

# 应用主题
apply_custom_theme(st.session_state.theme)

4. 测试与验证

完成上述修改后，启动应用测试主题切换功能：

1. 运行应用：streamlit run app/Inicio.py
2. 在侧边栏查看新增的"主题设置"区域
3. 切换"浅色模式"和"暗黑模式"选项，验证界面是否正确更新
4. 刷新页面，确认主题偏好是否被保留

5. 总结与扩展

通过修改app/common/streamlit_style.py和app/Inicio.py两个文件，我们成功为Basdonax AI RAG添加了暗黑模式支持。这个实现具有以下特点：

• 使用CSS变量实现主题样式统一管理
• 通过会话状态保持用户主题偏好
• 完全兼容现有界面组件和功能

你可以进一步扩展这个功能，例如：

• 添加自定义颜色选择器
• 实现自动跟随系统主题
• 增加更多预设主题选项

希望这个教程能帮助你打造更舒适的Basdonax AI RAG使用体验！如果有任何问题，欢迎查阅项目README.md或提交issue。

【免费下载链接】basdonax-ai-rag 项目地址: https://gitcode.com/GitHub_Trending/ba/basdonax-ai-rag