Add theme to modal forms #50

web/assets/css/custom.css

@@ -163,10 +163,24 @@
 
 .ant-card-dark .ant-table-thead th {
     color: hsla(0,0%,100%,.65);
-    background-color: #000000;
+    background-color: #000c17;
 }
 
-.ant-card-dark .ant-table-tbody tr td {
+.ant-card-dark .ant-table-tbody tr td,
+.ant-card-dark .ant-modal-title {
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-collapse-content {
+    background-color: #001529;
+}
+
+.ant-card-dark .ant-list-item-meta-title,
+.ant-card-dark .ant-list-item-meta-description,
+.ant-card-dark .ant-form-item-label>label,
+.ant-card-dark .ant-form-item,
+.ant-card-dark .ant-divider-inner-text,
+.ant-card-dark .ant-collapse>.ant-collapse-item>.ant-collapse-header {
     color: hsla(0,0%,100%,.65);
 }
 
@@ -177,4 +191,23 @@
 .ant-card-dark tbody .ant-table-expanded-row {
     color: hsla(0,0%,100%,.65);
     background-color: #023366; 
+}
+
+.ant-card-dark .ant-input,
+.ant-card-dark .ant-input-number,
+.ant-card-dark .ant-select-selection {
+    background-color: #023366;
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-collapse-item {
+    background-color: #000c17;
+    color: hsla(0,0%,100%,.65);
+}
+
+.ant-card-dark .ant-modal-content,
+.ant-card-dark .ant-modal-body,
+.ant-card-dark .ant-modal-header {
+    color: hsla(0,0%,100%,.65);
+    background-color: #1C262D; 
 }

web/html/common/prompt_modal.html

@@ -1,6 +1,7 @@
 {{define "promptModal"}}
 <a-modal id="prompt-modal" v-model="promptModal.visible" :title="promptModal.title"
          :closable="true" @ok="promptModal.ok" :mask-closable="false"
+         :class="siderDrawer.isDarkTheme ? darkClass : ''"
          :ok-text="promptModal.okText" cancel-text='{{ i18n "cancel" }}'>
     <a-input id="prompt-modal-input" :type="promptModal.type"
              v-model="promptModal.value"

web/html/common/qrcode_modal.html

@@ -1,6 +1,7 @@
 {{define "qrcodeModal"}}
 <a-modal id="qrcode-modal" v-model="qrModal.visible" :title="qrModal.title"
          :closable="true" width="300px" :ok-text="qrModal.okText"
+         :class="siderDrawer.isDarkTheme ? darkClass : ''"
          cancel-text='{{ i18n "close" }}' :ok-button-props="{attrs:{id:'qr-modal-ok-btn'}}">
          <a-tag color="green" style="margin-bottom: 10px;display: block;text-align: center;" >{{ i18n "pages.inbounds.clickOnQRcode" }}</a-tag>
     <canvas @click="copyToClipboard()" id="qrCode" style="width: 100%; height: 100%;"></canvas>

web/html/common/text_modal.html

@@ -1,6 +1,7 @@
 {{define "textModal"}}
 <a-modal id="text-modal" v-model="txtModal.visible" :title="txtModal.title"
          :closable="true" ok-text='{{ i18n "copy" }}' cancel-text='{{ i18n "close" }}'
+         :class="siderDrawer.isDarkTheme ? darkClass : ''"
          :ok-button-props="{attrs:{id:'txt-modal-ok-btn'}}">
     <a-button v-if="!ObjectUtil.isEmpty(txtModal.fileName)" type="primary" style="margin-bottom: 10px;"
               :href="'data:application/text;charset=utf-8,' + encodeURIComponent(txtModal.content)" :download="txtModal.fileName">

web/html/xui/client_bulk_modal.html

@@ -1,6 +1,7 @@
 {{define "clientsBulkModal"}}
 <a-modal id="client-bulk-modal" v-model="clientsBulkModal.visible" :title="clientsBulkModal.title" @ok="clientsBulkModal.ok"
          :confirm-loading="clientsBulkModal.confirmLoading" :closable="true" :mask-closable="false"
+         :class="siderDrawer.isDarkTheme ? darkClass : ''"
          :ok-text="clientsBulkModal.okText" cancel-text='{{ i18n "close" }}'>
     <a-form layout="inline">
         <a-form-item label='{{ i18n "pages.client.method" }}'>

web/html/xui/client_modal.html

@@ -1,6 +1,7 @@
 {{define "clientsModal"}}
 <a-modal id="client-modal" v-model="clientModal.visible" :title="clientModal.title" @ok="clientModal.ok"
          :confirm-loading="clientModal.confirmLoading" :closable="true" :mask-closable="false"
+         :class="siderDrawer.isDarkTheme ? darkClass : ''"
          :ok-text="clientModal.okText" cancel-text='{{ i18n "close" }}'>
     {{template "form/client"}}
 </a-modal>

web/html/xui/common_sider.html

@@ -38,8 +38,8 @@
         <a-menu-item mode="inline">
             <a-icon type="bg-colors"></a-icon>
             <a-switch :default-checked="siderDrawer.isDarkTheme"
-            un-checked-children="☀"
-            checked-children="🌙"
+            checked-children="☀"
+            un-checked-children="🌙"
             @change="siderDrawer.changeTheme()"></a-switch>
         </a-menu-item>
     </a-menu>
@@ -59,8 +59,8 @@
         <a-menu-item mode="inline">
             <a-icon type="bg-colors"></a-icon>
             <a-switch :default-checked="siderDrawer.isDarkTheme"
-            un-checked-children="☀"
-            checked-children="🌙"
+            checked-children="☀"
+            un-checked-children="🌙"
             @change="siderDrawer.changeTheme()"></a-switch>
         </a-menu-item>
     </a-menu>

web/html/xui/form/client.html

@@ -48,7 +48,7 @@
         </span>
         <a-input-number v-model="client._totalGB" :min="0"></a-input-number>
         <template v-if="isEdit && clientStats">
-            {{ i18n "usage" }}: 
+            <span>{{ i18n "usage" }}:</span>
             <a-tag :color="statsColor">
                 [[ sizeFormat(clientStats.up) ]] / 
                 [[ sizeFormat(clientStats.down) ]]

web/html/xui/inbound_info_modal.html

@@ -3,6 +3,7 @@
     v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}'
     :closable="true"
     :mask-closable="true"
+    :class="siderDrawer.isDarkTheme ? darkClass : ''"
     :footer="null"
     width="600px"
     >
@@ -211,7 +212,7 @@
                 return this.infoModal.inbound;
             },
             get isEnable() {
-                if(infoModal.clientStats.length){
+                if(infoModal.clientStats){
                     return infoModal.clientStats.enable;
                 }
                 return infoModal.dbInbound.isEnable;

web/html/xui/inbound_modal.html

@@ -1,6 +1,7 @@
 {{define "inboundModal"}}
 <a-modal id="inbound-modal" v-model="inModal.visible" :title="inModal.title" @ok="inModal.ok"
          :confirm-loading="inModal.confirmLoading" :closable="true" :mask-closable="false"
+         :class="siderDrawer.isDarkTheme ? darkClass : ''"
          :ok-text="inModal.okText" cancel-text='{{ i18n "close" }}'>
     {{template "form/inbound"}}
 </a-modal>

web/html/xui/setting.html

@@ -23,28 +23,6 @@
     :not(.ant-card-dark)>.ant-tabs-top-bar {
         background: white;
     }
-
-    .ant-card-dark .ant-collapse-content {
-        background-color: #001529;
-    }
-
-    .ant-card-dark .ant-list-item-meta-title,
-    .ant-card-dark .ant-list-item-meta-description,
-    .ant-card-dark .ant-form-item-label>label,
-    .ant-card-dark .ant-divider-inner-text,
-    .ant-card-dark .ant-collapse>.ant-collapse-item>.ant-collapse-header {
-        color: hsla(0,0%,100%,.65);
-    }
-
-    .ant-card-dark .ant-input,
-    .ant-card-dark .ant-select-selection {
-        background-color: #023366;
-        color: hsla(0,0%,100%,.65);
-    }
-    
-    .ant-card-dark .ant-collapse-item {
-        background-color: black;
-    }
 </style>
 <body>
 <a-layout id="app" v-cloak>