From 67201fc678e51c3518097c92ab1a938100c70658 Mon Sep 17 00:00:00 2001
From: Hamidreza Ghavami <hamid.r.gh.1998@gmail.com>
Date: Mon, 8 May 2023 18:15:08 +0430
Subject: [PATCH] create theme-switch component
---
web/html/xui/component/themeSwitch.html | 58 +++++++++++++++++++++++++
1 file changed, 58 insertions(+)
create mode 100644 web/html/xui/component/themeSwitch.html
diff --git a/web/html/xui/component/themeSwitch.html b/web/html/xui/component/themeSwitch.html
new file mode 100644
index 00000000..1966d079
--- /dev/null
+++ b/web/html/xui/component/themeSwitch.html
@@ -0,0 +1,58 @@
+{{define "component/themeSwitchTemplate"}}
+<template>
+ <a-switch :default-checked="themeSwitcher.isDarkTheme"
+ checked-children="☀"
+ un-checked-children="🌙"
+ @change="themeSwitcher.toggleTheme()">
+ </a-switch>
+</template>
+{{end}}
+
+{{define "component/themeSwitcher"}}
+<script>
+ const colors = {
+ dark: {
+ bg: "#242c3a",
+ text: "hsla(0,0%,100%,.65)"
+ },
+ light: {
+ bg: '#fff',
+ 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-card-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-card-dark' : '';
+ this.darkCardClass = this.isDarkTheme ? 'ant-card-dark' : '';
+ this.darkDrawerClass = this.isDarkTheme ? 'ant-drawer-dark' : '';
+ },
+ };
+ }
+
+ const themeSwitcher = createThemeSwitcher();
+
+ Vue.component('theme-switch', {
+ props: [],
+ template: `{{template "component/themeSwitchTemplate"}}`,
+ data: () => ({ themeSwitcher }),
+ });
+</script>
+{{end}}
\ No newline at end of file