diff options
| author | Ho3ein <ho3ein.sanaei@gmail.com> | 2023-12-10 17:42:52 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-12-10 17:42:52 +0300 |
| commit | e3f1d3c892a1af48f27fdc36f273a55f38d13b40 (patch) | |
| tree | b11d0c1ed3c15c8f6f891a5e6df8e021d5db8ab6 /web/html/xui/component/themeSwitch.html | |
| parent | 36cf7c0a8fda915b51e75958ce729fd9a61a5c90 (diff) | |
| parent | 9fbe80f87f950673058f0001b3704251fa8b9243 (diff) | |
huge changes
Diffstat (limited to 'web/html/xui/component/themeSwitch.html')
| -rw-r--r-- | web/html/xui/component/themeSwitch.html | 26 |
1 files changed, 1 insertions, 25 deletions
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' : ''; }, }; } |
