Loja de temasGuia de criação

🎨 Guia de criação de temas

Conheça o esquema JSON de temas do ForcedSkin e as regras dos campos de paleta — crie paletas para qualquer site e envie para a comunidade.

Início rápido

Escolha um modo

Decida se o tema será executado em light (paletas claras) ou dark (paletas escuras).

Preencha as cores

Siga a especificação de campos abaixo — no mínimo, todas as chaves obrigatórias devem estar no JSON.

Enviar para revisão

Na página Temas , clique em “Enviar tema”. Os admins aprovam antes de aparecer para todos.

Campos de cor

Todas as entradas da paleta devem ser strings hex (#RRGGBB) ou valores CSS rgba(...).

backgroundObrigatório

Fundo principal da página — temas claros tendem ao branco, temas escuros a neutros profundos. Variável CSS: --color-background

Exemplo: #F8FFF8 / #101410

foregroundObrigatório

Texto principal — contraste legível com o fundo. Variável CSS: --color-foreground

Exemplo: #2C3E2C / #E0E0E0

surfaceObrigatório

Preenchimento de cartão/painel/contêiner — um pouco acima do fundo. Variável CSS: --color-surface

Exemplo: #F0FFF0 / #1E221E

surfaceMutedOpcional

Hovers atenuados/subcontêineres um degrau abaixo de surface. Variável CSS: --color-surface-muted

Exemplo: #F5FDF5 / #161816

borderObrigatório

Filetes e divisórias — em geral cinzas de baixa saturação / tons semitransparentes. Variável CSS: --color-border

Exemplo: #D8E8D8 / #333633

mutedObrigatório

Texto secundário e placeholders. Variável CSS: --color-muted

Exemplo: #6C7E6C / #A0A0A0

primaryObrigatório

Rampa principal da marca para botões/links/foco — pode ser cor única ou rampa (50–950). Exige pelo menos os tons 500/600/700. Mapeia para as variáveis CSS --color-primary- mais tokens de tom (50–950)

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

secondaryOpcional

Rampas de destaque secundárias para chips/botões ghost — estrutura igual à primary — mapeia para --color-secondary- mais tokens de tom

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

accentOpcional

Destaques, badges e cores de ênfase — estrutura igual à primary — mapeia para --color-accent- mais tokens de tom

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

varsOpcional

Propriedades CSS personalizadas arbitrárias — as chaves omitem “--”; os valores são aplicados literalmente em :root

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

Rampas de cor

As chaves JSON primary, secondary e accent aceitam cada um dos dois estilos abaixo:

Compacto (três tons principais)

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

O motor promove o tom 500 como matiz padrão; 600/700 cobrem os estados hover/ativo.

Rampa completa (50 → 950, onze pontos)

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

Publicar a rampa completa gera transições tonais mais suaves em todos os lugares.

Dica: Os IDs de tom seguem rampas no estilo Tailwind: 50 é o mais claro, 950 o mais escuro. Temas claros usam principalmente 500/600/700; temas escuros costumam se apoiar em 400/500/600.

Exemplos completos

🌿 Exemplo 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"
  }
}

🌑 Exemplo escuro (dark-forest)

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

Variáveis personalizadas (vars)

Se os tokens padrão não forem suficientes, adicione variáveis CSS extras em um nó vars — omita o prefixo -- em cada chave.

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

Regras de slug (name)

Apenas letras ASCII minúsculas, dígitos e hífen ( a-z 0-9 - ).
Prefira pares concisos “modo-estilo”, como “dark-ocean” ou “light-sakura”.
Os slugs devem ser únicos globalmente — não podem mudar após a publicação, então confira antes.
Comprimento máximo de 50 caracteres.

Envio e revisão

🔐 Entre antes de enviar.

⏳ Os envios entram na fila de revisão — a equipe costuma responder em 1 a 3 dias úteis.

✅ Temas aprovados aparecem na loja para todos favoritarem.

❌ Cores inválidas, nomes em conflito ou violações de política serão rejeitados — exclua e envie uma versão corrigida.

🚫 Sem código malicioso, conteúdo de ódio ou paletas claramente infratoras.

Pronto? Vá à loja de temas e publique sua paleta.

🎨 Enviar um tema