From dcaf16f506dae00d6fbf28efc8bbc14a95fae638 Mon Sep 17 00:00:00 2001
From: Sasha Sorokin <10401817+brawaru@users.noreply.github.com>
Date: Sun, 16 Jun 2024 22:20:09 +0200
Subject: [PATCH] Rewrite cosmetics and theme preferences

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

- Theme preference now supports client hints. This means the server can
  render the page in correct theme for the client if the client passes
  that information (any browser other than Firefox), which avoids
  annoying flash.

- Hacky Nitro plugin for theme has been removed. It's functionality
  should be fully provided by the theme plugin with much cleaner code
  that uses Nuxt's built-ins.

- All pages and components should be updated to use the new plugins.
---
 components/ui/charts/ChartDisplay.vue |   5 +-
 composables/cosmetics.js              |  52 -----------
 composables/cosmetics.ts              |   3 +
 composables/theme.js                  |  58 ------------
 composables/theme.ts                  |   3 +
 layouts/default.vue                   |  22 ++---
 nuxt.config.ts                        |   9 ++
 pages/app.vue                         |   2 +-
 pages/auth/reset-password.vue         |   2 +-
 pages/auth/sign-in.vue                |   2 +-
 pages/auth/sign-up.vue                |   2 +-
 pages/collection/[id].vue             |   1 -
 pages/index.vue                       |   4 +-
 pages/search/[searchProjectType].vue  |   1 -
 pages/settings/index.vue              |  78 ++++++++--------
 pages/user/[id].vue                   |   1 -
 plugins/1.theme.js                    |  27 ------
 plugins/cosmetics.ts                  |  57 +++++++++++
 plugins/theme.ts                      | 130 ++++++++++++++++++++++++++
 server/plugins/theme.js               |  38 --------
 utils/analytics.js                    |  19 ++--
 21 files changed, 267 insertions(+), 249 deletions(-)
 delete mode 100644 composables/cosmetics.js
 create mode 100644 composables/cosmetics.ts
 delete mode 100644 composables/theme.js
 create mode 100644 composables/theme.ts
 delete mode 100644 plugins/1.theme.js
 create mode 100644 plugins/cosmetics.ts
 create mode 100644 plugins/theme.ts
 delete mode 100644 server/plugins/theme.js

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..265179ded4 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,35 @@ const cosmetics = useCosmetics()
 const flags = useFeatureFlags()
 const tags = useTags()
 
-const systemTheme = ref('light')
+const $theme = useTheme()
 
-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 $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 +431,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) => {