Skip to main content

Estilos de tema

Los estilos de un tema se escriben en Sass (SCSS) y se compilan en tiempo de ejecución. El punto de entrada es wwwroot/tema.scss, que orquesta el orden de importación: primero funciones y variables, luego Bootstrap, luego los parciales del tema.

El archivo raíz tema.scss​

El orden importa: las variables deben quedar definidas antes de importar Bootstrap, para que Bootstrap las use. Estructura real (Crono usa Bootstrap 5):

// Funciones de Bootstrap y compartidas de Crono
@import "/lib/bs5/scss/functions";
@import '/compartido/funciones';
@import '/compartido/variables-compartido-bootstrap';

// Archivo virtual con las variables del tema desde la base de datos
@import '/.app/temavars.scss';

// Valores por defecto y anulaciones de variables del tema
@import 'variables-personalizados';
@import 'variables';

// Cabecera de Bootstrap: variables, mixins, mapas (ya usa las variables anteriores)
@import "/lib/bs5/scss/bootstrap-cabecera";
@import 'variables-reseteo';

// Tipografías
@import "fuentes";

// ... parciales del tema (_botones, _menu, _login, _prestamos, ...)

Organización en parciales​

Cada área de la interfaz vive en su propio parcial _nombre.scss y se importa desde tema.scss. En el tema Compacto, por ejemplo, hay parciales por dominio: _botones.scss, _menu.scss, _login.scss, _busqueda.scss, _clientes.scss, _prestamos.scss, _reportes.scss, _balance-general.scss, _conciliacion-bancaria.scss, entre muchos otros. Esta granularidad mantiene el CSS mantenible y facilita sobrescribir solo una parte en un tema hijo.

Variables SCSS del tema​

Además de las variables del tema.config, el tema define variables Sass propias (no ligadas a Bootstrap) en _variables.scss:

$enable-rfs: false;

$cr-rojo:  #9B0000;
$cr-rojo2: #dc3000;
$cr-verde1: #009e74;
// ...

Y las anulaciones de variables de Bootstrap se agrupan aparte (por ejemplo en _variables-reseteo.scss y _variables-personalizados.scss), de modo que quede claro qué se está sobrescribiendo del framework y qué es propio del tema.

Compilación en tiempo de ejecución​

El SCSS se compila cuando se sirve, no en el build, y el resultado se guarda en un caché en proceso y en disco. Esto permite que las variables del backend afecten el CSS sin recompilar la aplicación, pero implica que:

  • Al editar un .scss del tema hay que reiniciar la aplicación (y a veces limpiar el caché de compilación) para ver el cambio: no hay recarga en caliente.
  • En producción, un autoprefijador añade los prefijos de proveedor necesarios, así que puedes escribir CSS estándar sin prefijos.
tip

Escribe estilos nuevos en un parcial propio y añádelo al final de tema.scss, o —mejor aún para un tema hijo— sobrescribe solo el parcial concreto (ver Herencia de temas). Evita incrustar imágenes en Base64 y prefiere el sistema de medios para no penalizar la compilación ni las consultas.