novelasvm/docs/THEMES.md

Temas disponibles

El portal incluye tres temas visuales:

1. Oscuro moderno (data-theme="dark")
2. Claro minimalista (data-theme="light")
3. Atmosferico inmersivo (data-theme="immersive")

Tokens CSS

Los tokens se definen en var-www/assets/styles.css bajo los selectores [data-theme="..."].

Tokens comunes

Token	Uso
--bg-primary	Fondo principal
--bg-surface	Fondo de tarjetas y navbar
--bg-elevated	Superficies elevadas
--text-primary	Texto principal
--text-secondary	Texto secundario
--text-muted	Texto atenuado
--accent	Color de acento
--accent-hover	Acento en hover
--border	Bordes
--shadow-*	Sombras
--engine-*	Colores de badges de motor

Ejemplo: tema oscuro

[data-theme="dark"] {
    --bg-primary: #0a0a0a;
    --bg-surface: #141414;
    --bg-elevated: #1f1f1f;
    --text-primary: #f5f5f5;
    --text-secondary: #a0a0a0;
    --accent: #4e85bf;
    --border: #2a2a2a;
}

Tipografia

• Sans: Inter, system-ui
• Mono: JetBrains Mono

Transiciones

Los cambios de tema animan background-color, color y border-color durante 300ms.

Anadir un tema nuevo

1. Copia el bloque de un tema existente en styles.css.
2. Cambia el selector a [data-theme="nuevo"].
3. Define nuevos valores para todos los tokens.
4. Anade un boton en index.html con data-theme-value="nuevo".
5. Verifica contraste WCAG AA.