Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/MHSanaei/3x-ui.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'web/html/xui/component')
-rw-r--r--web/html/xui/component/password.html4
-rw-r--r--web/html/xui/component/themeSwitch.html26
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' : '';
},
};
}