Revert "Rewrite cosmetics and theme preferences (#1292)"

This reverts commit 8704d3acb3.

apps/frontend/src/composables/theme.js

@@ -0,0 +1,58 @@
+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"];