Primeros pasos con temas

Un tema define la apariencia del sitio: colores, tipografías, espaciados y estilos de componentes. Crono trae varios temas listos (Compacto, Compacto Azul, Compacto Rojo, entre otros) y permite crear los tuyos partiendo de uno existente.

Dónde viven los temas

Los temas están en src/Crono.Web/Temas/. Cualquier carpeta que contenga un archivo tema.config se reconoce como un tema:

src/Crono.Web/Temas/
├── Compacto/          (tema base predeterminado)
│   ├── tema.config
│   ├── Views/
│   │   ├── _ViewImports.cshtml
│   │   └── _ViewStart.cshtml
│   └── wwwroot/
│       ├── tema.scss           (archivo Sass raíz)
│       ├── tema-rtl.scss
│       ├── _variables.scss
│       ├── _variables-personalizados.scss
│       ├── _botones.scss, _menu.scss, _login.scss, ...  (parciales)
├── CompactoAzul/      (hereda de Compacto)
├── CompactoRojo/
└── ...

El manifiesto tema.config

Cada tema se describe con un tema.config (XML) en su raíz. La forma mínima:

<?xml version="1.0" encoding="utf-8"?>
<Tema titulo="Compacto" descripcion="'Compacto' tema predeterminado" autor="Crono" version="1.0">
  <Vars>
    <!-- variables del tema -->
  </Vars>
</Tema>

Atributos del elemento raíz <Tema>:

Atributo	Descripción
titulo	Nombre visible del tema.
descripcion	Descripción corta.
autor	Autor del tema.
version	Versión del tema.
temaBase	(Opcional) Nombre del tema padre del que hereda (ver Herencia de temas).

Crear un tema nuevo

La vía más rápida es heredar de uno existente y solo redefinir lo que cambia:

1. Crea una carpeta bajo Temas/, por ejemplo MiTema/.
2. Añade un tema.config con temaBase="Compacto" y los atributos del tema.
3. Redefine en <Vars> únicamente las variables que quieras cambiar (colores de marca, fondos, etc.).
4. Si necesitas más que variables, añade parciales SCSS o vistas en tu carpeta que sobrescriban los del tema base.

El tema Compacto Azul, por ejemplo, es un tema hijo que solo trae un tema.config cambiando unos cuantos colores; todo lo demás lo hereda de Compacto.

Activar un tema

Los temas se seleccionan y configuran desde el backend, en la sección de temas de configuración: allí se elige el tema activo y se ajustan sus variables sin tocar el código fuente. Los valores que se cambian en esa pantalla se guardan en la base de datos y tienen prioridad sobre los valores por defecto del tema.config (ver Configuración de tema).

info

Los estilos SCSS se compilan en tiempo de ejecución con un caché en proceso y en disco. Tras editar el SCSS de un tema hay que reiniciar la aplicación para verlo (no hay recarga en caliente; ver Solución de problemas).