Un Estudio de Temas completo para restilizar la app web en todos los roles. Ver 2.4 para la versión explicada paso a paso; esta entrada es la lista de referencia plana.

1. Temas predefinidos

Ocho estilos ya listos, usables tal cual o como punto de partida para personalizar.

  • Clásico (predeterminado) — marca azul marino, esquinas medias, tarjetas planas.
  • Laguna — teal calmado sobre neutros cálidos.
  • Metro — bordes totalmente cuadrados, inspirado en Windows 10.
  • Material — Google Material 3, morado tonal, botones tipo píldora.
  • Cupertino — el estilo de Apple, azul iOS, fondos grises agrupados.
  • Sakura — rosa flor de cerezo sobre tonos papel suaves.
  • Editorial — estilo revista, tipografía serif, papel crema, tinta borgoña.
  • Medianoche — modo oscuro completo, estados de foco luminosos.

2. Colores

  • Apariencia — Clara u Oscura; Oscura reajusta cada gris, blanco y color de estado de la app.
  • Color de marca — usado en botones primarios, enlaces, estados activos y anillos de foco.
  • Bordes — Sutil o Marcado.
  • Grises neutros — una familia de grises seleccionable que reajusta todo el texto, bordes y fondos en gris.
  • Colores de estado — Peligro, Éxito, Advertencia, Información, además de Superficie y Texto.

3. Tipografía

  • Tipografía de cuerpo y tipografía de encabezados — tipos de letra seleccionables de forma independiente.
  • Tamaño de texto — Más pequeño / Pequeño / Predeterminado / Grande / Más grande, en toda la app.

4. Forma y espaciado

  • Radio de esquina global — cada esquina redondeada de la app escala a partir de este único valor.
  • Espaciado global — un porcentaje que escala cada margen, relleno y separación.

5. Botones

  • Altura por tamaño (Extra pequeño / Pequeño / Mediano / Grande), relleno horizontal y estilo de esquina.
  • Relleno primario (Degradado/Sólido) y sombra primaria (Plana/Sutil/Elevada/Dura/Brillo).
  • Botones secundarios opcionales con color, estilo secundario (Sólido/Suave/Contorno), grosor del texto y mayúsculas.

6. Campos de formulario

  • Altura del campo, estilo de esquina, e interruptor de resalte al enfocar (borde y brillo en color de marca en el campo activo).

7. Tablas

  • Estilo del encabezado (Gris claro / Tinte de marca / Marca sólida / Blanco) y altura del encabezado.
  • Relleno de filas y celdas, tamaño de texto, estilo de esquina, filas rayadas, divisores de columna y borde exterior.

8. Tarjetas, diálogos y chips

  • Sombra de tarjeta y sombra de diálogo, de forma independiente (Ninguna/Sutil/Suave/Elevada/Flotante/Dura/Brillo), además del grosor del borde de la tarjeta.
  • Estilo de esquina del diálogo, oscuridad del fondo, estilo de esquina del chip (p. ej. Píldora), y grosor del indicador de pestaña.

9. Efectos

Una pestaña aparte, más experimental; el propio producto advierte que estos "pueden ralentizar la app y hacer que vaya con tirones en algunos dispositivos", así que úsalos con moderación.

  • Color de acento (segundo color para brillos/neón) y color de encabezado (color de texto o color de acento).
  • Patrón de página — Ninguno / Cuadrícula / Synthwave / Aurora.
  • Interruptores: Texto luminoso, Contornos luminosos, Botones de neón, Encabezados con "glitch", Esquinas cortadas, Líneas de escaneo CRT.
  • Intensidad del brillo — Normal o Máxima.

10. Diseño

  • Barra lateral — Color de marca / Oscura / Clara / Color personalizado, además del ancho de la barra lateral.
  • Barra superior — Coincidir con la barra lateral o Blanca (una barra lateral clara siempre fuerza una barra superior blanca).
  • Color de fondo de página.

Nada es visible para los demás hasta que se hace clic en Guardar tema, momento en el que se aplica a todos los roles del instituto a la vez. Hay una opción de Restablecer valores predeterminados disponible en el menú "…" junto a Guardar.