diff options
Diffstat (limited to 'web/html/xui/component')
| -rw-r--r-- | web/html/xui/component/password.html | 4 | ||||
| -rw-r--r-- | web/html/xui/component/themeSwitch.html | 26 |
2 files changed, 3 insertions, 27 deletions
diff --git a/web/html/xui/component/password.html b/web/html/xui/component/password.html index ebea3be6..13dbfb51 100644 --- a/web/html/xui/component/password.html +++ b/web/html/xui/component/password.html @@ -4,12 +4,12 @@ :placeholder="placeholder" @input="$emit('input', $event.target.value)"> <template v-if="icon" #prefix> - <a-icon :type="icon" :style="'font-size: 16px;' + themeSwitcher.textStyle" /> + <a-icon :type="icon" style="font-size: 16px;" /> </template> <template #addonAfter> <a-icon :type="showPassword ? 'eye-invisible' : 'eye'" @click="toggleShowPassword" - :style="'font-size: 16px;' + themeSwitcher.textStyle" /> + style="font-size: 16px;" /> </template> </a-input> </template> diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html index 7cbedecf..4d5412e2 100644 --- a/web/html/xui/component/themeSwitch.html +++ b/web/html/xui/component/themeSwitch.html @@ -1,8 +1,6 @@ {{define "component/themeSwitchTemplate"}} <template> - <a-switch :default-checked="themeSwitcher.isDarkTheme" - checked-children="☀" - un-checked-children="🌙" + <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"> </a-switch> </template> @@ -10,39 +8,17 @@ {{define "component/themeSwitcher"}} <script> - const colors = { - dark: { - bg: "#242c3a", - text: "hsla(0,0%,100%,.65)" - }, - light: { - bg: '#f0f2f5', - text: "rgba(0, 0, 0, 0.7)", - } - } - function createThemeSwitcher() { const isDarkTheme = localStorage.getItem('dark-mode') === 'true'; const theme = isDarkTheme ? 'dark' : 'light'; return { isDarkTheme, - bgStyle: `background: ${colors[theme].bg};`, - textStyle: `color: ${colors[theme].text};`, - darkClass: isDarkTheme ? 'ant-dark' : '', - darkCardClass: isDarkTheme ? 'ant-card-dark' : '', - darkDrawerClass: isDarkTheme ? 'ant-drawer-dark' : '', get currentTheme() { return this.isDarkTheme ? 'dark' : 'light'; }, toggleTheme() { this.isDarkTheme = !this.isDarkTheme; - this.theme = this.isDarkTheme ? 'dark' : 'light'; localStorage.setItem('dark-mode', this.isDarkTheme); - this.bgStyle = `background: ${colors[this.theme].bg};`; - this.textStyle = `color: ${colors[this.theme].text};`; - this.darkClass = this.isDarkTheme ? 'ant-dark' : ''; - this.darkCardClass = this.isDarkTheme ? 'ant-card-dark' : ''; - this.darkDrawerClass = this.isDarkTheme ? 'ant-drawer-dark' : ''; }, }; } |
