BetaBeta pública — Consulta las notas de lanzamiento
Solidiom
Comenzar
Documentación

Exportación e Integración del Theme Builder

Después de personalizar un tema en el Theme Builder, expórtalo en el formato que coincida con el perfil de estilo de tu proyecto.

Exportación JSON

La exportación JSON produce un ThemeDefinition versionado compatible con el esquema de @solidiom/themes. Este es el formato canónico y puede consumirse de forma programática.

Uso del JSON Exportado

{
  "schemaVersion": 1,
  "meta": {
    "name": "Mi Tema",
    "slug": "mi-tema",
    "version": "1.0.0"
  },
  "modes": {
    "light": {/* tokens */},
    "dark": {/* tokens */}
  }
}

Guarda el archivo como theme.json y referencia en tu proyecto. El JSON puede reimportarse en el builder mediante una URL compartida (exporta JSON → codifica como payload compartido manualmente, o usa la función compartir del builder antes de editar).

Exportación CSS

La exportación CSS genera bloques :root con propiedades personalizadas --sol-* para ambos modos:

/* Theme: Mi Tema — mi-tema */
/* Generated by Solidiom Theme Builder */

:root,
:root[data-theme="light"] {
  --sol-surface: #ffffff;
  --sol-surface-raised: #f8fafc;
  --sol-foreground: #0f172a;
  /* ... */
}

:root[data-theme="dark"] {
  --sol-surface: #0f172a;
  --sol-surface-raised: #1e293b;
  --sol-foreground: #f8fafc;
  /* ... */
}

Pasos de Integración

  1. Importa el archivo CSS en el punto de entrada de tu proyecto
  2. Asegúrate de que tu conmutador de tema establece data-theme="dark" en :root
  3. Las recetas de Solidiom hacen referencia a variables --sol-* y usarán automáticamente tu tema

Exportación Tailwind v4

La exportación Tailwind genera un bloque @theme:

/* Theme: Mi Tema — mi-tema */
/* Generated by Solidiom Theme Builder */
@theme {
  --color-surface: var(--sol-surface, #ffffff);
  --color-foreground: var(--sol-foreground, #0f172a);
  --radius-sm: var(--sol-radius-sm, 2px);
  --shadow-md: var(--sol-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
  /* ... */
}

Pasos de Integración

  1. Añade el CSS exportado a tu punto de entrada de Tailwind
  2. Asegúrate de que Tailwind escanee el archivo (es sintaxis @theme, así que Tailwind v4 lo detecta automáticamente)
  3. Las recetas Tailwind de Solidiom usan referencias var(--sol-*) y se resolverán a tu tema

Exportación UnoCSS

La exportación UnoCSS es idéntica a la exportación CSS. Usa los mismos pasos de integración que el perfil CSS.

Tokens ref()

El builder usa la notación ref() para tokens derivados. Por ejemplo, --sol-muted-foreground: ref("foreground"). Todas las exportaciones resuelven las referencias a sus valores finales computados, así que nunca necesitas manejar ref() manualmente en tu proyecto.

De URL Compartida a Proyecto

  1. Abre la URL compartida en el Theme Builder
  2. Haz clic en Export y selecciona tu formato
  3. Copia o descarga la salida
  4. Integra usando los pasos anteriores

Migración Entre Versiones

Cuando el esquema del tema evolucione, el JSON exportado de una versión anterior puede no ser directamente compatible. El builder rechaza URLs compartidas con versiones de esquema no soportadas. Para migración programática, @solidiom/themes proporciona una cadena de migración que transforma entre versiones cuando se define.

Para la especificación técnica completa del esquema y mecanismo de migración, consulta el Theme Contract.