3x-ui/web/html/xui/component/themeSwitch.html

{{define "component/themeSwitchTemplate"}}
<template>
  <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
            @change="themeSwitcher.toggleTheme()">
  </a-switch>
</template>
{{end}}

{{define "component/themeSwitcher"}}
<script>
  function createThemeSwitcher() {
    const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
    const theme = isDarkTheme ? 'dark' : 'light';
    document.querySelector('body').setAttribute('class', theme)
    return {
      isDarkTheme,
      get currentTheme() {
        return this.isDarkTheme ? 'dark' : 'light';
      },
      toggleTheme() {
        this.isDarkTheme = !this.isDarkTheme;
        localStorage.setItem('dark-mode', this.isDarkTheme);
        document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light')
        document.getElementById('message').className = themeSwitcher.currentTheme;
      },
    };
  }

  const themeSwitcher = createThemeSwitcher();

  Vue.component('theme-switch', {
    props: [],
    template: `{{template "component/themeSwitchTemplate"}}`,
    data: () => ({ themeSwitcher }),
    mounted() {
      this.$message.config({getContainer: () => document.getElementById('message')});
      document.getElementById('message').className = themeSwitcher.currentTheme;
    }
  });
</script>
{{end}}

{{define "component/ultraDarkTheme"}}
<script>
  const isUltraDarkThemeEnabled = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';

  document.addEventListener('DOMContentLoaded', function () {
    const uthemeToggle = document.getElementById('ultradarktheme');

    if (uthemeToggle) {
      uthemeToggle.checked = isUltraDarkThemeEnabled;

      function ultraToggleTheme() {
        if (uthemeToggle.checked) {
          document.documentElement.setAttribute('data-theme', 'ultra-dark');
          localStorage.setItem('isUltraDarkThemeEnabled', 'true');
        } else {
          document.documentElement.removeAttribute('data-theme');
          localStorage.setItem('isUltraDarkThemeEnabled', 'false');
        }
      }

      uthemeToggle.addEventListener('change', ultraToggleTheme);
      ultraToggleTheme();
    } else {
      console.error("Element with ID 'ultradarktheme' not found.");
    }
  });
</script>
{{end}}