2f438d9d7a
- Source unique : supprime app/data/librodrome.config.yml, renomme site/ en bookplayer.config.yml - Morceaux : renommés avec slugs lisibles, fichiers audio renommés, inversion ch2↔ch3 corrigée - Chapitres : 11 fichiers .md réécrits avec le vrai contenu du livre (synthèse fidèle du PDF) - Routes : /lire → /modele-eco, /ecouter → /en-musique, redirections 301 - Admin chapitres : champs structurés (titre, description, temps lecture), compteur mots - Éditeur markdown : mode split, plein écran, support Tab, meilleur rendu aperçu - Admin morceaux : drag & drop, ajout/suppression, gestion playlist - Light mode : palettes printemps/été plus saturées et contrastées, teintes primary - Raccourcis clavier player : espace, flèches gauche/droite - Paroles : toggle supprimé, toujours visibles et scrollables - Nouvelles pages : autonomie, evenement Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
119 lines
3.6 KiB
TypeScript
119 lines
3.6 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: '20 10% 12%', // écorce
|
|
bg: '20 10% 7%', // terre sombre
|
|
surfaceLight: '20 8% 17%', // bois fumé
|
|
text: '0 0% 100%',
|
|
textMuted: '0 0% 65%',
|
|
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: '222 14% 13%', // ciel de minuit
|
|
bg: '225 16% 8%', // nuit polaire
|
|
surfaceLight: '220 12% 18%', // brume nocturne
|
|
text: '0 0% 100%',
|
|
textMuted: '210 10% 65%',
|
|
isLight: false,
|
|
label: 'Hiver',
|
|
icon: 'i-lucide-snowflake',
|
|
},
|
|
|
|
// ══════ LIGHT THEMES ══════
|
|
|
|
// Printemps : vert vif, rose cerisier punchy, lumière fraîche
|
|
printemps: {
|
|
primary: '152 65% 36%', // vert émeraude vif
|
|
accent: '340 78% 52%', // rose cerisier punchy
|
|
surface: '130 18% 90%', // rosée du matin
|
|
bg: '110 20% 94%', // clarté verte
|
|
surfaceLight: '125 14% 84%', // feuille vive
|
|
text: '155 30% 10%', // vert profond saturé
|
|
textMuted: '145 14% 38%', // mousse riche
|
|
isLight: true,
|
|
label: 'Printemps',
|
|
icon: 'i-lucide-flower-2',
|
|
},
|
|
|
|
// Été : orange solaire, turquoise pop, lumineux chaleureux
|
|
ete: {
|
|
primary: '22 92% 48%', // soleil éclatant
|
|
accent: '175 72% 38%', // turquoise pop
|
|
surface: '38 35% 88%', // sable doré
|
|
bg: '40 38% 93%', // lumière dorée chaude
|
|
surfaceLight: '35 28% 82%', // dune chaude
|
|
text: '28 35% 8%', // brun intense
|
|
textMuted: '28 16% 35%', // ombre chaude
|
|
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,
|
|
}
|
|
})
|