[dark] change message by theme

Co-Authored-By: Alireza Ahmadi <alireza7@gmail.com>
This commit is contained in:
MHSanaei 2024-02-21 15:32:18 +03:30
parent aebf52efb2
commit 660e5ad101
4 changed files with 23 additions and 11 deletions

View file

@ -1050,6 +1050,12 @@ li.ant-select-dropdown-menu-item:empty:after {
color: rgba(255, 255, 255, 0.25); 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( .ant-input-group.ant-input-group-compact-addon:not(:first-child):not(
:last-child :last-child
), ),

View file

@ -38,4 +38,5 @@
</style> </style>
<title>{{ .host }}-{{ i18n .title}}</title> <title>{{ .host }}-{{ i18n .title}}</title>
</head> </head>
<div id="message"></div>
{{end}} {{end}}

View file

@ -21,6 +21,7 @@
this.isDarkTheme = !this.isDarkTheme; this.isDarkTheme = !this.isDarkTheme;
localStorage.setItem('dark-mode', 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;
}, },
}; };
} }
@ -31,6 +32,10 @@
props: [], props: [],
template: `{{template "component/themeSwitchTemplate"}}`, template: `{{template "component/themeSwitchTemplate"}}`,
data: () => ({ themeSwitcher }), data: () => ({ themeSwitcher }),
mounted() {
this.$message.config({getContainer: () => document.getElementById('message')});
document.getElementById('message').className = themeSwitcher.currentTheme;
}
}); });
</script> </script>
{{end}} {{end}}

View file

@ -95,23 +95,23 @@
</a-alert> </a-alert>
</transition> </transition>
<a-space direction="vertical"> <a-space direction="vertical">
<a-card hoverable style="margin-bottom: .5rem; overflow-x: hidden;"> <a-card hoverable style="margin-bottom: .5rem;">
<a-row style="display: flex; flex-wrap: wrap; align-items: center;"> <a-row>
<a-col :xs="24" :sm="10" style="padding: 4px;"> <a-col :xs="24" :sm="8" style="padding: 4px;">
<a-space direction="horizontal"> <a-space direction="horizontal">
<a-button type="primary" :disabled="saveBtnDisable" @click="updateAllSetting">{{ i18n "pages.settings.save" }}</a-button> <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-button type="danger" :disabled="!saveBtnDisable" @click="restartPanel">{{ i18n "pages.settings.restartPanel" }}</a-button>
</a-space> </a-space>
</a-col> </a-col>
<a-col :xs="24" :sm="16"> <a-col :xs="24" :sm="16">
<template> <template>
<div> <div>
<a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200"> <a-back-top :target="() => document.getElementById('content-layout')" visibility-height="200">
</a-back-top> </a-back-top>
<a-alert type="warning" style="float: right; width: fit-content" <a-alert type="warning" style="float: right; width: fit-content"
message='{{ i18n "pages.settings.infoDesc" }}' message='{{ i18n "pages.settings.infoDesc" }}'
show-icon show-icon
> >
</div> </div>
</template> </template>
</a-col> </a-col>