Rewrite cosmetics and theme prefs

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.ts

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

composables/theme.ts

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

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

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

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"

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

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

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

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"