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
app/composables/useMood.ts
+24 -5
View File
@@ -29,6 +29,17 @@ export interface UseMoodOptions {
syncColorMode?: boolean
/** bascule aussi les classes .palette-light / .palette-dark (style librodrome) (défaut: false) */
lightDarkClasses?: boolean
/**
* Classe unique à basculer sur <html> selon mood.isDark (ex. 'dark' pour
* les variants dark: d'UnoCSS/Tailwind — style GrateWizard). Défaut: aucune.
*/
darkClass?: string
}
export interface SetMoodOptions {
/** écrit le choix en localStorage (défaut: true). false = application
* éphémère (ex. thème imposé en mode embed, suivi de prefers-color-scheme) */
persist?: boolean
}
const currentMood: Ref<string> = ref('')
@@ -51,9 +62,10 @@ export function useMood(moods: MoodDef[], options: UseMoodOptions = {}) {
defaultId = moods[0]?.id ?? '',
syncColorMode = true,
lightDarkClasses = false,
darkClass,
} = options
function applyMood(moodId: string) {
function applyMood(moodId: string, { persist = true }: SetMoodOptions = {}) {
if (import.meta.server) return
const mood = moods.find(m => m.id === moodId)
if (!mood) return
@@ -71,6 +83,11 @@ export function useMood(moods: MoodDef[], options: UseMoodOptions = {}) {
}
}
// classe dark unique (compat variants dark: UnoCSS/Tailwind)
if (darkClass) {
html.classList.toggle(darkClass, mood.isDark)
}
// classes palette-light / palette-dark (compat style librodrome)
if (lightDarkClasses) {
html.classList.toggle('palette-light', !mood.isDark)
@@ -89,19 +106,21 @@ export function useMood(moods: MoodDef[], options: UseMoodOptions = {}) {
}
}
localStorage.setItem(storageKey, moodId)
if (persist) localStorage.setItem(storageKey, moodId)
currentMood.value = moodId
}
function setMood(moodId: string) {
applyMood(moodId)
function setMood(moodId: string, options: SetMoodOptions = {}) {
applyMood(moodId, options)
}
function initMood() {
if (import.meta.server) return
const saved = localStorage.getItem(storageKey)
const moodId = saved && moods.some(m => m.id === saved) ? saved : defaultId
applyMood(moodId)
// ne persiste que ce qui était déjà stocké : appliquer le défaut
// ne doit pas verrouiller un choix que l'utilisateur n'a pas fait
applyMood(moodId, { persist: saved != null })
}
return {