update UI to use themeSwitcher

15 files changed, 83 insertions, 86 deletions

diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 5f65756c..c8ab09cf 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -1,7 +1,9 @@
 {{define "form/client"}}
 <a-form layout="inline" v-if="client">
     <template v-if="isEdit">
-    <a-tag v-if="isExpiry || isTrafficExhausted" color="red" style="margin-bottom: 10px;display: block;text-align: center;">Account is (Expired|Traffic Ended) And Disabled</a-tag>
+        <a-tag v-if="isExpiry || isTrafficExhausted" color="red" style="margin-bottom: 10px;display: block;text-align: center;">
+            Account is (Expired|Traffic Ended) And Disabled
+        </a-tag>
     </template>
     <a-form-item label='{{ i18n "pages.inbounds.enable" }}'>
         <a-switch v-model="client.enable"></a-switch>
@@ -17,11 +19,12 @@
                 <a-icon type="sync" @click="getNewEmail(client)"></a-icon>
             </a-tooltip>
         </span>
-        <a-input v-model.trim="client.email" style="width: 200px;" ></a-input>
+        <a-input v-model.trim="client.email" style="width: 200px;"></a-input>
     </a-form-item>
     <a-form-item label="Password" v-if="inbound.protocol === Protocols.TROJAN || inbound.protocol === Protocols.SHADOWSOCKS">
-        <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS" @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
-        <a-input v-model.trim="client.password" style="width: 300px;" ></a-input>
+        <a-icon v-if="inbound.protocol === Protocols.SHADOWSOCKS"
+                @click="client.password = RandomUtil.randomShadowsocksPassword()" type="sync"> </a-icon>
+        <a-input v-model.trim="client.password" style="width: 300px;"></a-input>
     </a-form-item>
     <br>
     <a-form-item label='{{ i18n "additional" }} ID' v-if="inbound.protocol === Protocols.VMESS">
@@ -85,26 +88,29 @@
 			</a-tooltip>
 		</span>
 		<a-form layout="block">
-			<a-textarea id="clientIPs" readonly @click="getDBClientIps(client.email,$event)" placeholder="Click To Get IPs"  :auto-size="{ minRows: 2, maxRows: 10 }">
+			<a-textarea id="clientIPs" readonly 
+                        @click="getDBClientIps(client.email,$event)"
+                        placeholder="Click To Get IPs"
+                        :auto-size="{ minRows: 2, maxRows: 10 }">
 			</a-textarea>
 		</a-form>
 	</a-form-item>
     <br>
     <a-form-item v-if="inbound.xtls" label="Flow">
-        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option value="">{{ i18n "none" }}</a-select-option>
             <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
     <a-form-item v-else-if="inbound.canEnableTlsFlow()" label="Flow">
-        <a-select v-model="client.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="client.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>
     </a-form-item>
     <a-form-item>
         <span slot="label">
-            <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+            <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
             <a-tooltip>
                 <template slot="title">
                     0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -112,9 +118,10 @@
                 <a-icon type="question-circle" theme="filled"></a-icon>
             </a-tooltip>
         </span>
-        <a-input-number v-model="client._totalGB":min="0"></a-input-number>
+        <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
         <template v-if="isEdit && clientStats">
-            <br><span> {{ i18n "usage" }}:</span>
+            <br>
+            <span> {{ i18n "usage" }}:</span>
             <a-tag :color="statsColor">
                 [[ sizeFormat(clientStats.up) ]] / 
                 [[ sizeFormat(clientStats.down) ]]
@@ -122,7 +129,8 @@
             </a-tag>
             <a-tooltip>
                 <template slot="title">{{ i18n "pages.inbounds.resetTraffic" }}</template>
-                <a-icon type="retweet" @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)" v-if="client.email.length > 0"></a-icon>
+                <a-icon type="retweet" @click="resetClientTraffic(client.email,clientStats.inboundId,$event.target)"
+                        v-if="client.email.length > 0"></a-icon>
             </a-tooltip>
         </template>        
     </a-form-item>
@@ -136,7 +144,7 @@
     </a-form-item>
     <a-form-item v-else>
         <span slot="label">
-            <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+            <span>{{ i18n "pages.inbounds.expireDate" }}</span>
             <a-tooltip>
                 <template slot="title">
                     <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -145,7 +153,7 @@
             </a-tooltip>
         </span>
         <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: 170px;"></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 3c40447e..9b4c7904 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -8,7 +8,7 @@
         <a-switch v-model="dbInbound.enable"></a-switch>
     </a-form-item>
     <a-form-item label='{{ i18n "protocol" }}'>
-        <a-select v-model="inbound.protocol" style="width: 160px;" :disabled="isEdit" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.protocol" style="width: 160px;" :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>
@@ -31,7 +31,7 @@
     <br>
     <a-form-item>
         <span slot="label">
-            <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+            <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
             <a-tooltip>
                 <template slot="title">
                     0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -43,7 +43,7 @@
     </a-form-item>
     <a-form-item>
         <span slot="label">
-            <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+            <span>{{ i18n "pages.inbounds.expireDate" }}</span>
             <a-tooltip>
                 <template slot="title">
                     <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -52,7 +52,7 @@
             </a-tooltip>
         </span>
         <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: 300px;"></a-date-picker>
     </a-form-item>
 </a-form>
diff --git a/web/html/xui/form/protocol/dokodemo.html b/web/html/xui/form/protocol/dokodemo.html
index 3e9e51ee..0eed31d4 100644
--- a/web/html/xui/form/protocol/dokodemo.html
+++ b/web/html/xui/form/protocol/dokodemo.html
@@ -8,7 +8,7 @@
     </a-form-item>
     <br>
     <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
-        <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 35912d61..f37c1a90 100644
--- a/web/html/xui/form/protocol/shadowsocks.html
+++ b/web/html/xui/form/protocol/shadowsocks.html
@@ -57,7 +57,7 @@
             <br>
             <a-form-item>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                     <a-tooltip>
                         <template slot="title">
                             0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -77,7 +77,7 @@
             </a-form-item>
             <a-form-item v-else>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
                     <a-tooltip>
                         <template slot="title">
                             <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -86,7 +86,7 @@
                     </a-tooltip>
                 </span>
                 <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: 170px;"></a-date-picker>
             </a-form-item>
         </a-collapse-panel>
@@ -106,7 +106,7 @@
 </a-form>
 <a-form layout="inline">
     <a-form-item label='{{ i18n "encryption" }}'>
-        <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>
@@ -114,7 +114,7 @@
         <a-input v-model.trim="inbound.settings.password" style="width: 250px;"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.network" }}'>
-        <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/socks.html b/web/html/xui/form/protocol/socks.html
index a3096d48..e7989b74 100644
--- a/web/html/xui/form/protocol/socks.html
+++ b/web/html/xui/form/protocol/socks.html
@@ -17,8 +17,7 @@
     <a-form-item label='{{ i18n "pages.inbounds.enable" }} udp'>
         <a-switch v-model="inbound.settings.udp"></a-switch>
     </a-form-item>
-    <a-form-item v-if="inbound.settings.udp"
-                 label="IP">
+    <a-form-item v-if="inbound.settings.udp" label="IP">
         <a-input v-model.trim="inbound.settings.ip"></a-input>
     </a-form-item>
 </a-form>
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index 983c0ba9..4a2518a7 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -55,14 +55,14 @@
             </a-form-item>
             <br>
             <a-form-item v-if="inbound.xtls" label="Flow">
-                <a-select v-model="client.flow" style="width: 150px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                <a-select v-model="client.flow" style="width: 150px" :dropdown-class-name="themeSwitcher.darkCardClass">
                     <a-select-option value="">{{ i18n "none" }}</a-select-option>
                     <a-select-option v-for="key in XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
                 </a-select>
             </a-form-item>
             <a-form-item>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                     <a-tooltip>
                         <template slot="title">
                             0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -82,7 +82,7 @@
             </a-form-item>
             <a-form-item v-else>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
                     <a-tooltip>
                         <template slot="title">
                             <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -91,7 +91,7 @@
                     </a-tooltip>
                 </span>
                 <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: 170px;"></a-date-picker>
             </a-form-item>
         </a-collapse-panel>
@@ -113,8 +113,7 @@
     <a-form layout="inline">
         <a-form-item label="Fallbacks">
             <a-row>
-                <a-button type="primary" size="small"
-                        @click="inbound.settings.addTrojanFallback()">
+                <a-button type="primary" size="small" @click="inbound.settings.addTrojanFallback()">
                     +
                 </a-button>
             </a-row>
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 6b35c3fa..12b15711 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -15,7 +15,7 @@
                 <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
             </a-form-item>
             <a-form-item label="ID">
-                <a-input v-model.trim="client.id"  style="width: 300px;"></a-input>
+                <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
             </a-form-item>
             <a-form-item v-if="client.email">
                 <span slot="label">
@@ -55,20 +55,20 @@
             </a-form-item>
             <br>
             <a-form-item v-if="inbound.xtls" label="Flow">
-                <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 XTLS_FLOW_CONTROL" :value="key">[[ key ]]</a-select-option>
                 </a-select>
             </a-form-item>
             <a-form-item v-else-if="inbound.canEnableTlsFlow()" label="Flow">
-                <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>
             </a-form-item>
             <a-form-item>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                     <a-tooltip>
                         <template slot="title">
                             0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -88,7 +88,7 @@
             </a-form-item>
             <a-form-item v-else>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
                     <a-tooltip>
                         <template slot="title">
                             <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -97,7 +97,7 @@
                     </a-tooltip>
                 </span>
                 <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: 170px;"></a-date-picker>
             </a-form-item>
         </a-collapse-panel>     
@@ -119,8 +119,7 @@
     <a-form layout="inline">
         <a-form-item label="Fallbacks">
             <a-row>
-                <a-button type="primary" size="small"
-                        @click="inbound.settings.addFallback()">
+                <a-button type="primary" size="small" @click="inbound.settings.addFallback()">
                     +
                 </a-button>
             </a-row>
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index 7fc9b630..2b02bd14 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -61,7 +61,7 @@
             <br>
             <a-form-item>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
+                    <span>{{ i18n "pages.inbounds.totalFlow" }}</span> (GB)
                     <a-tooltip>
                         <template slot="title">
                             0 <span>{{ i18n "pages.inbounds.meansNoLimit" }}</span>
@@ -81,7 +81,7 @@
             </a-form-item>
             <a-form-item v-else>
                 <span slot="label">
-                    <span >{{ i18n "pages.inbounds.expireDate" }}</span>
+                    <span>{{ i18n "pages.inbounds.expireDate" }}</span>
                     <a-tooltip>
                         <template slot="title">
                             <span>{{ i18n "pages.inbounds.leaveBlankToNeverExpire" }}</span>
@@ -90,7 +90,7 @@
                     </a-tooltip>
                 </span>
                 <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: 170px;"></a-date-picker>
             </a-form-item>
         </a-collapse-panel>     
diff --git a/web/html/xui/form/sniffing.html b/web/html/xui/form/sniffing.html
index 4d184028..31858ef3 100644
--- a/web/html/xui/form/sniffing.html
+++ b/web/html/xui/form/sniffing.html
@@ -1,21 +1,21 @@
 {{define "form/sniffing"}}
 <a-form layout="inline">
-  <a-form-item>
-            <span slot="label">
-                Sniffing
-                <a-tooltip>
-                    <template slot="title">
-                        <span >{{ i18n "pages.inbounds.noRecommendKeepDefault" }}</span>
-                    </template>
-                    <a-icon type="question-circle" theme="filled"></a-icon>
-                </a-tooltip>
-            </span>
-    <a-switch v-model="inbound.sniffing.enabled"></a-switch>
-  </a-form-item>
-  <a-form-item>
-    <a-checkbox-group v-model="inbound.sniffing.destOverride" v-if="inbound.sniffing.enabled">
-      <a-checkbox v-for="key,value in SNIFFING_OPTION" :value="key">[[ value ]]</a-checkbox>
-    </a-checkbox-group>
-  </a-form-item>
+    <a-form-item>
+        <span slot="label">
+            Sniffing
+            <a-tooltip>
+                <template slot="title">
+                    <span >{{ i18n "pages.inbounds.noRecommendKeepDefault" }}</span>
+                </template>
+                <a-icon type="question-circle" theme="filled"></a-icon>
+            </a-tooltip>
+        </span>
+        <a-switch v-model="inbound.sniffing.enabled"></a-switch>
+    </a-form-item>
+    <a-form-item>
+        <a-checkbox-group v-model="inbound.sniffing.destOverride" v-if="inbound.sniffing.enabled">
+            <a-checkbox v-for="key,value in SNIFFING_OPTION" :value="key">[[ value ]]</a-checkbox>
+        </a-checkbox-group>
+    </a-form-item>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/stream/stream_kcp.html b/web/html/xui/form/stream/stream_kcp.html
index 07a7d600..1c7e87bf 100644
--- a/web/html/xui/form/stream/stream_kcp.html
+++ b/web/html/xui/form/stream/stream_kcp.html
@@ -1,7 +1,7 @@
 {{define "form/streamKCP"}}
 <a-form layout="inline">
     <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.kcp.type" style="width: 280px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.kcp.type" style="width: 280px;" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option value="none">None (Not Camouflage)</a-select-option>
             <a-select-option value="srtp">SRTP (Camouflage Video Call)</a-select-option>
             <a-select-option value="utp">UTP (Camouflage 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 4d04587a..2dddfd87 100644
--- a/web/html/xui/form/stream/stream_quic.html
+++ b/web/html/xui/form/stream/stream_quic.html
@@ -1,7 +1,7 @@
 {{define "form/streamQUIC"}}
 <a-form layout="inline">
     <a-form-item label='{{ i18n "pages.inbounds.stream.quic.encryption" }}'>
-        <a-select v-model="inbound.stream.quic.security" style="width: 165px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.quic.security" style="width: 165px;" :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>
@@ -11,7 +11,7 @@
         <a-input v-model.trim="inbound.stream.quic.key"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "camouflage" }}'>
-        <a-select v-model="inbound.stream.quic.type" style="width: 280px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.quic.type" style="width: 280px;" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option value="none">none (not camouflage)</a-select-option>
             <a-select-option value="srtp">srtp (camouflage video call)</a-select-option>
             <a-select-option value="utp">utp (camouflage 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 95d8df09..4a07947e 100644
--- a/web/html/xui/form/stream/stream_settings.html
+++ b/web/html/xui/form/stream/stream_settings.html
@@ -2,7 +2,7 @@
 <!-- select stream network -->
 <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' : ''">
+        <a-select v-model="inbound.stream.network" @change="streamNetworkChange" :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/form/stream/stream_tcp.html b/web/html/xui/form/stream/stream_tcp.html
index 993fb0d0..cf4abe1b 100644
--- a/web/html/xui/form/stream/stream_tcp.html
+++ b/web/html/xui/form/stream/stream_tcp.html
@@ -13,8 +13,7 @@
 </a-form>
 
 <!-- tcp request -->
-<a-form v-if="inbound.stream.tcp.type === 'http'"
-        layout="inline">
+<a-form v-if="inbound.stream.tcp.type === 'http'" layout="inline">
     <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.requestVersion" }}'>
         <a-input v-model.trim="inbound.stream.tcp.request.version"></a-input>
     </a-form-item>
@@ -28,8 +27,7 @@
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
         <a-row>
-            <a-button size="small"
-                      @click="inbound.stream.tcp.request.addHeader('Host', 'xxx.com')">
+            <a-button size="small" @click="inbound.stream.tcp.request.addHeader('Host', 'xxx.com')">
                 +
             </a-button>
         </a-row>
@@ -39,8 +37,7 @@
             <a-input style="width: 50%" v-model.trim="header.value"
                      addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
                 <template slot="addonAfter">
-                    <a-button size="small"
-                              @click="inbound.stream.tcp.request.removeHeader(index)">
+                    <a-button size="small" @click="inbound.stream.tcp.request.removeHeader(index)">
                         -
                     </a-button>
                 </template>
@@ -50,8 +47,7 @@
 </a-form>
 
 <!-- tcp response -->
-<a-form v-if="inbound.stream.tcp.type === 'http'"
-        layout="inline">
+<a-form v-if="inbound.stream.tcp.type === 'http'" layout="inline">
     <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseVersion" }}'>
         <a-input v-model.trim="inbound.stream.tcp.response.version"></a-input>
     </a-form-item>
@@ -63,8 +59,7 @@
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.stream.tcp.responseHeader" }}'>
         <a-row>
-            <a-button size="small"
-                      @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">
+            <a-button size="small" @click="inbound.stream.tcp.response.addHeader('Content-Type', 'application/octet-stream')">
                 +
             </a-button>
         </a-row>
@@ -74,8 +69,7 @@
             <a-input style="width: 50%" v-model.trim="header.value"
                      addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
                 <template slot="addonAfter">
-                    <a-button size="small"
-                              @click="inbound.stream.tcp.response.removeHeader(index)">
+                    <a-button size="small" @click="inbound.stream.tcp.response.removeHeader(index)">
                         -
                     </a-button>
                 </template>
diff --git a/web/html/xui/form/stream/stream_ws.html b/web/html/xui/form/stream/stream_ws.html
index 5b49ec88..3e09fbe8 100644
--- a/web/html/xui/form/stream/stream_ws.html
+++ b/web/html/xui/form/stream/stream_ws.html
@@ -10,8 +10,7 @@
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.stream.general.requestHeader" }}'>
         <a-row>
-            <a-button size="small"
-                      @click="inbound.stream.ws.addHeader('Host', '')">
+            <a-button size="small" @click="inbound.stream.ws.addHeader('Host', '')">
                 +
             </a-button>
         </a-row>
@@ -21,8 +20,7 @@
             <a-input style="width: 50%" v-model.trim="header.value"
                      addon-before='{{ i18n "pages.inbounds.stream.general.value" }}'>
                 <template slot="addonAfter">
-                    <a-button size="small"
-                              @click="inbound.stream.ws.removeHeader(index)">
+                    <a-button size="small" @click="inbound.stream.ws.removeHeader(index)">
                         -
                     </a-button>
                 </template>
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index 5e02f985..81506d8a 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -37,18 +37,18 @@
         <a-input v-model.trim="inbound.stream.tls.server" style="width: 250px"></a-input>
     </a-form-item>
     <a-form-item label="CipherSuites">
-        <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 300px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.tls.cipherSuites" style="width: 300px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option value="">auto</a-select-option>
             <a-select-option v-for="key in TLS_CIPHER_OPTION" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
     <a-form-item label="MinVersion">
-        <a-select v-model="inbound.stream.tls.minVersion" style="width: 60px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.tls.minVersion" style="width: 60px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
     <a-form-item label="MaxVersion">
-        <a-select v-model="inbound.stream.tls.maxVersion" style="width: 60px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+        <a-select v-model="inbound.stream.tls.maxVersion" style="width: 60px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option v-for="key in TLS_VERSION_OPTION" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
@@ -57,7 +57,7 @@
     </a-form-item>
     <a-form-item label="uTLS">
         <a-select v-model="inbound.stream.tls.settings.fingerprint"
-                  style="width: 170px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                  style="width: 170px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option value=''>None</a-select-option>
             <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
         </a-select>
@@ -145,9 +145,9 @@
     <a-form-item label="xVer">
         <a-input-number v-model="inbound.stream.reality.xver" :min="0" style="width: 60px"></a-input-number>
     </a-form-item>
-    <a-form-item label="uTLS" >
+    <a-form-item label="uTLS">
         <a-select v-model="inbound.stream.reality.settings.fingerprint" 
-                    style="width: 135px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
+                    style="width: 135px" :dropdown-class-name="themeSwitcher.darkCardClass">
             <a-select-option v-for="key in UTLS_FINGERPRINT" :value="key">[[ key ]]</a-select-option>
         </a-select>
     </a-form-item>
@@ -169,7 +169,7 @@

                
                    
                        contacts: admin@thfree.ru
                    
                
                
                    
                        mirrors for living