portfolio_nuxt/composables/useTheme.ts

import { ref, onMounted, watch } from 'vue';

const THEME_KEY = 'theme';
const THEMES = {
  LIGHT: 'light',
  DARK: 'dark'
} as const;

export const useTheme = () => {
  const isDark = ref(false);

  const setTheme = (theme: typeof THEMES[keyof typeof THEMES]) => {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem(THEME_KEY, theme);
    isDark.value = theme === THEMES.DARK;
  };

  const toggleTheme = () => {
    setTheme(isDark.value ? THEMES.LIGHT : THEMES.DARK);
  };

  onMounted(() => {
    const savedTheme = localStorage.getItem(THEME_KEY) as typeof THEMES[keyof typeof THEMES] | null;
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (savedTheme) {
      setTheme(savedTheme);
    } else {
      setTheme(prefersDark ? THEMES.DARK : THEMES.LIGHT);
    }
  });

  watch(() => window.matchMedia('(prefers-color-scheme: dark)').matches, (isDarkMode) => {
    if (!localStorage.getItem(THEME_KEY)) {
      setTheme(isDarkMode ? THEMES.DARK : THEMES.LIGHT);
    }
  });

  return {
    isDark,
    toggleTheme
  };
};