diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index c5c8605..6301f16 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -47,6 +47,7 @@ Les fichiers YAML sont dans `site/pages/`, organisés en sous-dossiers par secti - Défaut : **été** (premier visiteur) - Persisté en `localStorage('palette')` pour les visites suivantes - CSS : variables `--color-primary`, `--color-accent`, etc. + classe `.palette-light`/`.palette-dark` +- Mécanique DOM (injection des variables, classes `mood-*`/`palette-*`, `color-scheme`, persistance) déléguée à `useMood` du layer `../yvv-nuxt-base` (`extends` dans `nuxt.config.ts`) — les couleurs restent définies ici. ⚠️ le layer est hors du repo : build Docker/CI cassera tant que la stratégie de distribution n'est pas tranchée (voir README du layer) - Overrides light mode dans `main.css` (`.palette-light .text-white` → couleur adaptive) - Admin : tous les `color: white` dans les composants admin sont remplacés par `hsl(var(--color-text))` sauf les boutons sur fond `hsl(var(--color-primary))` (`AdminSaveButton`, `.login-btn`) diff --git a/app/stores/palette.ts b/app/stores/palette.ts index 6570f36..a185f16 100644 --- a/app/stores/palette.ts +++ b/app/stores/palette.ts @@ -75,36 +75,44 @@ const palettes: Record = { }, } -export const usePaletteStore = defineStore('palette', () => { - const currentPalette = ref( - (import.meta.client && localStorage.getItem('palette') as PaletteName) || 'ete', - ) +// Chaque palette devient un "mood" du layer @yvv/nuxt-base : les couleurs +// (identité du projet) sont injectées en variables CSS --color-*, et les classes +// .palette-light / .palette-dark + color-scheme sont gérées par le mécanisme partagé. +const paletteMoods = (Object.entries(palettes) as [PaletteName, PaletteColors][]).map( + ([id, c]) => ({ + id, + isDark: !c.isLight, + vars: { + '--color-primary': c.primary, + '--color-accent': c.accent, + '--color-surface': c.surface, + '--color-bg': c.bg, + '--color-surface-light': c.surfaceLight, + '--color-text': c.text, + '--color-text-muted': c.textMuted, + }, + }), +) +export const usePaletteStore = defineStore('palette', () => { + // Application DOM + persistance + light/dark déléguées au layer partagé. + // storageKey 'palette' conservé pour ne pas perdre les préférences existantes. + const { currentMood, setMood, initMood } = useMood(paletteMoods, { + storageKey: 'palette', + defaultId: 'ete', + syncColorMode: false, // librodrome n'utilise pas @nuxtjs/color-mode + lightDarkClasses: true, + }) + + const currentPalette = computed(() => (currentMood.value as PaletteName) || 'ete') const colors = computed(() => palettes[currentPalette.value]) const isLight = computed(() => colors.value.isLight) - function applyToDOM() { - if (!import.meta.client) return - const c = colors.value - const root = document.documentElement - const s = root.style - s.setProperty('--color-primary', c.primary) - s.setProperty('--color-accent', c.accent) - s.setProperty('--color-surface', c.surface) - s.setProperty('--color-bg', c.bg) - s.setProperty('--color-surface-light', c.surfaceLight) - s.setProperty('--color-text', c.text) - s.setProperty('--color-text-muted', c.textMuted) - // Toggle light/dark class for CSS overrides - root.classList.toggle('palette-light', c.isLight) - root.classList.toggle('palette-dark', !c.isLight) - s.setProperty('color-scheme', c.isLight ? 'light' : 'dark') - } + // Init depuis localStorage (SSR-safe : no-op côté serveur). + const applyToDOM = () => initMood() function setPalette(name: PaletteName) { - currentPalette.value = name - if (import.meta.client) localStorage.setItem('palette', name) - applyToDOM() + setMood(name) } return { diff --git a/nuxt.config.ts b/nuxt.config.ts index 243f771..01ad843 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -1,5 +1,6 @@ // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ + extends: ['../yvv-nuxt-base'], compatibilityDate: '2025-07-15', devtools: { enabled: true },