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/preferred-theme.ts

@@ -0,0 +1,32 @@
+import { type DarkTheme, isDarkTheme } from "./themes.ts";
+
+export function usePreferredThemes() {
+  // TODO: migrate theme preferences out of cosmetics to theme settings
+  const cosmetics = useCosmetics();
+
+  const dark = computed({
+    get(): DarkTheme {
+      const theme = cosmetics.value?.preferredDarkTheme;
+
+      if (theme == null) {
+        console.warn("[theme] cosmetics.preferredDarkTheme is not defined");
+        return "dark";
+      }
+
+      if (!isDarkTheme(theme)) {
+        console.warn(`[theme] cosmetics.preferredDarkTheme contains invalid value: ${theme}`);
+        return "dark";
+      }
+
+      return theme;
+    },
+    set(value) {
+      cosmetics.value.preferredDarkTheme = value;
+    },
+  });
+
+  return reactive({
+    dark,
+    light: "light" as const,
+  });
+}