AstralRinth/apps/frontend/src/composables/theme.js

export const useTheme = () =>
  useState("theme", () => {
    const colorMode = useCookie("color-mode", {
      maxAge: 60 * 60 * 24 * 365 * 10,
      sameSite: "lax",
      secure: true,
      httpOnly: false,
      path: "/",
    });

    if (!colorMode.value) {
      colorMode.value = {
        value: "dark",
        preference: "system",
      };
    }

    if (colorMode.value.preference !== "system") {
      colorMode.value.value = colorMode.value.preference;
    }

    return colorMode.value;
  });

export const updateTheme = (value, updatePreference = false) => {
  const theme = useTheme();
  const cosmetics = useCosmetics();

  const themeCookie = useCookie("color-mode", {
    maxAge: 60 * 60 * 24 * 365 * 10,
    sameSite: "lax",
    secure: true,
    httpOnly: false,
    path: "/",
  });

  if (value === "system") {
    theme.value.preference = "system";

    const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: light)");
    if (colorSchemeQueryList.matches) {
      theme.value.value = "light";
    } else {
      theme.value.value = cosmetics.value.preferredDarkTheme;
    }
  } else {
    theme.value.value = value;
    if (updatePreference) theme.value.preference = value;
  }

  if (import.meta.client) {
    document.documentElement.className = `${theme.value.value}-mode`;
  }

  themeCookie.value = theme.value;
};

export const DARK_THEMES = ["dark", "oled", "retro"];