Theming

O sistema de temas usa Tailwind CSS v3 com tokens organizados por seção. Forks sobrescrevem theme.config.ts para personalizar cores.

theme.config.ts

// app/config/theme.config.ts
export const themeColors = {
  // DEFAULT
  'default-primary': '#a3d712',
  'default-secondary': '#1a1d1e',
  'default-text-primary': '#ffffff',
  'default-text-secondary': '#a0a0a0',
  'default-success': '#22c55e',
  'default-error': '#ef4444',
  'default-warning': '#f59e0b',
  'default-info': '#3b82f6',

  // HEADER
  'header-bg': '#1a1d1e',
  'header-links': '#ffffff',
  'header-register-bg': '#a3d712',
  'header-register-text': '#1a1d1e',
  'header-login-bg': 'transparent',
  'header-login-text': '#ffffff',

  // SIDEBAR
  'sidebar-bg': '#212425',
  'sidebar-links': '#ffffff',
  'sidebar-titles': '#a0a0a0',

  // FOOTER
  'footer-bg-primary': '#1a1d1e',
  'footer-bg-secondary': '#212425',
  'footer-links': '#a0a0a0',
  'footer-titles': '#ffffff',

  // AUTH
  'auth-bg-primary': '#212425',
  'auth-bg-inputs': '#323637',
  'auth-text-inputs': '#ffffff',
  'auth-button-bg': '#a3d712',
  'auth-button-text': '#1a1d1e',
  'auth-backdrop': 'rgba(0,0,0,0.5)',
  // ...
};

Tokens por seção

Prefixo	Seção	Exemplos de classes Tailwind
default-*	Cores globais	bg-primary, text-secondary, bg-success
game-*	Cards de jogos	bg-game-overlay, text-game-title
header-*	Header	bg-header-bg, text-header-links
sidebar-*	Sidebar	bg-sidebar-bg, text-sidebar-titles
footer-*	Footer	bg-footer-bg-primary, text-footer-links
auth-*	Modais de auth	bg-auth-bg-primary, bg-auth-button-bg

tailwind.config.js

O tailwind.config.js importa as cores do theme.config.ts:

const { themeColors } = require('./app/config/theme.config.ts');

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: themeColors['default-primary'],
        // ... mapeia todos os tokens
      },
    },
  },
};

cuidado

O tailwind.config.js deve usar require() (static import). Não use await import() — o jiti (loader do Tailwind) não suporta.

Font

Montserrat (Google Fonts), definida no CSS global e no Tailwind config.

Como personalizar em um fork

1. Copie app/config/theme.config.ts para o fork
2. Altere as cores desejadas
3. Pronto — Tailwind compila automaticamente com os novos tokens