60 lines
1.5 KiB
Markdown
60 lines
1.5 KiB
Markdown
|
|
## 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
|
|
|
|
```css
|
|
[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.
|