yvv/yvv-nuxt-base
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(useMood): options darkClass et persist pour le pattern dark/light

Browse Source 
- darkClass: bascule une classe unique sur <html> selon isDark
  (variants dark: UnoCSS/Tailwind — besoin GrateWizard)
- setMood(id, { persist: false }): application éphémère (embed, prefers-color-scheme)
- initMood ne persiste plus le défaut, seulement un choix déjà stocké
- README: section GrateWizard + avertissement distribution (extends relatif
  hors repo = build Docker/CI cassé, à trancher avant merge)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-07-18 09:51:42 +02:00
co-authored by Claude Fable 5
parent a9ec5c49e4
commit b1c6a2f280
2 changed files with 47 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+23 -3
View File
@@ -9,7 +9,12 @@ Fournit le **mécanisme** commun, jamais les couleurs (chaque projet garde son i
Supporte les 2 patterns existants sans réécrire le CSS d'un projet :
- **classes `.mood-<id>`** + variables `--mood-*` définies en CSS (style libreDecision) ;
- **variables CSS injectées en JS** via `MoodDef.vars` (style librodrome `--color-*`) ;
- option `lightDarkClasses` pour basculer aussi `.palette-light/.palette-dark`.
- option `lightDarkClasses` pour basculer aussi `.palette-light/.palette-dark` ;
- option `darkClass: 'dark'` pour basculer une classe unique selon `isDark`
(variants `dark:` UnoCSS/Tailwind — style GrateWizard) ;
- `setMood(id, { persist: false })` pour une application éphémère
(thème imposé en mode embed, suivi de `prefers-color-scheme`) ;
- `initMood()` ne persiste que si un choix était déjà stocké.
## Adoption (à faire AVEC vérif visuelle mobile + desktop — zéro régression)
@@ -40,8 +45,23 @@ export const useLibreMood = () => useMood(moods, { storageKey: 'libredecision_mo
### librodrome (via l'option vars — le CSS `--color-*` reste inchangé)
Convertir `stores/palette.ts` pour déléguer l'application DOM à `useMood`, en passant les triplets HSL dans `vars` (`--color-primary`, etc.) et `lightDarkClasses: true`. Le store peut rester pour l'API publique, mais l'application au DOM passe par le mécanisme partagé. Vérifier les 4 saisons + light/dark.
### GrateWizard / SejeteralO
Adopter après les deux premiers, même principe. SejeteralO (pas d'UnoCSS, vue-router 5) en dernier, prudemment.
### GrateWizard (dark/light seulement, contraintes embed)
Deux moods `light`/`dark` avec `darkClass: 'dark'` (variants UnoCSS) et
`syncColorMode: false`. `useDarkMode` reste l'API publique et garde sa logique
de décision : thème imposé par `?theme=` en embed (`setMood(id, { persist: false })`
— ne jamais écraser la préférence standalone, même origine), migration du
stockage legacy `'true'/'false'` → `'dark'/'light'`, suivi de
`prefers-color-scheme` tant qu'aucun choix explicite n'est stocké.
Vérifier : toggle + persistance standalone, embed `?theme=light` non persisté, sceau.
### SejeteralO
Adopter en dernier (pas d'UnoCSS, vue-router 5), prudemment.
## ⚠️ Distribution — à régler AVANT tout merge/push des adoptions
Les `extends` relatifs (`../yvv-nuxt-base`) pointent HORS des repos consommateurs :
les builds Docker (`COPY . .`) et la CI échoueront. Options à trancher :
repo distant + dépendance git, `git subtree` vendoré par projet, ou contexte
Docker élargi. En dev local, rien à faire.
## Principe