diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index 8c142ce8f..ff636e71c 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -10,7 +10,7 @@
                 <td>
                     <a-form-item>
                         <a-select v-model="clientsBulkModal.emailMethod" buttonStyle="solid" style="width: 250px"
-                            :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                            :dropdown-class-name="themeSwitcher.darkCardClass">
                             <a-select-option :value="0">Random</a-select-option>
                             <a-select-option :value="1">Random+Prefix</a-select-option>
                             <a-select-option :value="2">Random+Prefix+Num</a-select-option>
@@ -64,7 +64,7 @@
                 <td>Flow</td>
                 <td>
                     <a-form-item>
-                        <a-select v-model="clientsBulkModal.flow" style="width: 250px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                        <a-select v-model="clientsBulkModal.flow" style="width: 250px" :dropdown-class-name="themeSwitcher.darkCardClass">
                             <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                             <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
                         </a-select>
@@ -132,7 +132,7 @@
                 <td>
                     <a-form-item>
                         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       :dropdown-class-name="themeSwitcher.darkCardClass"
                                        v-model="clientsBulkModal.expiryTime" style="width: 250px;"></a-date-picker>
                     </a-form-item>
                 </td>
diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
index 35013a9ec..7cbedecfe 100644
--- a/web/html/xui/component/themeSwitch.html
+++ b/web/html/xui/component/themeSwitch.html
@@ -28,7 +28,7 @@
       isDarkTheme,
       bgStyle: `background: ${colors[theme].bg};`,
       textStyle: `color: ${colors[theme].text};`,
-      darkClass: isDarkTheme ? 'ant-card-dark' : '',
+      darkClass: isDarkTheme ? 'ant-dark' : '',
       darkCardClass: isDarkTheme ? 'ant-card-dark' : '',
       darkDrawerClass: isDarkTheme ? 'ant-drawer-dark' : '',
       get currentTheme() {
@@ -40,7 +40,7 @@
         localStorage.setItem('dark-mode', this.isDarkTheme);
         this.bgStyle = `background: ${colors[this.theme].bg};`;
         this.textStyle = `color: ${colors[this.theme].text};`;
-        this.darkClass = this.isDarkTheme ? 'ant-card-dark' : '';
+        this.darkClass = this.isDarkTheme ? 'ant-dark' : '';
         this.darkCardClass = this.isDarkTheme ? 'ant-card-dark' : '';
         this.darkDrawerClass = this.isDarkTheme ? 'ant-drawer-dark' : '';
       },
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 83aab2bec..5119a1c1e 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -74,7 +74,7 @@
             <td>Flow</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="client.flow" style="width: 250px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="client.flow" style="width: 250px" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                         <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
                     </a-select>
@@ -140,7 +140,7 @@
             <td>
                 <a-form-item>
                     <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                   :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                   :dropdown-class-name="themeSwitcher.darkCardClass"
                                    v-model="client._expiryTime" style="width: 250px;"></a-date-picker>
                     <a-tag color="red" v-if="isExpiry">Expired</a-tag>
                 </a-form-item>
diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html
index 26e1cd61c..253c4fe37 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -22,7 +22,7 @@
             <td>{{ i18n "protocol" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.protocol" style="width: 250px;" :disabled="isEdit" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.protocol" style="width: 250px;" :disabled="isEdit" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option v-for="p in Protocols" :key="p" :value="p">[[ p ]]</a-select-option>
                     </a-select>
                 </a-form-item>
@@ -80,7 +80,7 @@
             <td>
                 <a-form-item>
                     <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                   :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                   :dropdown-class-name="themeSwitcher.darkCardClass"
                                    v-model="dbInbound._expiryTime" style="width: 250px;"></a-date-picker>
                 </a-form-item>
             </td>
diff --git a/web/html/xui/form/protocol/dokodemo.html b/web/html/xui/form/protocol/dokodemo.html
index c03acd349..bf22a5855 100644
--- a/web/html/xui/form/protocol/dokodemo.html
+++ b/web/html/xui/form/protocol/dokodemo.html
@@ -21,7 +21,7 @@
             <td>{{ i18n "pages.inbounds.network"}}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="tcp,udp">tcp+udp</a-select-option>
                         <a-select-option value="tcp">tcp</a-select-option>
                         <a-select-option value="udp">udp</a-select-option>
diff --git a/web/html/xui/form/protocol/shadowsocks.html b/web/html/xui/form/protocol/shadowsocks.html
index 59ac4b780..58becb5ab 100644
--- a/web/html/xui/form/protocol/shadowsocks.html
+++ b/web/html/xui/form/protocol/shadowsocks.html
@@ -90,7 +90,7 @@
                     <td>
                         <a-form-item>
                             <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                           :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                           :dropdown-class-name="themeSwitcher.darkCardClass"
                                            v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
                         </a-form-item>
                     </td>
@@ -115,7 +115,7 @@
             <td>{{ i18n "encryption" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.settings.method" style="width: 250px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.settings.method" style="width: 250px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option v-for="method in SSMethods" :value="method">[[ method ]]</a-select-option>
                     </a-select>
                 </a-form-item>
@@ -135,7 +135,7 @@
             <td>{{ i18n "pages.inbounds.network" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="tcp,udp">tcp+udp</a-select-option>
                         <a-select-option value="tcp">tcp</a-select-option>
                         <a-select-option value="udp">udp</a-select-option>
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index 0fd733403..418a22f88 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -88,7 +88,7 @@
                 <td>
                     <a-form-item>
                         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       :dropdown-class-name="themeSwitcher.darkCardClass"
                                        v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
                     </a-form-item>
                 </td>
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 494667e26..bb23a77fe 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -31,7 +31,7 @@
                 <td>flow</td>
                 <td>
                     <a-form-item>
-                        <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                        <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
                             <a-select-option value="" selected>{{ i18n "none" }}</a-select-option>
                             <a-select-option v-for="key in TLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
                         </a-select>
@@ -99,7 +99,7 @@
                 <td>
                     <a-form-item>
                         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       :dropdown-class-name="themeSwitcher.darkCardClass"
                                        v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
                     </a-form-item>
                 </td>
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index a1cba9713..c03dee072 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -96,7 +96,7 @@
                 <td>
                     <a-form-item>
                         <a-date-picker :show-time="{ format: 'HH:mm:ss' }" format="YYYY-MM-DD HH:mm:ss"
-                                       :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''"
+                                       :dropdown-class-name="themeSwitcher.darkCardClass"
                                        v-model="client._expiryTime" style="width: 200px;"></a-date-picker>
                     </a-form-item>
                 </td>
diff --git a/web/html/xui/form/stream/stream_kcp.html b/web/html/xui/form/stream/stream_kcp.html
index 31b4da294..1be5c0265 100644
--- a/web/html/xui/form/stream/stream_kcp.html
+++ b/web/html/xui/form/stream/stream_kcp.html
@@ -5,7 +5,7 @@
             <td>{{ i18n "camouflage" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.kcp.type" style="width: 250px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.kcp.type" style="width: 250px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="none">none (not camouflage)</a-select-option>
                         <a-select-option value="srtp">srtp (video call)</a-select-option>
                         <a-select-option value="utp">utp (BT download)</a-select-option>
diff --git a/web/html/xui/form/stream/stream_quic.html b/web/html/xui/form/stream/stream_quic.html
index dbb1c5c76..25a71a06d 100644
--- a/web/html/xui/form/stream/stream_quic.html
+++ b/web/html/xui/form/stream/stream_quic.html
@@ -5,7 +5,7 @@
             <td>{{ i18n "pages.inbounds.stream.quic.encryption" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.quic.security" style="width: 200px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.quic.security" style="width: 200px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="none">none</a-select-option>
                         <a-select-option value="aes-128-gcm">aes-128-gcm</a-select-option>
                         <a-select-option value="chacha20-poly1305">chacha20-poly1305</a-select-option>
@@ -25,7 +25,7 @@
             <td>{{ i18n "camouflage" }}</td>
             <td>
                 <a-form-item>
-                    <a-select v-model="inbound.stream.quic.type" style="width: 200px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    <a-select v-model="inbound.stream.quic.type" style="width: 200px;" :dropdown-class-name="themeSwitcher.darkCardClass">
                         <a-select-option value="none">none (not camouflage)</a-select-option>
                         <a-select-option value="srtp">srtp (video call)</a-select-option>
                         <a-select-option value="utp">utp (BT download)</a-select-option>
diff --git a/web/html/xui/form/stream/stream_settings.html b/web/html/xui/form/stream/stream_settings.html
index db71c7c7d..e2398b155 100644
--- a/web/html/xui/form/stream/stream_settings.html
+++ b/web/html/xui/form/stream/stream_settings.html
@@ -3,7 +3,7 @@
 <a-form layout="inline">
     <a-form-item label="{{ i18n "transmission" }}">
         <a-select v-model="inbound.stream.network" @change="streamNetworkChange"
-            :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+            :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option value="tcp">tcp</a-select-option>
             <a-select-option value="kcp">kcp</a-select-option>
             <a-select-option value="ws">ws</a-select-option>
diff --git a/web/html/xui/inbounds.html b/web/html/xui/inbounds.html
index 788a64645..f98d21322 100644
--- a/web/html/xui/inbounds.html
+++ b/web/html/xui/inbounds.html
@@ -41,19 +41,19 @@
                             <a-col :xs="24" :sm="24" :lg="12">
                                 {{ i18n "clients" }}:
                                 <a-tag color="green">[[ total.clients ]]</a-tag>
-                                <a-popover title="{{ i18n "disabled" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                <a-popover title="{{ i18n "disabled" }}" :overlay-class-name="themeSwitcher.darkClass">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.deactive">[[ clientEmail ]]</p>
                                     </template>
                                     <a-tag v-if="total.deactive.length">[[ total.deactive.length ]]</a-tag>
                                 </a-popover>
-                                <a-popover title="{{ i18n "depleted" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                <a-popover title="{{ i18n "depleted" }}" :overlay-class-name="themeSwitcher.darkClass">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.depleted">[[ clientEmail ]]</p>
                                     </template>
                                     <a-tag color="red" v-if="total.depleted.length">[[ total.depleted.length ]]</a-tag>
                                 </a-popover>
-                                <a-popover title="{{ i18n "depletingSoon" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                <a-popover title="{{ i18n "depletingSoon" }}" :overlay-class-name="themeSwitcher.darkClass">
                                     <template slot="content">
                                         <p v-for="clientEmail in total.expiring">[[ clientEmail ]]</p>
                                     </template>
@@ -71,7 +71,7 @@
                                     <a-button type="primary" icon="plus" @click="openAddInbound">{{ i18n "pages.inbounds.addInbound" }}</a-button>
                                     <a-dropdown :trigger="['click']">
                                         <a-button type="primary" icon="menu">{{ i18n "pages.inbounds.generalActions" }}</a-button>
-                                        <a-menu slot="overlay" @click="a => generalActions(a)" :theme="siderDrawer.theme">
+                                        <a-menu slot="overlay" @click="a => generalActions(a)" :theme="themeSwitcher.currentTheme">
                                             <a-menu-item key="export">
                                                 <a-icon type="export"></a-icon>
                                                 {{ i18n "pages.inbounds.export" }}
@@ -95,7 +95,7 @@
                                     <a-select v-model="refreshInterval"
                                               v-if="isRefreshEnabled"
                                               @change="changeRefreshInterval"
-                                              :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                                              :dropdown-class-name="themeSwitcher.darkCardClass">
                                         <a-select-option v-for="key in [5,10,30,60]" :value="key*1000">[[ key ]]s</a-select-option>
                                     </a-select>
                                     <a-icon type="sync" :spin="refreshing" @click="manualRefresh" style="margin: 0 5px;"></a-icon>
@@ -113,7 +113,7 @@
                             <template slot="action" slot-scope="text, dbInbound">
                                 <a-dropdown :trigger="['click']">
                                     <a-icon @click="e => e.preventDefault()" type="menu"></a-icon>
-                                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="siderDrawer.theme">
+                                    <a-menu slot="overlay" @click="a => clickAction(a, dbInbound)" :theme="themeSwitcher.currentTheme">
                                         <a-menu-item key="edit">
                                             <a-icon type="edit"></a-icon>
                                             {{ i18n "edit" }}
@@ -171,19 +171,19 @@
                             <template slot="clients" slot-scope="text, dbInbound">
                                 <template v-if="clientCount[dbInbound.id]">
                                     <a-tag style="margin:0;" color="green">[[ clientCount[dbInbound.id].clients ]]</a-tag>
-                                    <a-popover title="{{ i18n "disabled" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                    <a-popover title="{{ i18n "disabled" }}" :overlay-class-name="themeSwitcher.darkClass">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].deactive">[[ clientEmail ]]</p>
                                         </template>
                                         <a-tag style="margin:0; padding: 0 2px;" v-if="clientCount[dbInbound.id].deactive.length">[[ clientCount[dbInbound.id].deactive.length ]]</a-tag>
                                     </a-popover>
-                                    <a-popover title="{{ i18n "depleted" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                    <a-popover title="{{ i18n "depleted" }}" :overlay-class-name="themeSwitcher.darkClass">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].depleted">[[ clientEmail ]]</p>
                                         </template>
                                         <a-tag style="margin:0; padding: 0 2px;" color="red" v-if="clientCount[dbInbound.id].depleted.length">[[ clientCount[dbInbound.id].depleted.length ]]</a-tag>
                                     </a-popover>
-                                    <a-popover title="{{ i18n "depletingSoon" }}" :overlay-class-name="siderDrawer.isDarkTheme ? 'ant-dark' : ''">
+                                    <a-popover title="{{ i18n "depletingSoon" }}" :overlay-class-name="themeSwitcher.darkClass">
                                         <template slot="content">
                                             <p v-for="clientEmail in clientCount[dbInbound.id].expiring">[[ clientEmail ]]</p>
                                         </template>
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index b7bfc58a3..7ac4efa9b 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -212,7 +212,7 @@ <h2>{{ i18n "pages.index.xraySwitchClickDesk"}}</h2>
                 <a-select v-model="logModal.rows"
                 style="width: 80px"
                 @change="openLogs(logModal.rows)"
-                :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                :dropdown-class-name="themeSwitcher.darkCardClass">
                     <a-select-option value="10">10</a-select-option>
                     <a-select-option value="20">20</a-select-option>
                     <a-select-option value="50">50</a-select-option>