Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2025-09-09 19:56:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Update themeSwitch.html

Browse source
This commit is contained in:
Tara Rostami 2024-02-28 06:57:26 +03:30 committed by GitHub
parent ceb0d36116
commit 2ce71049f0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 36 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
web/html/xui/component/themeSwitch.html
View file

@ -1,65 +1,58 @@
{{define "component/themeSwitchTemplate"}} {{define "component/themeSwitchTemplate"}}
<template> <template>
<a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys=""> <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
<a-menu-item mode="inline"> @change="themeSwitcher.toggleTheme()">
<a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon> </a-switch>
<a-switch size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()">
</a-switch>
<a-checkbox v-if="themeSwitcher.isDarkTheme" style="padding-left: 1rem; vertical-align: middle;"
:checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()">
Ultra
</a-checkbox>
</a-menu-item>
</a-menu>
</template> </template>
{{end}} {{end}}
{{define "component/themeSwitcher"}} {{define "component/themeSwitcher"}}
<script> <script>
function createThemeSwitcher() { function createThemeSwitcher() {
const isDarkTheme = localStorage.getItem('dark-mode') === 'true'; const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true'; const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
if (isUltra) {
document.documentElement.setAttribute('data-theme', 'ultra-dark');
}
const theme = isDarkTheme ? 'dark' : 'light'; const theme = isDarkTheme ? 'dark' : 'light';
if (isUltra) {
document.documentElement.setAttribute('data-theme', 'ultra-dark');
}
document.querySelector('body').setAttribute('class', theme); document.querySelector('body').setAttribute('class', theme);
return { return {
isDarkTheme, isDarkTheme,
isUltra, isUltra,
get currentTheme() { get currentTheme() {
return this.isDarkTheme ? 'dark' : 'light'; return this.isDarkTheme ? 'dark' : 'light';
}, },
toggleTheme() { toggleTheme() {
this.isDarkTheme = !this.isDarkTheme; this.isDarkTheme = !this.isDarkTheme;
localStorage.setItem('dark-mode', this.isDarkTheme); localStorage.setItem('dark-mode', this.isDarkTheme);
document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light'); document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
document.getElementById('message').className = themeSwitcher.currentTheme; document.getElementById('message').className = themeSwitcher.currentTheme;
}, },
toggleUltra() { toggleUltra() {
this.isUltra = !this.isUltra; this.isUltra = !this.isUltra;
if (this.isUltra) { if (this.isUltra) {
document.documentElement.setAttribute('data-theme', 'ultra-dark'); document.documentElement.setAttribute('data-theme', 'ultra-dark');
} else { localStorage.setItem('isUltraDarkThemeEnabled', 'true');
document.documentElement.removeAttribute('data-theme'); } else {
} document.documentElement.removeAttribute('data-theme');
localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString()); localStorage.setItem('isUltraDarkThemeEnabled', 'false');
} }
}
}; };
} }
const themeSwitcher = createThemeSwitcher();
const themeSwitcher = createThemeSwitcher();
Vue.component('theme-switch', { Vue.component('theme-switch', {
props: [], props: [],
template: `{{template "component/themeSwitchTemplate"}}`, template: `{{template "component/themeSwitchTemplate"}}`,
data: () => ({ themeSwitcher }), data: () => ({
themeSwitcher
}),
mounted() { mounted() {
this.$message.config({ getContainer: () => document.getElementById('message') }); this.$message.config({
getContainer: () => document.getElementById('message')
});
document.getElementById('message').className = themeSwitcher.currentTheme; document.getElementById('message').className = themeSwitcher.currentTheme;
} }
}); });
</script> </script>
{{end}} {{end}}