Rewrite cosmetics and theme preferences

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/collection/[id].vue

@@ -492,7 +492,6 @@ function cycleSearchDisplayMode() {
  cosmetics.value.searchDisplayMode.collection,
  tags.value.projectViewModes
  )
- saveCosmetics()
 }
 
 let collection, refreshCollection, creator, projects, refreshProjects

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"

pages/search/[searchProjectType].vue

@@ -761,7 +761,6 @@ function cycleSearchDisplayMode() {
  cosmetics.value.searchDisplayMode[projectType.value.id],
  tags.value.projectViewModes
  )
- saveCosmetics()
  setClosestMaxResults()
 }