AstralRinth/apps/frontend/src/plugins/theme/native-theme.ts

export type SystemTheme = "unknown" | "light" | "dark";

function useNativeThemeServer() {
  let clientHint;

  switch (useRequestHeader("Sec-CH-Prefers-Color-Scheme")) {
    case "light":
      clientHint = "light";
      break;
    case "dark":
      clientHint = "dark";
      break;
    default:
      clientHint = "unknown";
  }

  return computed(() => clientHint as SystemTheme);
}

function useNativeThemeClient() {
  const lightPreference = window.matchMedia("(prefers-color-scheme: light)");

  const isLight = ref(lightPreference.matches);

  const onPreferenceChange = ({ matches }: MediaQueryListEvent) => (isLight.value = matches);

  lightPreference.addEventListener("change", onPreferenceChange);

  onScopeDispose(() => lightPreference.removeEventListener("change", onPreferenceChange));

  return computed<SystemTheme>(() => (isLight.value ? "light" : "dark"));
}

export function useNativeTheme() {
  if (import.meta.server) return useNativeThemeServer();
  if (import.meta.client) return useNativeThemeClient();
  throw new Error("Cannot determine the side");
}