Optimize Dark Theme & Ultra Dark (#1889)

---------

Co-authored-by: MHSanaei <ho3ein.sanaei@gmail.com>
Co-authored-by: Alireza Ahmadi <alireza7@gmail.com>

4 files changed, 45 insertions, 33 deletions

diff --git a/web/html/xui/common_sider.html b/web/html/xui/common_sider.html
index 13d5bd49..78b833b9 100644
--- a/web/html/xui/common_sider.html
+++ b/web/html/xui/common_sider.html
@@ -15,10 +15,6 @@
     <a-icon type="tool"></a-icon>
     <span><b>{{ i18n "menu.xray"}}</b></span>
 </a-menu-item>
-<!--<a-menu-item key="{{ .base_path }}panel/clients">-->
-<!--    <a-icon type="laptop"></a-icon>-->
-<!--    <span>Client</span>-->
-<!--</a-menu-item>-->
 <a-menu-item key="{{ .base_path }}logout">
     <a-icon type="logout"></a-icon>
     <span><b>{{ i18n "menu.logout"}}</b></span>
@@ -31,7 +27,13 @@
     <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
         <a-menu-item mode="inline">
             <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-            <theme-switch />
+            <theme-switch>
+            </theme-switch>
+            <a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;"
+                        :checked="themeSwitcher.isUltra"
+                        @click="themeSwitcher.toggleUltra()">
+                        Ultra
+            </a-checkbox>
         </a-menu-item>
     </a-menu>
     <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
@@ -50,7 +52,13 @@
     <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
         <a-menu-item mode="inline">
             <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
-            <theme-switch />
+            <theme-switch>
+            </theme-switch>
+            <a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;"
+                        :checked="themeSwitcher.isUltra"
+                        @click="themeSwitcher.toggleUltra()">
+                        Ultra
+            </a-checkbox>
         </a-menu-item>
     </a-menu>
     <a-menu :theme="themeSwitcher.currentTheme" mode="inline" :selected-keys="['{{ .request_uri }}']"
diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
index 9ca080d9..2301da94 100644
--- a/web/html/xui/component/themeSwitch.html
+++ b/web/html/xui/component/themeSwitch.html
@@ -10,32 +10,48 @@
 <script>
   function createThemeSwitcher() {
     const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
+    const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
+    if (isUltra) {
+      document.documentElement.setAttribute('data-theme', 'ultra-dark');
+    }
     const theme = isDarkTheme ? 'dark' : 'light';
-    document.querySelector('body').setAttribute('class', theme)
+    document.querySelector('body').setAttribute('class', theme);
     return {
       isDarkTheme,
+      isUltra,
       get currentTheme() {
         return this.isDarkTheme ? 'dark' : 'light';
       },
       toggleTheme() {
         this.isDarkTheme = !this.isDarkTheme;
         localStorage.setItem('dark-mode', this.isDarkTheme);
-        document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light')
+        document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
         document.getElementById('message').className = themeSwitcher.currentTheme;
       },
+      toggleUltra() {
+        this.isUltra = !this.isUltra;
+        if (this.isUltra) {
+          document.documentElement.setAttribute('data-theme', 'ultra-dark');
+        } else {
+          document.documentElement.removeAttribute('data-theme');
+        }
+        localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
+      }
     };
   }
-
   const themeSwitcher = createThemeSwitcher();
-
   Vue.component('theme-switch', {
     props: [],
     template: `{{template "component/themeSwitchTemplate"}}`,
-    data: () => ({ themeSwitcher }),
+    data: () => ({
+      themeSwitcher
+    }),
     mounted() {
-      this.$message.config({getContainer: () => document.getElementById('message')});
+      this.$message.config({
+        getContainer: () => document.getElementById('message')
+      });
       document.getElementById('message').className = themeSwitcher.currentTheme;
     }
   });
 </script>
-{{end}}
\ No newline at end of file
+{{end}}
diff --git a/web/html/xui/index.html b/web/html/xui/index.html
index 90c45b85..fe867214 100644
--- a/web/html/xui/index.html
+++ b/web/html/xui/index.html
@@ -10,23 +10,11 @@
             margin-inline: 0.3rem;
         }
     }
-
     .ant-col-sm-24 {
         margin-top: 10px;
     }
-
     .ant-card-dark h2 {
-        color: hsla(0, 0%, 100%, .65);
-    }
-
-    .dark .ant-card-hoverable:hover,
-    .dark .ant-space-item > .ant-tabs:hover {
-        transform: scale(0.987);
-        outline-color: #40434d;
-    }
-
-    .dark .ant-card-bordered {
-        outline: 2px solid var(--dark-color-background);
+        color: var(--dark-color-text-primary);
     }
 </style>
 
@@ -104,8 +92,8 @@
                     <a-col :sm="24" :lg="12">
                         <a-card hoverable>
                             <b>{{ i18n "pages.index.operationHours" }}:</b>
-                            <a-tag color="green">Xray [[ formatSecond(status.appStats.uptime) ]]</a-tag>
-                            <a-tag color="green">OS [[ formatSecond(status.uptime) ]]</a-tag>
+                            <a-tag :color="status.xray.color">Xray: [[ formatSecond(status.appStats.uptime) ]]</a-tag>
+                            <a-tag color="green">OS: [[ formatSecond(status.uptime) ]]</a-tag>
                         </a-card>
                     </a-col>
                     <a-col :sm="24" :lg="12">
@@ -153,10 +141,10 @@
                         <a-card hoverable>
                             <b>{{ i18n "usage"}}:</b>
                             <a-tag color="green">
-                            RAM [[ sizeFormat(status.appStats.mem) ]]
+                                RAM: [[ sizeFormat(status.appStats.mem) ]]
                             </a-tag>
                             <a-tag color="green">
-                                Threads [[ status.appStats.threads ]]
+                                Threads: [[ status.appStats.threads ]]
                             </a-tag>
                         </a-card>
                     </a-col>
diff --git a/web/html/xui/xray.html b/web/html/xui/xray.html
index 5afa77c8..35f5cad7 100644
--- a/web/html/xui/xray.html
+++ b/web/html/xui/xray.html
@@ -74,8 +74,8 @@
                 </transition>
                 <a-space direction="vertical">
                     <a-card hoverable style="margin-bottom: .5rem;">
-                        <a-row>
-                            <a-col :xs="24" :sm="8" style="padding: 4px;">
+                        <a-row style="display: flex; flex-wrap: wrap; align-items: center;">
+                            <a-col :xs="24" :sm="10" style="padding: 4px;">
                                 <a-space direction="horizontal">
                                     <a-button type="primary" :disabled="saveBtnDisable" @click="updateXraySetting">{{ i18n "pages.xray.save" }}</a-button>
                                     <a-button type="danger" :disabled="!saveBtnDisable" @click="restartXray">{{ i18n "pages.xray.restart" }}</a-button>
@@ -89,7 +89,7 @@
                                     </a-popover>
                                 </a-space>
                             </a-col>
-                            <a-col :xs="24" :sm="16">
+                            <a-col :xs="24" :sm="14">
                                 <template>
                                     <div>
                                         <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">