web-map/src/services/theme.service.ts

import { theme, type TokenType as AntdTheme } from 'ant-design-vue';
import { ref, watch } from 'vue';

enum Theme {
  Light = 'light',
  Dark = 'dark',
}
export const THEMES = Object.freeze<[string, Theme][]>(Object.entries(Theme));

const THEME_STORAGE_KEY = 'theme';

class ThemeService {
  #theme = ref<Theme>(<Theme>localStorage.getItem(THEME_STORAGE_KEY) || Theme.Dark);
  public get theme(): Theme {
    return this.#theme.value;
  }
  public set theme(v: Theme) {
    this.#theme.value = v;
    localStorage.setItem(THEME_STORAGE_KEY, v);
  }

  public get ant(): AntdTheme {
    switch (this.#theme.value) {
      case Theme.Dark:
        return { algorithm: theme.darkAlgorithm };
      case Theme.Light:
      default:
        return { algorithm: theme.defaultAlgorithm };
    }
  }

  constructor() {
    watch(this.#theme, (v) => this.#load(v), { immediate: true });
  }

  #load(theme: Theme): void {
    document.documentElement.setAttribute('theme', theme);
  }
}
export default new ThemeService();