[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);
}
.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
),

View file

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

View file

@ -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}}

View file

@ -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>