feat: 增加亮暗色切换按钮

ChuanhuChatbot.py

@@ -78,9 +78,9 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                         label="API-Key",
                     )
                     if multi_api_key:
-                        usageTxt = gr.Markdown("多账号模式已开启，无需输入key，可直接开始对话", elem_id="usage_display")
+                        usageTxt = gr.Markdown("多账号模式已开启，无需输入key，可直接开始对话", elem_id="usage_display", elem_classes="insert_block")
                     else:
-                        usageTxt = gr.Markdown("**发送消息** 或 **提交key** 以显示额度", elem_id="usage_display")
+                        usageTxt = gr.Markdown("**发送消息** 或 **提交key** 以显示额度", elem_id="usage_display", elem_classes="insert_block")
                     model_select_dropdown = gr.Dropdown(
                         label="选择模型", choices=MODELS, multiselect=False, value=MODELS[0]
                     )
@@ -161,7 +161,7 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                 with gr.Tab(label="高级"):
                     gr.Markdown("# ⚠️ 务必谨慎更改 ⚠️\n\n如果无法使用请恢复默认设置")
                     default_btn = gr.Button("🔙 恢复默认设置")
-
+                    gr.HTML(appearance_switcher, elem_classes="insert_block")
                     with gr.Accordion("参数", open=False):
                         top_p = gr.Slider(
                             minimum=-0,

assets/custom.css

@@ -73,9 +73,10 @@ footer {
 }
 
 /* usage_display */
-#usage_display {
+.insert_block {
     position: relative;
     margin: 0;
+    padding: .5em 1em;
     box-shadow: var(--block-shadow);
     border-width: var(--block-border-width);
     border-color: var(--block-border-color);
@@ -87,7 +88,6 @@ footer {
 }
 #usage_display p, #usage_display span {
     margin: 0;
-    padding: .5em 1em;
     font-size: .85em;
     color: var(--body-text-color-subdued);
 }
@@ -114,6 +114,44 @@ footer {
     line-height: 20px;
 }
 
+.apSwitch {
+    top: 2px;
+    display: inline-block;
+    height: 24px;
+    position: relative;
+    width: 48px;
+    border-radius: 12px;
+}
+.apSwitch input {
+    display: none !important;    
+}
+.apSlider {
+    background-color: var(--block-label-background-fill);
+    bottom: 0;
+    cursor: pointer;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: .4s;
+    font-size: 18px;
+    border-radius: 12px;
+}
+.apSlider::before {    
+    bottom: -1.5px;
+    left: 1px;
+    position: absolute;
+    transition: .4s;
+    content: "🌞";
+}
+input:checked + .apSlider {
+    background-color: var(--block-label-background-fill);
+}
+input:checked + .apSlider::before {
+    transform: translateX(23px);
+    content:"🌚";
+}
+
 #submit_btn, #cancel_btn {
     height: 42px !important;
 }

assets/custom.js

@@ -13,6 +13,7 @@ var user_input_tb = null;
 var userInfoDiv = null;
 var appTitleDiv = null;
 var chatbot = null;
+var apSwitch = null;
 
 var ga = document.getElementsByTagName("gradio-app");
 var targetNode = ga[0];
@@ -27,8 +28,9 @@ function gradioLoaded(mutations) {
             userInfoDiv = document.getElementById("user_info");
             appTitleDiv = document.getElementById("app_title");
             chatbot = document.querySelector('#chuanhu_chatbot');
+            apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
 
-            if (gradioContainer) {  // gradioCainter 加载出来了没?
+            if (gradioContainer && apSwitch) {  // gradioCainter 加载出来了没?
                 adjustDarkMode();
             }
             if (user_input_tb) {  // user_input_tb 加载出来了没?
@@ -158,7 +160,6 @@ function showOrHideUserInfo() {
 }
 
 function toggleDarkMode(isEnabled) {
-    gradioContainer = document.querySelector(".gradio-container");
     if (isEnabled) {
         gradioContainer.classList.add("dark");
         document.body.style.setProperty("background-color", "var(--neutral-950)", "important");
@@ -169,12 +170,17 @@ function toggleDarkMode(isEnabled) {
 }
 function adjustDarkMode() {
     const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
     // 根据当前颜色模式设置初始状态
     toggleDarkMode(darkModeQuery.matches);
     // 监听颜色模式变化
     darkModeQuery.addEventListener("change", (e) => {
         toggleDarkMode(e.matches);
     });
+    // apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
+    apSwitch.addEventListener("change", (e) => {
+        toggleDarkMode(e.target.checked);
+    });
 }
 
 function setChatbotHeight() {

modules/presets.py

@@ -44,6 +44,15 @@ description = """\
 
 footer = """<div class="versions">{versions}</div>"""
 
+appearance_switcher = """
+<div style="display: flex; justify-content: space-between;">
+<span style="margin-top: 4px !important;">切换亮暗色主题</span>
+<span><label class="apSwitch" for="checkbox">
+    <input type="checkbox" id="checkbox">
+    <div class="apSlider"></div>
+</label></span>
+</div>
+"""
 summarize_prompt = "你是谁？我们刚才聊了什么？"  # 总结对话时的 prompt
 
 MODELS = [