ac4aff4985
- Nettoyage paroles : suppression instructions Suno AI, corrections prononciation (11 fichiers) - 4 palettes saisonnières (Automne/Hiver dark, Printemps/Été light) avec sélecteur - Typographie modernisée : Outfit (display) + Inter (sans) remplacent Syne + Space Grotesk - Styles adaptatifs : CSS vars pour couleurs, overrides light mode complets - Mini-player : bouton Next ajouté, flèche expand plus visible - BookPlayer : fix scroll mode paginé, croix de fermeture visible - Illustrations Shadoks inline SVG dans 11 composants/pages - Suppression soulignés navigation, reset boutons, bordures propres Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
export type PaletteName = 'automne' | 'hiver' | 'printemps' | 'ete'
|
|
|
|
interface PaletteColors {
|
|
primary: string
|
|
accent: string
|
|
surface: string
|
|
bg: string
|
|
surfaceLight: string
|
|
text: string
|
|
textMuted: string
|
|
isLight: boolean
|
|
label: string
|
|
icon: string
|
|
}
|
|
|
|
const palettes: Record<PaletteName, PaletteColors> = {
|
|
// ══════ DARK THEMES ══════
|
|
|
|
// Automne : cuivre chaud, feuilles mortes, terre brûlée
|
|
automne: {
|
|
primary: '18 80% 45%', // cuivre profond
|
|
accent: '32 85% 50%', // ambre doré
|
|
surface: '16 12% 9%', // écorce sombre
|
|
bg: '16 12% 4%', // terre noire
|
|
surfaceLight: '16 10% 14%', // bois fumé
|
|
text: '0 0% 100%',
|
|
textMuted: '0 0% 60%',
|
|
isLight: false,
|
|
label: 'Automne',
|
|
icon: 'i-lucide-leaf',
|
|
},
|
|
|
|
// Hiver : bleu nuit, givre, argent lunaire
|
|
hiver: {
|
|
primary: '215 55% 52%', // bleu nuit étoilé
|
|
accent: '195 40% 65%', // givre argenté
|
|
surface: '220 15% 10%', // ciel de minuit
|
|
bg: '225 18% 5%', // nuit polaire
|
|
surfaceLight: '220 12% 15%', // brume nocturne
|
|
text: '0 0% 100%',
|
|
textMuted: '210 10% 60%',
|
|
isLight: false,
|
|
label: 'Hiver',
|
|
icon: 'i-lucide-snowflake',
|
|
},
|
|
|
|
// ══════ LIGHT THEMES ══════
|
|
|
|
// Printemps : vert tendre, rose cerisier, lumière fraîche
|
|
printemps: {
|
|
primary: '145 50% 38%', // vert bourgeon
|
|
accent: '340 65% 55%', // rose cerisier
|
|
surface: '120 12% 93%', // rosée du matin
|
|
bg: '100 15% 96%', // clarté verte
|
|
surfaceLight: '120 8% 87%', // feuille pâle
|
|
text: '150 15% 12%', // vert profond
|
|
textMuted: '140 8% 42%', // mousse
|
|
isLight: true,
|
|
label: 'Printemps',
|
|
icon: 'i-lucide-flower-2',
|
|
},
|
|
|
|
// Été : doré solaire, turquoise mer, lumineux chaleureux
|
|
ete: {
|
|
primary: '25 85% 52%', // soleil couchant
|
|
accent: '175 55% 42%', // turquoise marin
|
|
surface: '40 25% 92%', // sable clair
|
|
bg: '42 30% 96%', // lumière dorée
|
|
surfaceLight: '38 18% 86%', // dune
|
|
text: '30 20% 12%', // terre chaude
|
|
textMuted: '30 10% 40%', // ombre estivale
|
|
isLight: true,
|
|
label: 'Été',
|
|
icon: 'i-lucide-sun',
|
|
},
|
|
}
|
|
|
|
export const usePaletteStore = defineStore('palette', () => {
|
|
const currentPalette = ref<PaletteName>(
|
|
(import.meta.client && localStorage.getItem('palette') as PaletteName) || 'automne',
|
|
)
|
|
|
|
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')
|
|
}
|
|
|
|
function setPalette(name: PaletteName) {
|
|
currentPalette.value = name
|
|
if (import.meta.client) localStorage.setItem('palette', name)
|
|
applyToDOM()
|
|
}
|
|
|
|
return {
|
|
currentPalette,
|
|
colors,
|
|
palettes,
|
|
isLight,
|
|
setPalette,
|
|
applyToDOM,
|
|
}
|
|
})
|