Rewrite cosmetics and theme preferences (#1328)

- Cosmetics and theme preferences are now only stored in cookies instead
  of a combination of both cookies and state.

- The theme plugin now supports client hints. This allows the server
  to render a page using the client-preferred theme provided it supplies
  this information (any browser other than Firefox), helping to avoid an
  annoying flash while the page is hydrating.

- For the future, the theme plugin now supports additional light themes.
  Light theme preferences are currently not stored, but this can easily
  be fixed if the need arises.

- The previous workaround using the Nitro plugin has been removed. Its
  functionality is now handled by the Nuxt theme plugin with cleaner
  code.

- All pages and components now use the new plugins.

- Compared to the previous attempt, this commit has been improved to be
  more robust in cases where the theme cookie contains invalid values.

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>

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

@@ -0,0 +1,38 @@
+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");
+}