Temas

Presets de tema

Keirost incluye 9 presets visuales que cambian la identidad visual de toda la interfaz.

Presets disponibles

Preset	Descripción	Paleta
keirost-classic	Azul corporativo clásico	#0D9488 teal
midnight	Oscuro y elegante	#1E1E2E
carbon	Negro carbone con detalles grises	#2A2A2A
deep-ocean	Azul profundo marin	#0F172A
forest	Verde bosque natural	#14532D
plum	Ciruela moderna	#581C87
nebula	Violeta nebuloso	#312E81
sunset	Naranja atardecer	#78350F
custom	Personalizado por la empresa	configurable

---

Cambiar tema

Desde la UI

El selector de tema esta en Ajustes > Apariencia. Al cambiar, la interfaz se actualiza instantaneamente (sin recargar).

Desde API

PATCH /api/config/branding
Authorization: Bearer <token>
Content-Type: application/json

{
  "theme": "deep-ocean",
  "dark_mode": "system"
}

---

Modo oscuro

Keirost soporta tres modos de oscuridad:

Modo	Comportamiento
light	Siempre modo claro
dark	Siempre modo oscuro
system	Sigue la preferencia del sistema operativo

El modo oscuro puede combinarse con cualquier preset de tema.

CSS variables del modo oscuro

Todas las variables CSS tienen su equivalente dark: prefixed:

/* Claro */
--color-ink-900: #0F172A;
--color-surface: #FFFFFF;
--color-line: #E2E8F0;

/* Oscuro (override automatico) */
.dark --color-ink-900: #F8FAFC;
.dark --color-surface: #0F172A;
.dark --color-line: #1E293B;

---

Personalización por empresa

Cada tenant puede personalizar su identidad visual:

PATCH /api/config/branding

{
  "company_logo_url": "/storage/branding/logo.png",
  "favicon_url": "/storage/branding/favicon.ico",
  "accent_color": "#0D9488",
  "css_variables": {
    "--color-accent": "#0D9488",
    "--color-accent-hover": "#0F766E",
    "--font-heading": "Inter",
    "--font-body": "Inter"
  }
}

Variables personalizables

Variable	Descripción
--color-accent	Color principal de marca
--color-accent-hover	Color al hacer hover
--color-accent-soft	Color suave para fondos
--font-heading	Tipografía de títulos
--font-body	Tipografía del cuerpo
--border-radius	Redondez de bordes
--shadow-level	Intensidad de sombras

---

Estructura de archivos de tema

themes/
  keirost-classic/
    theme.json         # Definicion de variables
    index.css          # Estilos base
  midnight/
    theme.json
    index.css
  ...

theme.json

{
  "name": "Midnight",
  "mode": "dark",
  "variables": {
    "color-surface": "#1E1E2E",
    "color-accent": "#818CF8",
    "color-text": "#E2E8F0"
  }
}

---

Plugins y temas

Los plugins pueden aportar sus propios temas:

{
  "id": "mi-tema-porporal",
  "manifest_version": "1",
  "name": "Mi Tema Corporativo",
  "version": "1.0.0",
  "ui": {
    "themes": [
      {
        "id": "mi-tema",
        "name": "Mi Tema",
        "variables": {
          "color-accent": "#2563EB",
          "color-surface": "#EFF6FF"
        }
      }
    ]
  }
}

El tema del plugin aparece automáticamente en el selector de temas.

---

Resumen de endpoints

Método	Ruta	Descripción
GET	/api/config/branding	Ver branding actual
PATCH	/api/config/branding	Actualizar branding
GET	/api/config/themes	Listar temas disponibles
POST	/api/config/themes/preview	Previsualizar tema antes de aplicar