Configuración de tema

Las variables del tema son el mecanismo por el que se personaliza la apariencia sin editar SCSS: se declaran en el tema.config y se pueden ajustar desde el backend. Cada variable termina disponible como variable Sass durante la compilación, de modo que anula los valores por defecto de Bootstrap o de Crono.

Declarar variables

Dentro de <Vars>, cada <Var> tiene un nombre, un tipo y un valor:

<Vars>
  <Var nombre="primario" tipo="Color">#052a6c</Var>
  <Var nombre="primary" tipo="Color">$primario</Var>
  <Var nombre="body-bg" tipo="Color">#f5f2fd</Var>
  <Var nombre="border-radius" tipo="String">8px</Var>
  <Var nombre="font-size-base" tipo="String">14px</Var>
  <Var nombre="boxed" tipo="Boolean">false</Var>
  <Var nombre="es-menu-horizontal" tipo="Boolean">false</Var>
</Vars>

Tipos disponibles:

Tipo	Uso
Color	Un color (hex, rgba(...), nombre CSS o referencia a otra variable).
String	Cualquier valor de texto/CSS (tamaños, familias tipográficas, expresiones).
Boolean	true / false, para interruptores de layout.
Select#<id>	Un valor elegido de una lista <Select> definida en el tema.

Referencias y funciones

El valor de una variable puede referenciar otra con $nombre y usar funciones Sass, porque se resuelve durante la compilación:

<Var nombre="primary" tipo="Color">$primario</Var>
<Var nombre="warning" tipo="Color">$orange</Var>
<Var nombre="btn-secondary-bg" tipo="Color">lighten($gray-200, 2%)</Var>
<Var nombre="primary-text-emphasis" tipo="Color">shade-color($primary, 40%)</Var>
<Var nombre="gd-borde-color" tipo="Color">rgba($primary, .08)</Var>

Listas de selección

Para variables que solo admiten un conjunto de opciones, define un <Select> y refiérelo con el tipo Select#<id>:

<Vars>
  <Var nombre="shopbar-label" tipo="Select#brand-colors">warning</Var>
</Vars>

<Selects>
  <Select id="brand-colors">
    <Option>primary</Option>
    <Option>secondary</Option>
    <Option>info</Option>
    <Option>success</Option>
    <Option>warning</Option>
    <Option>danger</Option>
    <Option>light</Option>
    <Option>dark</Option>
  </Select>
</Selects>

En el backend, esa variable se muestra como un desplegable con esas opciones.

De variable de tema a variable Sass

Al compilar, los valores efectivos (los del tema.config combinados con lo que se haya ajustado en el backend) se inyectan mediante un archivo virtual que el SCSS raíz importa antes de Bootstrap:

// tema.scss
@import '/.app/temavars.scss';   // variables del tema desde la BD
@import 'variables-personalizados';
@import 'variables';
@import '/lib/bs5/scss/bootstrap-cabecera';   // Bootstrap 5 usa esas variables ya sobrescritas

Así, cambiar primary en el tema.config o en el backend repinta todos los componentes que dependan de esa variable, sin tocar una sola línea de SCSS. El detalle de cómo se estructura el SCSS está en Estilos de tema.