diff --git a/components/ui/charts/ChartDisplay.vue b/components/ui/charts/ChartDisplay.vue
index 84c24f3ab5..2067002745 100644
--- a/components/ui/charts/ChartDisplay.vue
+++ b/components/ui/charts/ChartDisplay.vue
@@ -160,7 +160,7 @@
                     <div
                       :style="{
                         '--color-brand': isUsingProjectColors
-                          ? intToRgba(project.color, project.id, theme ?? undefined)
+                          ? intToRgba(project.color, project.id, $theme.active ?? undefined)
                           : getDefaultColor(project.id),
                       }"
                       class="legend__item__color"
@@ -309,7 +309,8 @@ import { UiChartsCompactChart as CompactChart, UiChartsChart as Chart } from '#c
 import PaletteIcon from '~/assets/icons/palette.svg?component'
 
 const router = useNativeRouter()
-const theme = useTheme()
+
+const $theme = useTheme()
 
 const props = withDefaults(
   defineProps<{
diff --git a/composables/cosmetics.js b/composables/cosmetics.js
deleted file mode 100644
index f6ad02e31f..0000000000
--- a/composables/cosmetics.js
+++ /dev/null
@@ -1,52 +0,0 @@
-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/composables/cosmetics.ts b/composables/cosmetics.ts
new file mode 100644
index 0000000000..554ee96610
--- /dev/null
+++ b/composables/cosmetics.ts
@@ -0,0 +1,3 @@
+export function useCosmetics() {
+  return useNuxtApp().$cosmetics
+}
diff --git a/composables/theme.js b/composables/theme.js
deleted file mode 100644
index eac074cb7b..0000000000
--- a/composables/theme.js
+++ /dev/null
@@ -1,58 +0,0 @@
-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 (process.client) {
-    document.documentElement.className = `${theme.value.value}-mode`
-  }
-
-  themeCookie.value = theme.value
-}
-
-export const DARK_THEMES = ['dark', 'oled', 'retro']
diff --git a/composables/theme.ts b/composables/theme.ts
new file mode 100644
index 0000000000..d303b25857
--- /dev/null
+++ b/composables/theme.ts
@@ -0,0 +1,3 @@
+export function useTheme() {
+  return useNuxtApp().$theme
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 4a7532a188..a20dedc836 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -62,7 +62,7 @@
                 :title="formatMessage(messages.changeTheme)"
                 @click="changeTheme"
               >
-                <MoonIcon v-if="$colorMode.value === 'light'" aria-hidden="true" />
+                <MoonIcon v-if="$theme.active === '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="$colorMode.value === 'light'" class="icon" />
+              <MoonIcon v-if="$theme.active === '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="$colorMode.value === 'light'" aria-hidden="true" />
+          <MoonIcon v-if="$theme.active === 'light'" aria-hidden="true" />
           <SunIcon v-else aria-hidden="true" />
           {{ formatMessage(messages.changeTheme) }}
         </button>
@@ -449,7 +449,6 @@ 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()
 
@@ -725,12 +724,14 @@ function runAnalytics() {
       .catch(() => {})
   })
 }
+
 function toggleMobileMenu() {
   isMobileMenuOpen.value = !isMobileMenuOpen.value
   if (isMobileMenuOpen.value) {
     isBrowseMenuOpen.value = false
   }
 }
+
 function toggleBrowseMenu() {
   isBrowseMenuOpen.value = !isBrowseMenuOpen.value
 
@@ -738,18 +739,13 @@ function toggleBrowseMenu() {
     isMobileMenuOpen.value = false
   }
 }
-function changeTheme() {
-  updateTheme(
-    DARK_THEMES.includes(app.$colorMode.value)
-      ? 'light'
-      : cosmetics.value.preferredDarkTheme ?? 'dark',
-    true
-  )
-}
+
+const $theme = useTheme()
+
+const changeTheme = () => $theme.cycle()
 
 function hideStagingBanner() {
   cosmetics.value.hideStagingBanner = true
-  saveCosmetics()
 }
 </script>
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c18ecbd14a..ee12592de8 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -370,6 +370,15 @@ export default defineNuxtConfig({
   devtools: {
     enabled: true,
   },
+  routeRules: {
+    '/**': {
+      headers: {
+        'Accept-CH': 'Sec-CH-Prefers-Color-Scheme',
+        Vary: 'Sec-CH-Prefers-Color-Scheme',
+        'Critical-CH': 'Sec-CH-Prefers-Color-Scheme',
+      },
+    },
+  },
 })
 
 function getApiUrl() {
diff --git a/pages/app.vue b/pages/app.vue
index 62d07491e4..2d57a15698 100644
--- a/pages/app.vue
+++ b/pages/app.vue
@@ -896,7 +896,7 @@ useSeoMeta({
     </div>
     <div class="logo-banner">
       <svg
-        v-if="$colorMode.value === 'light'"
+        v-if="$theme.active === 'light'"
         viewBox="0 0 865 512"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/pages/auth/reset-password.vue b/pages/auth/reset-password.vue
index d93fb17c2c..beced5944e 100644
--- a/pages/auth/reset-password.vue
+++ b/pages/auth/reset-password.vue
@@ -26,7 +26,7 @@
           ref="turnstile"
           v-model="token"
           class="turnstile"
-          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+          :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
         />
 
         <button class="btn btn-primary centered-btn" :disabled="!token" @click="recovery">
diff --git a/pages/auth/sign-in.vue b/pages/auth/sign-in.vue
index f03d0e9cb7..64a459941d 100644
--- a/pages/auth/sign-in.vue
+++ b/pages/auth/sign-in.vue
@@ -85,7 +85,7 @@
           ref="turnstile"
           v-model="token"
           class="turnstile"
-          :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+          :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
         />
 
         <button
diff --git a/pages/auth/sign-up.vue b/pages/auth/sign-up.vue
index 621d3123e4..04e709de2c 100644
--- a/pages/auth/sign-up.vue
+++ b/pages/auth/sign-up.vue
@@ -110,7 +110,7 @@
         ref="turnstile"
         v-model="token"
         class="turnstile"
-        :options="{ theme: $colorMode.value === 'light' ? 'light' : 'dark' }"
+        :options="{ theme: $theme.active === 'light' ? 'light' : 'dark' }"
       />
 
       <button
diff --git a/pages/collection/[id].vue b/pages/collection/[id].vue
index ad8a826509..f0a316cc04 100644
--- a/pages/collection/[id].vue
+++ b/pages/collection/[id].vue
@@ -492,7 +492,6 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode.collection,
     tags.value.projectViewModes
   )
-  saveCosmetics()
 }
 
 let collection, refreshCollection, creator, projects, refreshProjects
diff --git a/pages/index.vue b/pages/index.vue
index c6f4e1aebb..1fa9e85f07 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -199,7 +199,7 @@
           <div class="blob-demonstration gradient-border">
             <div class="launcher-view">
               <img
-                v-if="$colorMode.value === 'light'"
+                v-if="$theme.active === '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="$colorMode.value === 'light'"
+        v-if="$theme.active === 'light'"
         viewBox="0 0 865 512"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/pages/search/[searchProjectType].vue b/pages/search/[searchProjectType].vue
index edd13e0c2c..72b096473d 100644
--- a/pages/search/[searchProjectType].vue
+++ b/pages/search/[searchProjectType].vue
@@ -761,7 +761,6 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode[projectType.value.id],
     tags.value.projectViewModes
   )
-  saveCosmetics()
   setClosestMaxResults()
 }
 
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index 98468413c6..d202003c09 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -21,10 +21,10 @@
           v-for="option in themeOptions"
           :key="option"
           class="preview-radio button-base"
-          :class="{ selected: theme.preference === option }"
+          :class="{ selected: $theme.preferred === option }"
           @click="() => updateColorTheme(option)"
         >
-          <div class="preview" :class="`${option === 'system' ? systemTheme : option}-mode`">
+          <div class="preview" :class="`${option === 'system' ? $nativeTheme : option}-mode`">
             <div class="example-card card card">
               <div class="example-icon"></div>
               <div class="example-text-1"></div>
@@ -32,7 +32,7 @@
             </div>
           </div>
           <div class="label">
-            <RadioButtonChecked v-if="theme.preference === option" class="radio" />
+            <RadioButtonChecked v-if="$theme.preferred === option" class="radio" />
             <RadioButtonIcon v-else class="radio" />
             {{ colorTheme[option] ? formatMessage(colorTheme[option]) : option }}
             <SunIcon
@@ -153,7 +153,6 @@
           v-model="cosmetics.advancedRendering"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -170,7 +169,6 @@
           v-model="cosmetics.externalLinksNewTab"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -187,7 +185,6 @@
           v-model="cosmetics.hideModrinthAppPromos"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -204,7 +201,6 @@
           v-model="cosmetics.searchLayout"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
       <div class="adjacent-input small">
@@ -221,18 +217,18 @@
           v-model="cosmetics.projectLayout"
           class="switch stylized-toggle"
           type="checkbox"
-          @change="saveCosmetics"
         />
       </div>
     </section>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { CodeIcon, Button, RadioButtonIcon, RadioButtonChecked, SunIcon, MoonIcon } from 'omorphia'
 import { formatProjectType } from '~/plugins/shorthands.js'
 import MessageBanner from '~/components/ui/MessageBanner.vue'
-import { DARK_THEMES } from '~/composables/theme.js'
+import { DarkThemes, type Theme } from '~/plugins/theme.ts'
+import type { DisplayLocation } from '~/plugins/cosmetics.ts'
 
 useHead({
   title: 'Display settings - Modrinth',
@@ -329,6 +325,10 @@ 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({
@@ -389,45 +389,34 @@ const cosmetics = useCosmetics()
 const flags = useFeatureFlags()
 const tags = useTags()
 
-const systemTheme = ref('light')
+const $theme = useTheme()
 
-const theme = useTheme()
+// On server the value of native theme is always 'unknown', so we need to wait
+// for mount before we can actually use the native theme.
+const $mounted = ref(false)
 
-const themeOptions = computed(() => {
-  const options = ['system', 'light', 'dark', 'oled']
-  if (flags.value.developerMode || theme.value.preference === 'retro') {
-    options.push('retro')
-  }
-  return options
-})
+const $nativeTheme = computed(() => {
+  if (import.meta.server && $theme.native !== 'unknown') return $theme.native
 
-onMounted(() => {
-  updateSystemTheme()
-  window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (event) => {
-    setSystemTheme(event.matches)
-  })
+  return $mounted.value ? $theme.native : $theme.active
 })
 
-function updateSystemTheme() {
-  const query = window.matchMedia('(prefers-color-scheme: light)')
-  setSystemTheme(query.matches)
-}
+onMounted(() => ($mounted.value = true))
 
-function setSystemTheme(light) {
-  if (light) {
-    systemTheme.value = 'light'
-  } else {
-    systemTheme.value = cosmetics.value.preferredDarkTheme ?? 'dark'
+const themeOptions = computed(() => {
+  const options: Theme[] = ['system', 'light', 'dark', 'oled']
+  if (flags.value.developerMode || $theme.preferred === 'retro') {
+    options.push('retro')
   }
-}
+  return options
+})
 
-function updateColorTheme(value) {
-  if (DARK_THEMES.includes(value)) {
+function updateColorTheme(value: Theme) {
+  if (DarkThemes.includes(value)) {
     cosmetics.value.preferredDarkTheme = value
-    saveCosmetics()
-    updateSystemTheme()
   }
-  updateTheme(value, true)
+
+  $theme.preferred = value
 }
 
 function disableDeveloperMode() {
@@ -441,10 +430,16 @@ function disableDeveloperMode() {
   })
 }
 
-const listTypes = computed(() => {
+const listTypes = computed<
+  {
+    id: DisplayLocation
+    name: string
+    display: string
+  }[]
+>(() => {
   const types = tags.value.projectTypes.map((type) => {
     return {
-      id: type.id,
+      id: type.id as DisplayLocation,
       name: formatProjectType(type.id) + 's',
       display: 'the ' + formatProjectType(type.id).toLowerCase() + 's search page',
     }
diff --git a/pages/user/[id].vue b/pages/user/[id].vue
index 4777437916..00bf4e3466 100644
--- a/pages/user/[id].vue
+++ b/pages/user/[id].vue
@@ -488,7 +488,6 @@ function cycleSearchDisplayMode() {
     cosmetics.value.searchDisplayMode.user,
     tags.value.projectViewModes
   )
-  saveCosmetics()
 }
 </script>
 <script>
diff --git a/plugins/1.theme.js b/plugins/1.theme.js
deleted file mode 100644
index 4ec6cb10d4..0000000000
--- a/plugins/1.theme.js
+++ /dev/null
@@ -1,27 +0,0 @@
-export default defineNuxtPlugin(async (nuxtApp) => {
-  await useAuth()
-  await useUser()
-  const themeStore = useTheme()
-  const cosmetics = useCosmetics()
-
-  nuxtApp.hook('app:mounted', () => {
-    if (process.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/plugins/cosmetics.ts b/plugins/cosmetics.ts
new file mode 100644
index 0000000000..8876a9d60c
--- /dev/null
+++ b/plugins/cosmetics.ts
@@ -0,0 +1,57 @@
+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/plugins/theme.ts b/plugins/theme.ts
new file mode 100644
index 0000000000..b2d95e2247
--- /dev/null
+++ b/plugins/theme.ts
@@ -0,0 +1,130 @@
+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/server/plugins/theme.js b/server/plugins/theme.js
deleted file mode 100644
index f26b13b441..0000000000
--- a/server/plugins/theme.js
+++ /dev/null
@@ -1,38 +0,0 @@
-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/utils/analytics.js b/utils/analytics.js
index 4c00974770..6634e0bb66 100644
--- a/utils/analytics.js
+++ b/utils/analytics.js
@@ -150,7 +150,7 @@ export const analyticsSetToCSVString = (analytics) => {
   return [header, ...data].join(newline)
 }
 
-export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName) => {
+export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName, theme) => {
   if (!category || !projects) {
     return emptyAnalytics
   }
@@ -217,7 +217,6 @@ 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.value)
@@ -280,10 +279,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) =>
-  processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, 'Downloads')
-const processRevAnalytics = (c, projects) =>
-  processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, 'Revenue')
+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 useFetchAnalytics = (
   url,
@@ -326,10 +325,12 @@ export const useFetchAllAnalytics = (
     viewsByCountry: processCountryAnalytics(viewsByCountry.value, selectedProjects.value),
   }))
 
+  const $theme = useTheme()
+
   const totalData = computed(() => ({
-    downloads: processNumberAnalytics(downloadData.value, projects.value),
-    views: processNumberAnalytics(viewData.value, projects.value),
-    revenue: processRevAnalytics(revenueData.value, projects.value),
+    downloads: processNumberAnalytics(downloadData.value, projects.value, $theme.active),
+    views: processNumberAnalytics(viewData.value, projects.value, $theme.active),
+    revenue: processRevAnalytics(revenueData.value, projects.value, $theme.active),
   }))
 
   const fetchData = async (query) => {