[dark] change message by theme

Co-Authored-By: Alireza Ahmadi <[email protected]>
MHSanaei · Feb 21, 2024 · 660e5ad · 660e5ad
1 parent aebf52e
commit 660e5ad
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 11 deletions.
diff --git a/web/assets/css/custom.css b/web/assets/css/custom.css
@@ -1050,6 +1050,12 @@ li.ant-select-dropdown-menu-item:empty:after {
     color: rgba(255, 255, 255, 0.25);
 }
 
+.dark .ant-message-notice-content {
+    background-color: #222d42;
+    border: 1px solid #2c3950; 
+    color: rgba(255, 255, 255, 0.65);
+}
+
 .ant-input-group.ant-input-group-compact-addon:not(:first-child):not(
     :last-child
   ),

diff --git a/web/html/common/head.html b/web/html/common/head.html
@@ -38,4 +38,5 @@
     </style>
     <title>{{ .host }}-{{ i18n .title}}</title>
 </head>
+<div id="message"></div>
 {{end}}
diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
@@ -21,6 +21,7 @@
         this.isDarkTheme = !this.isDarkTheme;
         localStorage.setItem('dark-mode', this.isDarkTheme);
         document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light')
+        document.getElementById('message').className = themeSwitcher.currentTheme;
       },
     };
   }
@@ -31,6 +32,10 @@
     props: [],
     template: `{{template "component/themeSwitchTemplate"}}`,
     data: () => ({ themeSwitcher }),
+    mounted() {
+      this.$message.config({getContainer: () => document.getElementById('message')});
+      document.getElementById('message').className = themeSwitcher.currentTheme;
+    }
   });
 </script>
 {{end}}
diff --git a/web/html/xui/settings.html b/web/html/xui/settings.html
@@ -95,23 +95,23 @@
                         </a-alert>
                     </transition>
                 <a-space direction="vertical">
-                    <a-card hoverable style="margin-bottom: .5rem; overflow-x: hidden;">
-                        <a-row style="display: flex; flex-wrap: wrap; align-items: center;">
-                            <a-col :xs="24" :sm="10" style="padding: 4px;">
+                    <a-card hoverable style="margin-bottom: .5rem;">
+                        <a-row>
+                            <a-col :xs="24" :sm="8" style="padding: 4px;">
                                 <a-space direction="horizontal">
                                     <a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button>
                                     <a-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
                                 </a-space>
                             </a-col>
                             <a-col :xs="24" :sm="16">
-                                        <template>
-                                            <div>
-                                                <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
-                                                </a-back-top>
-                                                <a-alert type="warning" style="float: right; width: fit-content"
-                                                message='{{ i18n "pages.settings.infoDesc" }}'
-                                                show-icon
-                                                >
+                                <template>
+                                    <div>
+                                        <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
+                                        </a-back-top>
+                                        <a-alert type="warning" style="float: right; width: fit-content"
+                                        message='{{ i18n "pages.settings.infoDesc" }}'
+                                        show-icon
+                                        >
                                     </div>
                                 </template>
                             </a-col>