From 57ba84107c24168890510e099c6b5ea0cf5f8606 Mon Sep 17 00:00:00 2001
From: Jai A <jaiagr+gpg@pm.me>
Date: Thu, 25 Jul 2024 17:38:37 -0700
Subject: [PATCH] Revert "Rewrite cosmetics and theme preferences (#1292)"

This reverts commit 8704d3acb35e8a0c5c5a53c4f5c4f5532aae749a.
---
 apps/frontend/nuxt.config.ts                  |   8 --
 .../src/components/ui/charts/ChartDisplay.vue |   2 +-
 apps/frontend/src/composables/cosmetics.js    |  52 +++++++
 .../src/composables/nuxt-accessors.ts         |   7 -
 apps/frontend/src/composables/theme.js        |  58 ++++++++
 apps/frontend/src/composables/vue.ts          |  14 --
 apps/frontend/src/layouts/default.vue         |  18 ++-
 apps/frontend/src/pages/app.vue               |   2 +-
 .../src/pages/auth/reset-password.vue         |   2 +-
 apps/frontend/src/pages/auth/sign-in.vue      |   2 +-
 apps/frontend/src/pages/auth/sign-up.vue      |   2 +-
 apps/frontend/src/pages/collection/[id].vue   |   1 +
 apps/frontend/src/pages/index.vue             |   4 +-
 .../src/pages/search/[searchProjectType].vue  |   1 +
 apps/frontend/src/pages/settings/index.vue    |  69 ++++++----
 apps/frontend/src/pages/user/[id].vue         |   1 +
 apps/frontend/src/plugins/1.theme.js          |  27 ++++
 apps/frontend/src/plugins/cosmetics.ts        |  57 --------
 apps/frontend/src/plugins/theme.ts            | 130 ------------------
 apps/frontend/src/server/plugins/theme.js     |  38 +++++
 apps/frontend/src/utils/analytics.js          |  21 ++-
 21 files changed, 248 insertions(+), 268 deletions(-)
 create mode 100644 apps/frontend/src/composables/cosmetics.js
 delete mode 100644 apps/frontend/src/composables/nuxt-accessors.ts
 create mode 100644 apps/frontend/src/composables/theme.js
 delete mode 100644 apps/frontend/src/composables/vue.ts
 create mode 100644 apps/frontend/src/plugins/1.theme.js
 delete mode 100644 apps/frontend/src/plugins/cosmetics.ts
 delete mode 100644 apps/frontend/src/plugins/theme.ts
 create mode 100644 apps/frontend/src/server/plugins/theme.js

diff --git a/apps/frontend/nuxt.config.ts b/apps/frontend/nuxt.config.ts
index 513fd5e93..e8de813c9 100644
--- a/apps/frontend/nuxt.config.ts
+++ b/apps/frontend/nuxt.config.ts
@@ -392,14 +392,6 @@ export default defineNuxtConfig({
       autoprefixer: {},
     },
   },
-  routeRules: {
-    "/**": {
-      headers: {
-        "Accept-CH": "Sec-CH-Prefers-Color-Scheme",
-        "Critical-CH": "Sec-CH-Prefers-Color-Scheme",
-      },
-    },
-  },
   compatibilityDate: "2024-07-03",
 });
 
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
index 36a603f58..852c687de 100644
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
@@ -162,7 +162,7 @@
                     <div
                       :style="{
                         '--color-brand': isUsingProjectColors
-                          ? intToRgba(project.color, project.id, theme.active ?? undefined)
+                          ? intToRgba(project.color, project.id, theme ?? undefined)
                           : getDefaultColor(project.id),
                       }"
                       class="legend__item__color"
diff --git a/apps/frontend/src/composables/cosmetics.js b/apps/frontend/src/composables/cosmetics.js
new file mode 100644
index 000000000..294c8882b
--- /dev/null
+++ b/apps/frontend/src/composables/cosmetics.js
@@ -0,0 +1,52 @@
+export const useCosmetics = () =>
+  useState("cosmetics", () => {
+    const cosmetics = useCookie("cosmetics", {
+      maxAge: 60 * 60 * 24 * 365 * 10,
+      sameSite: "lax",
+      secure: true,
+      httpOnly: false,
+      path: "/",
+    });
+
+    if (!cosmetics.value) {
+      cosmetics.value = {
+        searchLayout: false,
+        projectLayout: false,
+        advancedRendering: true,
+        externalLinksNewTab: true,
+        notUsingBlockers: false,
+        hideModrinthAppPromos: false,
+        preferredDarkTheme: "dark",
+        searchDisplayMode: {
+          mod: "list",
+          plugin: "list",
+          resourcepack: "gallery",
+          modpack: "list",
+          shader: "gallery",
+          datapack: "list",
+          user: "list",
+          collection: "list",
+        },
+        hideStagingBanner: false,
+      };
+    }
+
+    return cosmetics.value;
+  });
+
+export const saveCosmetics = () => {
+  const cosmetics = useCosmetics();
+
+  console.log("SAVING COSMETICS:");
+  console.log(cosmetics);
+
+  const cosmeticsCookie = useCookie("cosmetics", {
+    maxAge: 60 * 60 * 24 * 365 * 10,
+    sameSite: "lax",
+    secure: true,
+    httpOnly: false,
+    path: "/",
+  });
+
+  cosmeticsCookie.value = cosmetics.value;
+};
diff --git a/apps/frontend/src/composables/nuxt-accessors.ts b/apps/frontend/src/composables/nuxt-accessors.ts
deleted file mode 100644
index 5130f6268..000000000
--- a/apps/frontend/src/composables/nuxt-accessors.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export function useTheme() {
-  return useNuxtApp().$theme;
-}
-
-export function useCosmetics() {
-  return useNuxtApp().$cosmetics;
-}
diff --git a/apps/frontend/src/composables/theme.js b/apps/frontend/src/composables/theme.js
new file mode 100644
index 000000000..460ebdf1f
--- /dev/null
+++ b/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"];
diff --git a/apps/frontend/src/composables/vue.ts b/apps/frontend/src/composables/vue.ts
deleted file mode 100644
index cf49bc462..000000000
--- a/apps/frontend/src/composables/vue.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Creates a computed reference that uses a provide getter function called with an argument representing the current mount state of the component.
- * @param getter A getter function that will run with `mounted` argument representing whether or not the component is mounted.
- * @returns A computed reference that changes when component becomes mounted or unmounted.
- */
-export function useMountedValue<T>(getter: (isMounted: boolean) => T) {
-  const mounted = ref(getCurrentInstance()?.isMounted ?? false);
-
-  onMounted(() => (mounted.value = true));
-
-  onUnmounted(() => (mounted.value = false));
-
-  return computed(() => getter(mounted.value));
-}
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 863ad8b31..4be98be2a 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -62,7 +62,7 @@
                 :title="formatMessage(messages.changeTheme)"
                 @click="changeTheme"
               >
-                <MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
+                <MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
                 <SunIcon v-else aria-hidden="true" />
               </button>
               <div
@@ -242,7 +242,7 @@
               {{ formatMessage(commonMessages.settingsLabel) }}
             </NuxtLink>
             <button class="iconified-button" @click="changeTheme">
-              <MoonIcon v-if="$theme.active === 'light'" class="icon" />
+              <MoonIcon v-if="$colorMode.value === 'light'" class="icon" />
               <SunIcon v-else class="icon" />
               <span class="dropdown-item__text">
                 {{ formatMessage(messages.changeTheme) }}
@@ -403,7 +403,7 @@
           {{ formatMessage(messages.getModrinthApp) }}
         </nuxt-link>
         <button class="iconified-button raised-button" @click="changeTheme">
-          <MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
+          <MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
           <SunIcon v-else aria-hidden="true" />
           {{ formatMessage(messages.changeTheme) }}
         </button>
@@ -449,6 +449,7 @@ import ModalCreation from "~/components/ui/ModalCreation.vue";
 import Avatar from "~/components/ui/Avatar.vue";
 import { getProjectTypeMessage } from "~/utils/i18n-project-type.ts";
 import { commonMessages } from "~/utils/common-messages.ts";
+import { DARK_THEMES } from "~/composables/theme.js";
 
 const { formatMessage } = useVIntl();
 
@@ -737,11 +738,18 @@ function toggleBrowseMenu() {
     isMobileMenuOpen.value = false;
   }
 }
-
-const { cycle: changeTheme } = useTheme();
+function changeTheme() {
+  updateTheme(
+    DARK_THEMES.includes(app.$colorMode.value)
+      ? "light"
+      : cosmetics.value.preferredDarkTheme ?? "dark",
+    true,
+  );
+}
 
 function hideStagingBanner() {
   cosmetics.value.hideStagingBanner = true;
+  saveCosmetics();
 }
 </script>
 
diff --git a/apps/frontend/src/pages/app.vue b/apps/frontend/src/pages/app.vue
index fa092c6a9..8400deaf3 100644
--- a/apps/frontend/src/pages/app.vue
+++ b/apps/frontend/src/pages/app.vue
@@ -896,7 +896,7 @@ useSeoMeta({
     </div>
     <div class="logo-banner">
       <svg
-        v-if="$theme.active === 'light'"
+        v-if="$colorMode.value === 'light'"
         viewBox="0 0 865 512"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/frontend/src/pages/auth/reset-password.vue b/apps/frontend/src/pages/auth/reset-password.vue
index 074acb0fc..2f57ba8a2 100644
--- a/apps/frontend/src/pages/auth/reset-password.vue
+++ b/apps/frontend/src/pages/auth/reset-password.vue
@@ -26,7 +26,7 @@
           ref="turnstile"
           v-model="token"
           class="turnstile"
-          :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
+          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
         />
 
         <button class="btn btn-primary centered-btn" :disabled="!token" @click="recovery">
diff --git a/apps/frontend/src/pages/auth/sign-in.vue b/apps/frontend/src/pages/auth/sign-in.vue
index 0110affe2..7dc22f7b6 100644
--- a/apps/frontend/src/pages/auth/sign-in.vue
+++ b/apps/frontend/src/pages/auth/sign-in.vue
@@ -85,7 +85,7 @@
           ref="turnstile"
           v-model="token"
           class="turnstile"
-          :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
+          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
         />
 
         <button
diff --git a/apps/frontend/src/pages/auth/sign-up.vue b/apps/frontend/src/pages/auth/sign-up.vue
index e5f75da2d..91ff51bc4 100644
--- a/apps/frontend/src/pages/auth/sign-up.vue
+++ b/apps/frontend/src/pages/auth/sign-up.vue
@@ -110,7 +110,7 @@
         ref="turnstile"
         v-model="token"
         class="turnstile"
-        :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
+        :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
       />
 
       <button
diff --git a/apps/frontend/src/pages/collection/[id].vue b/apps/frontend/src/pages/collection/[id].vue
index 3486785f7..715dd1836 100644
--- a/apps/frontend/src/pages/collection/[id].vue
+++ b/apps/frontend/src/pages/collection/[id].vue
@@ -487,6 +487,7 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode.collection,
     tags.value.projectViewModes,
   );
+  saveCosmetics();
 }
 
 let collection, refreshCollection, creator, projects, refreshProjects;
diff --git a/apps/frontend/src/pages/index.vue b/apps/frontend/src/pages/index.vue
index 39ca70824..4dafb6622 100644
--- a/apps/frontend/src/pages/index.vue
+++ b/apps/frontend/src/pages/index.vue
@@ -199,7 +199,7 @@
           <div class="blob-demonstration gradient-border">
             <div class="launcher-view">
               <img
-                v-if="$theme.active === 'light'"
+                v-if="$colorMode.value === 'light'"
                 src="https://cdn.modrinth.com/landing-new/launcher-light.webp"
                 alt="launcher graphic"
                 class="minecraft-screen"
@@ -407,7 +407,7 @@
     </div>
     <div class="logo-banner">
       <svg
-        v-if="$theme.active === 'light'"
+        v-if="$colorMode.value === 'light'"
         viewBox="0 0 865 512"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index 866a09779..d816743ca 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -763,6 +763,7 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode[projectType.value.id],
     tags.value.projectViewModes,
   );
+  saveCosmetics();
   setClosestMaxResults();
 }
 
diff --git a/apps/frontend/src/pages/settings/index.vue b/apps/frontend/src/pages/settings/index.vue
index 98801a605..d7ef00b60 100644
--- a/apps/frontend/src/pages/settings/index.vue
+++ b/apps/frontend/src/pages/settings/index.vue
@@ -21,7 +21,7 @@
           v-for="option in themeOptions"
           :key="option"
           class="preview-radio button-base"
-          :class="{ selected: theme.preferred === option }"
+          :class="{ selected: theme.preference === option }"
           @click="() => updateColorTheme(option)"
         >
           <div class="preview" :class="`${option === 'system' ? systemTheme : option}-mode`">
@@ -32,7 +32,7 @@
             </div>
           </div>
           <div class="label">
-            <RadioButtonChecked v-if="theme.preferred === option" class="radio" />
+            <RadioButtonChecked v-if="theme.preference === option" class="radio" />
             <RadioButtonIcon v-else class="radio" />
             {{ colorTheme[option] ? formatMessage(colorTheme[option]) : option }}
             <SunIcon
@@ -153,6 +153,7 @@
           v-model="cosmetics.advancedRendering"
           class="switch stylized-toggle"
           type="checkbox"
+          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -169,6 +170,7 @@
           v-model="cosmetics.externalLinksNewTab"
           class="switch stylized-toggle"
           type="checkbox"
+          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -185,6 +187,7 @@
           v-model="cosmetics.hideModrinthAppPromos"
           class="switch stylized-toggle"
           type="checkbox"
+          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -201,6 +204,7 @@
           v-model="cosmetics.searchLayout"
           class="switch stylized-toggle"
           type="checkbox"
+          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -217,19 +221,19 @@
           v-model="cosmetics.projectLayout"
           class="switch stylized-toggle"
           type="checkbox"
+          @change="saveCosmetics"
         />
       </div>
     </section>
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { CodeIcon, RadioButtonIcon, RadioButtonChecked, SunIcon, MoonIcon } from "@modrinth/assets";
 import { Button } from "@modrinth/ui";
 import { formatProjectType } from "~/plugins/shorthands.js";
 import MessageBanner from "~/components/ui/MessageBanner.vue";
-import { DarkThemes, type Theme } from "~/plugins/theme.ts";
-import type { DisplayLocation } from "~/plugins/cosmetics";
+import { DARK_THEMES } from "~/composables/theme.js";
 
 useHead({
   title: "Display settings - Modrinth",
@@ -326,10 +330,6 @@ const projectListLayouts = defineMessages({
     id: "settings.display.project-list-layouts.user",
     defaultMessage: "User profile pages",
   },
-  collection: {
-    id: "settings.display.project-list.layouts.collection",
-    defaultMessage: "Collection",
-  },
 });
 
 const toggleFeatures = defineMessages({
@@ -390,32 +390,45 @@ const cosmetics = useCosmetics();
 const flags = useFeatureFlags();
 const tags = useTags();
 
-const theme = useTheme();
-
-// On the server the value of native theme can be 'unknown'. To ensure we're
-// hydrating correctly, we need to make sure we aren't using 'unknown' or
-// otherwise wait until we are mounted and supposedly hydrated at this point...
+const systemTheme = ref("light");
 
-const systemTheme = useMountedValue((mounted) => {
-  if (import.meta.server && theme.native !== "unknown") return theme.native;
-
-  return mounted ? theme.native : theme.active;
-});
+const theme = useTheme();
 
 const themeOptions = computed(() => {
-  const options: Theme[] = ["system", "light", "dark", "oled"];
-  if (flags.value.developerMode || theme.preferred === "retro") {
+  const options = ["system", "light", "dark", "oled"];
+  if (flags.value.developerMode || theme.value.preference === "retro") {
     options.push("retro");
   }
   return options;
 });
 
-function updateColorTheme(value: Theme) {
-  if (DarkThemes.includes(value)) {
-    cosmetics.value.preferredDarkTheme = value;
+onMounted(() => {
+  updateSystemTheme();
+  window.matchMedia("(prefers-color-scheme: light)").addEventListener("change", (event) => {
+    setSystemTheme(event.matches);
+  });
+});
+
+function updateSystemTheme() {
+  const query = window.matchMedia("(prefers-color-scheme: light)");
+  setSystemTheme(query.matches);
+}
+
+function setSystemTheme(light) {
+  if (light) {
+    systemTheme.value = "light";
+  } else {
+    systemTheme.value = cosmetics.value.preferredDarkTheme ?? "dark";
   }
+}
 
-  theme.preferred = value;
+function updateColorTheme(value) {
+  if (DARK_THEMES.includes(value)) {
+    cosmetics.value.preferredDarkTheme = value;
+    saveCosmetics();
+    updateSystemTheme();
+  }
+  updateTheme(value, true);
 }
 
 function disableDeveloperMode() {
@@ -432,18 +445,16 @@ function disableDeveloperMode() {
 const listTypes = computed(() => {
   const types = tags.value.projectTypes.map((type) => {
     return {
-      id: type.id as DisplayLocation,
+      id: type.id,
       name: formatProjectType(type.id) + "s",
       display: "the " + formatProjectType(type.id).toLowerCase() + "s search page",
     };
   });
-
   types.push({
-    id: "user" as DisplayLocation,
+    id: "user",
     name: "User profiles",
     display: "user pages",
   });
-
   return types;
 });
 </script>
diff --git a/apps/frontend/src/pages/user/[id].vue b/apps/frontend/src/pages/user/[id].vue
index f7dbd0107..dbd82fcba 100644
--- a/apps/frontend/src/pages/user/[id].vue
+++ b/apps/frontend/src/pages/user/[id].vue
@@ -489,6 +489,7 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode.user,
     tags.value.projectViewModes,
   );
+  saveCosmetics();
 }
 </script>
 <script>
diff --git a/apps/frontend/src/plugins/1.theme.js b/apps/frontend/src/plugins/1.theme.js
new file mode 100644
index 000000000..5f6961b5a
--- /dev/null
+++ b/apps/frontend/src/plugins/1.theme.js
@@ -0,0 +1,27 @@
+export default defineNuxtPlugin(async (nuxtApp) => {
+  await useAuth();
+  await useUser();
+  const themeStore = useTheme();
+  const cosmetics = useCosmetics();
+
+  nuxtApp.hook("app:mounted", () => {
+    if (import.meta.client && themeStore.value.preference === "system") {
+      const colorSchemeQueryList = window.matchMedia("(prefers-color-scheme: light)");
+
+      const setColorScheme = (e) => {
+        if (themeStore.value.preference === "system") {
+          if (e.matches) {
+            updateTheme("light");
+          } else {
+            updateTheme(cosmetics.value.preferredDarkTheme ?? "dark");
+          }
+        }
+      };
+
+      setColorScheme(colorSchemeQueryList);
+      colorSchemeQueryList.addEventListener("change", setColorScheme);
+    }
+  });
+
+  nuxtApp.provide("colorMode", themeStore.value);
+});
diff --git a/apps/frontend/src/plugins/cosmetics.ts b/apps/frontend/src/plugins/cosmetics.ts
deleted file mode 100644
index bea118224..000000000
--- a/apps/frontend/src/plugins/cosmetics.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Theme } from "./theme.ts";
-
-export type DisplayMode = "list" | "gallery" | "grid";
-
-export type DisplayLocation =
-  | "mod"
-  | "plugin"
-  | "resourcepack"
-  | "modpack"
-  | "shader"
-  | "datapack"
-  | "user"
-  | "collection";
-
-export interface Cosmetics {
-  searchLayout: boolean;
-  projectLayout: boolean;
-  advancedRendering: boolean;
-  externalLinksNewTab: boolean;
-  notUsingBlockers: boolean;
-  hideModrinthAppPromos: boolean;
-  preferredDarkTheme: Theme;
-  searchDisplayMode: Record<DisplayLocation, DisplayMode>;
-  hideStagingBanner: boolean;
-}
-
-export default defineNuxtPlugin(() => {
-  const cosmetics = useCookie<Cosmetics>("cosmetics", {
-    maxAge: 60 * 60 * 24 * 365 * 10,
-    sameSite: "lax",
-    secure: true,
-    httpOnly: false,
-    path: "/",
-    default: () => ({
-      searchLayout: false,
-      projectLayout: false,
-      advancedRendering: true,
-      externalLinksNewTab: true,
-      notUsingBlockers: false,
-      hideModrinthAppPromos: false,
-      preferredDarkTheme: "dark",
-      searchDisplayMode: {
-        mod: "list",
-        plugin: "list",
-        resourcepack: "gallery",
-        modpack: "list",
-        shader: "gallery",
-        datapack: "list",
-        user: "list",
-        collection: "list",
-      },
-      hideStagingBanner: false,
-    }),
-  });
-
-  return { provide: { cosmetics } };
-});
diff --git a/apps/frontend/src/plugins/theme.ts b/apps/frontend/src/plugins/theme.ts
deleted file mode 100644
index 3762526fe..000000000
--- a/apps/frontend/src/plugins/theme.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { ref, computed } from "vue";
-
-export type Theme = "system" | "light" | "dark" | "oled" | "retro";
-
-export const DarkThemes: Theme[] = ["dark", "oled", "retro"];
-
-export type SystemTheme = "unknown" | "light" | "dark";
-
-function useNativeTheme() {
-  if (import.meta.server) {
-    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);
-  }
-
-  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"));
-}
-
-interface ThemeSettings {
-  preference: Theme;
-  value: Exclude<Theme, "system">;
-}
-
-export default defineNuxtPlugin((nuxtApp) => {
-  const $nativeTheme = useNativeTheme();
-
-  const $themeSettings = useCookie<ThemeSettings>("color-mode", {
-    maxAge: 60 * 60 * 24 * 365 * 10,
-    sameSite: "lax",
-    secure: true,
-    httpOnly: false,
-    path: "/",
-    default: () => ({
-      preference: "system",
-      // if we have a client hint - use the associated theme, otherwise use dark
-      // theme, because it's worse to have a bright flash in the dark than just
-      // darkened screen in the light
-      value: $nativeTheme.value === "unknown" ? "dark" : $nativeTheme.value,
-    }),
-  });
-
-  const $preferredTheme = toRef($themeSettings.value, "preference");
-
-  const $cosmetics = useCosmetics();
-
-  const $activeTheme = toRef($themeSettings.value, "value");
-
-  useHead({ htmlAttrs: { class: () => [`${$activeTheme.value}-mode`] } });
-
-  function syncTheme() {
-    const preferredTheme = $preferredTheme.value;
-
-    if (preferredTheme === "system") {
-      const nativeTheme = $nativeTheme.value;
-
-      if (nativeTheme === "unknown" || nativeTheme === "dark") {
-        let { preferredDarkTheme } = $cosmetics.value;
-        if (preferredDarkTheme === "system") {
-          // fail safe in case the user is messing with internals
-          preferredDarkTheme = "dark";
-        }
-
-        $activeTheme.value = preferredDarkTheme;
-      } else {
-        $activeTheme.value = nativeTheme;
-      }
-
-      return;
-    }
-
-    $activeTheme.value = preferredTheme;
-  }
-
-  if (
-    import.meta.server &&
-    $preferredTheme.value === "system" &&
-    $nativeTheme.value !== "unknown"
-  ) {
-    // take advantage of the client hint
-    syncTheme();
-  }
-
-  if (import.meta.client) {
-    const $clientReady = ref(false);
-
-    nuxtApp.hook("app:suspense:resolve", () => {
-      $clientReady.value = true;
-    });
-
-    watchEffect(() => $clientReady.value && syncTheme());
-  }
-
-  function cycle() {
-    $preferredTheme.value = DarkThemes.includes($activeTheme.value)
-      ? "light"
-      : $cosmetics.value.preferredDarkTheme;
-  }
-
-  return {
-    provide: {
-      theme: reactive({
-        preferred: $preferredTheme,
-        active: $activeTheme,
-        native: $nativeTheme,
-        cycle,
-      }),
-    },
-  };
-});
diff --git a/apps/frontend/src/server/plugins/theme.js b/apps/frontend/src/server/plugins/theme.js
new file mode 100644
index 000000000..298777f4c
--- /dev/null
+++ b/apps/frontend/src/server/plugins/theme.js
@@ -0,0 +1,38 @@
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook("render:html", (html, { event }) => {
+    try {
+      const cookies = parseCookies(event);
+
+      if (cookies && cookies["color-mode"]) {
+        const theme = JSON.parse(cookies["color-mode"]);
+
+        html.htmlAttrs.push(`class="${theme.value}-mode"`);
+      } else {
+        html.htmlAttrs.push(`class="dark-mode"`);
+      }
+
+      // Reset cookie attributes to correct ones
+      if (cookies) {
+        const opts = {
+          maxAge: 60 * 60 * 24 * 365 * 10,
+          sameSite: "lax",
+          secure: true,
+          httpOnly: false,
+          path: "/",
+        };
+
+        if (cookies["auth-token"]) {
+          setCookie(event, "auth-token", cookies["auth-token"], opts);
+        }
+        if (cookies["color-mode"]) {
+          setCookie(event, "color-mode", cookies["color-mode"], opts);
+        }
+        if (cookies.cosmetics) {
+          setCookie(event, "cosmetics", cookies.cosmetics, opts);
+        }
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  });
+});
diff --git a/apps/frontend/src/utils/analytics.js b/apps/frontend/src/utils/analytics.js
index 9ee00977b..94cb01b13 100644
--- a/apps/frontend/src/utils/analytics.js
+++ b/apps/frontend/src/utils/analytics.js
@@ -152,7 +152,7 @@ export const analyticsSetToCSVString = (analytics) => {
   return [header, ...data].join(newline);
 };
 
-export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName, theme) => {
+export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName) => {
   if (!category || !projects) {
     return emptyAnalytics;
   }
@@ -219,9 +219,10 @@ export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, cha
         },
       ],
       colors: projectData.map((_, i) => {
+        const theme = useTheme();
         const project = chartData[i];
 
-        return intToRgba(project.color, project.id, theme);
+        return intToRgba(project.color, project.id, theme.value);
       }),
       defaultColors: projectData.map((_, i) => {
         const project = chartData[i];
@@ -281,10 +282,10 @@ const sortTimestamp = ([a], [b]) => a - b;
 const roundValue = ([ts, value]) => [ts, Math.round(parseFloat(value) * 100) / 100];
 
 const processCountryAnalytics = (c, projects) => processAnalyticsByCountry(c, projects, sortCount);
-const processNumberAnalytics = (c, projects, theme) =>
-  processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, "Downloads", theme);
-const processRevAnalytics = (c, projects, theme) =>
-  processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, "Revenue", theme);
+const processNumberAnalytics = (c, projects) =>
+  processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, "Downloads");
+const processRevAnalytics = (c, projects) =>
+  processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, "Revenue");
 
 const useFetchAnalytics = (
   url,
@@ -327,12 +328,10 @@ export const useFetchAllAnalytics = (
     viewsByCountry: processCountryAnalytics(viewsByCountry.value, selectedProjects.value),
   }));
 
-  const theme = useTheme();
-
   const totalData = computed(() => ({
-    downloads: processNumberAnalytics(downloadData.value, projects.value, theme.active),
-    views: processNumberAnalytics(viewData.value, projects.value, theme.active),
-    revenue: processRevAnalytics(revenueData.value, projects.value, theme.active),
+    downloads: processNumberAnalytics(downloadData.value, projects.value),
+    views: processNumberAnalytics(viewData.value, projects.value),
+    revenue: processRevAnalytics(revenueData.value, projects.value),
   }));
 
   const fetchData = async (query) => {