Mercado de temasGuía de creación

🎨 Guía de creación de temas

Aprende el esquema JSON de temas de ForcedSkin y las reglas de los campos de paleta: diseña paletas para cualquier sitio y envíalas a la comunidad.

Inicio rápido

Elige un modo

Decide si el tema se ejecuta en light (paletas claras) o dark (paletas oscuras).

Completa los colores

Sigue la especificación de campos que aparece abajo — como mínimo, tu JSON debe incluir todas las claves obligatorias.

Enviar para revisión

En la página de Temas haz clic en «Enviar tema». Los administradores lo aprueban antes de que sea visible para todos.

Campos de color

Todas las entradas de la paleta deben ser cadenas hex (#RRGGBB) o valores CSS rgba(...).

backgroundObligatorio

Fondo principal de la página — los temas claros se acercan al blanco, los oscuros a neutros profundos. CSS var: --color-background

Ejemplo: #F8FFF8 / #101410

foregroundObligatorio

Texto principal — contraste legible frente al fondo. CSS var: --color-foreground

Ejemplo: #2C3E2C / #E0E0E0

surfaceObligatorio

Relleno de tarjetas/paneles/contenedores — ligeramente elevado respecto al fondo. CSS var: --color-surface

Ejemplo: #F0FFF0 / #1E221E

surfaceMutedOpcional

Hovers atenuados y subcontenedores escalonados desde surface. CSS var: --color-surface-muted

Ejemplo: #F5FDF5 / #161816

borderObligatorio

Líneas finas y divisores — normalmente grises de baja saturación o tonos semitransparentes. CSS var: --color-border

Ejemplo: #D8E8D8 / #333633

mutedObligatorio

Texto secundario y placeholders. CSS var: --color-muted

Ejemplo: #6C7E6C / #A0A0A0

primaryObligatorio

Rampa de marca principal para botones/enlaces/focus — puede ser un color único o una rampa (50–950). Requiere al menos los tonos 500/600/700. Se mapea a variables CSS --color-primary- más tokens de tono (50–950)

Ejemplo: { "500": "#4CAF50", "600": "#43A047", "700": "#388E3C" }

secondaryOpcional

Rampas de acento secundarias para chips/botones ghost — la estructura coincide con primary; se mapea a --color-secondary- más tokens de tono

Ejemplo: { "500": "#AAA", ... }

accentOpcional

Destacados, badges y colores de foco — la estructura coincide con primary; se mapea a --color-accent- más tokens de tono

Ejemplo: { "500": "#FFEB3B", ... }

varsOpcional

Propiedades CSS personalizadas arbitrarias — las claves omiten «--»; los valores se aplican tal cual en :root

Ejemplo: { "custom-radius": "8px" }

Rampas de color

Las claves JSON primary, secondary y accent aceptan cualquiera de los dos estilos de creación siguientes:

Compacta (tres tonos principales)

{
  "primary": {
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C"
  }
}

El motor promueve el tono 500 como matiz predeterminado; 600/700 cubren los estados hover/active.

Rampa completa (50 → 950, once paradas)

{
  "primary": {
    "50":  "#E8F5E9",
    "100": "#C8E6C9",
    ...
    "500": "#4CAF50",
    ...
    "950": "#0F3D12"
  }
}

Publicar la rampa completa produce transiciones tonales más suaves en todas partes.

Consejo: Los IDs de tono siguen rampas al estilo Tailwind: 50 es el más claro, 950 el más oscuro. Los temas claros usan sobre todo 500/600/700; los oscuros suelen apoyarse en 400/500/600.

Ejemplos completos

🌿 Ejemplo claro (light-mint)

{
  "background": "#F8FFF8",
  "foreground": "#2C3E2C",
  "surface": "#F0FFF0",
  "surfaceMuted": "#F5FDF5",
  "border": "#D8E8D8",
  "muted": "#6C7E6C",
  "primary": {
    "50": "#E8F5E9",
    "100": "#C8E6C9",
    "200": "#A5D6A7",
    "300": "#81C784",
    "400": "#66BB6A",
    "500": "#4CAF50",
    "600": "#43A047",
    "700": "#388E3C",
    "800": "#2E7D32",
    "900": "#1B5E20",
    "950": "#0F3D12"
  },
  "secondary": {
    "500": "#AAAAAA",
    "600": "#999999",
    "700": "#777777"
  },
  "accent": {
    "500": "#FFEB3B",
    "600": "#FDD835",
    "700": "#FBC02D"
  }
}

🌑 Ejemplo oscuro (dark-forest)

{
  "background": "#101410",
  "foreground": "#E0E0E0",
  "surface": "#1E221E",
  "surfaceMuted": "#161816",
  "border": "#333633",
  "muted": "#A0A0A0",
  "primary": {
    "500": "#4A9B6B",
    "600": "#3F855C",
    "700": "#346F4D"
  }
}

Variables personalizadas (vars)

Si los tokens predeterminados no bastan, añade CSS vars extra bajo un nodo vars — omite el prefijo -- en cada clave.

{
  "background": "#101010",
  "foreground": "#E0E0E0",
  ...
  "vars": {
    "radius-card": "16px",
    "shadow-card": "0 2px 12px rgba(0,0,0,0.4)"
  }
}

Reglas de slug (name)

Solo letras ASCII en minúsculas, dígitos y guion ( a-z 0-9 - ).
Prefiere pares concisos «modo-estilo» como «dark-ocean» o «light-sakura».
Los slugs deben ser únicos a nivel global — no pueden cambiarse tras publicarse, así que revísalos antes.
Longitud máxima de 50 caracteres.

Envío y revisión

🔐 Inicia sesión antes de enviar.

⏳ Los envíos entran en cola de revisión; el equipo suele responder en 1-3 días laborables.

✅ Los temas aprobados aparecen en el mercado para que todos los marquen como favoritos.

❌ Colores inválidos, nombres en conflicto o incumplimientos de política serán rechazados — elimina y envía una versión corregida.

🚫 Sin código malicioso, contenido de odio ni paletas obviamente infractoras.

¿Listo? Ve al mercado de temas y publica tu paleta.

🎨 Enviar un tema