Rewrite cosmetics and theme preferences (#1328)

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

- The theme plugin now supports client hints. This allows the server
  to render a page using the client-preferred theme provided it supplies
  this information (any browser other than Firefox), helping to avoid an
  annoying flash while the page is hydrating.

- For the future, the theme plugin now supports additional light themes.
  Light theme preferences are currently not stored, but this can easily
  be fixed if the need arises.

- The previous workaround using the Nitro plugin has been removed. Its
  functionality is now handled by the Nuxt theme plugin with cleaner
  code.

- All pages and components now use the new plugins.

- Compared to the previous attempt, this commit has been improved to be
  more robust in cases where the theme cookie contains invalid values.

Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
This commit is contained in:
Sasha Sorokin
2024-07-31 21:42:55 +02:00
committed by GitHub
parent 984da93a7b
commit 1e0d7c7e28
25 changed files with 379 additions and 252 deletions

View File

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

View File

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

View File

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