diff --git a/__main__.py b/__main__.py
index 1d1cf56..7560b97 100644
--- a/__main__.py
+++ b/__main__.py
@@ -79,6 +79,7 @@ class ChatBot(ChatBotFrame):
         with gr.Box(elem_id='chat_box'):
             with gr.Row():
                 gr.Button(elem_classes='sm_btn').style(size='sm', full_width=False)
+                gr.HTML(func_box.get_html("appearance_switcher.html").format(label=""), elem_classes="insert_block")
             with gr.Row():
                 self.txt = gr.Textbox(show_label=False,  placeholder="Input question here.", elem_classes='chat_input').style(container=False)
                 self.input_copy = gr.State('')
diff --git a/docs/assets/custom.css b/docs/assets/custom.css
index 6994fbf..d3f38c6 100644
--- a/docs/assets/custom.css
+++ b/docs/assets/custom.css
@@ -72,6 +72,14 @@ mspace {
 .sm_btn {
     position: relative;
     bottom: 5px;
+    height: 10%;
+    border-radius: 20px!important;
+    min-width: min(10%,100%) !important;
+}
+/* usage_display */
+.insert_block {
+    position: relative;
+    bottom: 2px;
     min-width: min(110px,100%) !important;
 }
 
@@ -253,20 +261,7 @@ textarea.svelte-1pie7s6 {
     font-size: 12px !important;
 }
 
-/* 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);
-    border-radius: var(--block-radius);
-    background: var(--block-background-fill);
-    width: 100%;
-    line-height: var(--line-sm);
-    min-height: 2em;
-}
+
 #usage_display p, #usage_display span {
     margin: 0;
     font-size: .85em;
diff --git a/docs/assets/custom.js b/docs/assets/custom.js
index 84e0068..9a07884 100644
--- a/docs/assets/custom.js
+++ b/docs/assets/custom.js
@@ -58,8 +58,8 @@ function gradioLoaded(mutations) {
             chat_txt = document.getElementById('chat_txt');
             userInfoDiv = document.getElementById("user_info");
             appTitleDiv = document.getElementById("app_title");
-            chatbot = document.querySelector('#main_chatbot');
-            chatbotWrap = document.querySelector('#main_chatbot > .wrap');
+            chatbot = document.querySelector('#废弃');
+            chatbotWrap = document.querySelector('#废弃 > .wrap');
             apSwitch = document.querySelector('.apSwitch input[type="checkbox"]');
 
             if (loginUserForm) {
@@ -414,7 +414,7 @@ var mObserver = new MutationObserver(function (mutationsList) {
             for (var node of mmutation.addedNodes) {
                 if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
                     saveHistoryHtml();
-                    document.querySelectorAll('#main_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
+                    document.querySelectorAll('#废弃>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
                 }
                 if (node.tagName === 'INPUT' && node.getAttribute('type') === 'range') {
                     setSlider();
@@ -423,7 +423,7 @@ var mObserver = new MutationObserver(function (mutationsList) {
             for (var node of mmutation.removedNodes) {
                 if (node.nodeType === 1 && node.classList.contains('message') && node.getAttribute('data-testid') === 'bot') {
                     saveHistoryHtml();
-                    document.querySelectorAll('#main_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
+                    document.querySelectorAll('#废弃>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
                 }
             }
         } else if (mmutation.type === 'attributes') {
@@ -433,7 +433,7 @@ var mObserver = new MutationObserver(function (mutationsList) {
                 clearTimeout(timeoutId);
                 timeoutId = setTimeout(() => {
                     isThrottled = false;
-                    document.querySelectorAll('#main_chatbot>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
+                    document.querySelectorAll('#废弃>.wrap>.message-wrap .message.bot').forEach(addChuanhuButton);
                     saveHistoryHtml();
                 }, 500);
             }
@@ -444,7 +444,7 @@ mObserver.observe(document.documentElement, { attributes: true, childList: true,
 
 var loadhistorytime = 0; // for debugging
 function saveHistoryHtml() {
-    var historyHtml = document.querySelector('#main_chatbot > .wrap');
+    var historyHtml = document.querySelector('#废弃 > .wrap');
     localStorage.setItem('chatHistory', historyHtml.innerHTML);
     // console.log("History Saved")
     historyLoaded = false;
diff --git a/docs/assets/html/appearance_switcher.html b/docs/assets/html/appearance_switcher.html
index 9375071..2f03cd4 100644
--- a/docs/assets/html/appearance_switcher.html
+++ b/docs/assets/html/appearance_switcher.html
@@ -1,7 +1,4 @@
 <div style="display: flex; justify-content: space-between;">
-    <span style="margin-top: 4px !important;">
-        {label}
-    </span>
     <span>
         <label class="apSwitch" for="checkbox">
             <input type="checkbox" id="checkbox">
diff --git a/func_box.py b/func_box.py
index a5ea30c..4123c24 100644
--- a/func_box.py
+++ b/func_box.py
@@ -649,8 +649,12 @@ def update_txt(self,
         }
 
 
-def txtx(f, q):
-    return f
+def get_html(filename):
+    path = os.path.join(base_path, "docs/assets", "html", filename)
+    if os.path.exists(path):
+        with open(path, encoding="utf8") as file:
+            return file.read()
+    return ""
 
 
 def git_log_list():
diff --git a/theme.py b/theme.py
index 6436832..7a99211 100644
--- a/theme.py
+++ b/theme.py
@@ -1,6 +1,6 @@
 import gradio as gr
 from toolbox import get_conf
-CODE_HIGHLIGHT, ADD_WAIFU = get_conf('CODE_HIGHLIGHT', 'ADD_WAIFU')
+CODE_HIGHLIGHT, ADD_WAIFU, ADD_CHUANHU = get_conf('CODE_HIGHLIGHT', 'ADD_WAIFU', 'ADD_CHUANHU')
 # gradio可用颜色列表
 # gr.themes.utils.colors.slate (石板色)
 # gr.themes.utils.colors.gray (灰色)
@@ -97,20 +97,27 @@ def adjust_theme():
             chatbot_code_background_color="*neutral_950",
             chatbot_code_background_color_dark="*neutral_950",
         )
+        js = ''
+        if ADD_CHUANHU:
+            with open("./docs/assets/custom.js", "r", encoding="utf-8") as f, \
+                    open("./docs/assets/external-scripts.js", "r", encoding="utf-8") as f1:
+                customJS = f.read()
+                externalScripts = f1.read()
+            js += f'<script>{customJS}</script><script async>{externalScripts}</script>'
         # 添加一个萌萌的看板娘
         if ADD_WAIFU:
-            js = """
+            js += """
                 <script src="file=docs/waifu_plugin/jquery.min.js"></script>
                 <script src="file=docs/waifu_plugin/jquery-ui.min.js"></script>
                 <script src="file=docs/waifu_plugin/autoload.js"></script>
             """
-            gradio_original_template_fn = gr.routes.templates.TemplateResponse
-            def gradio_new_template_fn(*args, **kwargs):
-                res = gradio_original_template_fn(*args, **kwargs)
-                res.body = res.body.replace(b'</html>', f'{js}</html>'.encode("utf8"))
-                res.init_headers()
-                return res
-            gr.routes.templates.TemplateResponse = gradio_new_template_fn   # override gradio template
+        gradio_original_template_fn = gr.routes.templates.TemplateResponse
+        def gradio_new_template_fn(*args, **kwargs):
+            res = gradio_original_template_fn(*args, **kwargs)
+            res.body = res.body.replace(b'</html>', f'{js}</html>'.encode("utf8"))
+            res.init_headers()
+            return res
+        gr.routes.templates.TemplateResponse = gradio_new_template_fn   # override gradio template
     except:
         set_theme = None
         print('gradio版本较旧, 不能自定义字体和颜色')