Theme
Initialisation
src/routes/layout.svelte
<script>
import { theme } from 'gros/theme'
theme.init()
</script>Vérifie et applique les préférences de l’utilisateur (défini dans les options du navigateur ou dans les cookies).
Switch
<script>
import { theme } from 'gros/theme'
</script>
<button onclick={() => theme.switch()} class="btn">
{#if theme.value === 'dark'}
☀️
{:else}
🌙
{/if}
</button>
Flashbang
Définir la préférence de l’utilisateur côté serveur à l’aide du cookie “siteTheme”.
src/hooks.server.ts
export const handle = async ({ event, resolve }) => {
const theme = event.cookies.get('siteTheme')
if (theme) {
return await resolve(event, {
transformPageChunk: ({ html }) => html.replace(`data-theme=""`, `data-theme="${theme}"`)
})
}
return await resolve(event)
}src/app.html
<!DOCTYPE html>
<html data-theme="">
<head>
[...]