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.

Author: brawaru

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<{

composables/cosmetics.js

@@ -0,0 +1,3 @@
+export function useCosmetics() {
+  return useNuxtApp().$cosmetics
+}

composables/cosmetics.ts

@@ -0,0 +1,3 @@
+export function useTheme() {
+  return useNuxtApp().$theme
+}

composables/theme.js

@@ -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,31 +724,28 @@ function runAnalytics() {
       .catch(() => {})
   })
 }
+
 function toggleMobileMenu() {
   isMobileMenuOpen.value = !isMobileMenuOpen.value
   if (isMobileMenuOpen.value) {
     isBrowseMenuOpen.value = false
   }
 }
+
 function toggleBrowseMenu() {
   isBrowseMenuOpen.value = !isBrowseMenuOpen.value
 
   if (isBrowseMenuOpen.value) {
     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>
 

composables/theme.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() {

layouts/default.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"

nuxt.config.ts

@@ -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">

pages/app.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