Pular para o conteúdo
Documentação

Theme Studio

Edite qualquer uma das ~190 variáveis CSS que dirigem o look do NoSqlStudio — color, surface, divider, typography, spacing, radius. Salve como theme nomeado. Aplique per session ou como default. Audit de contraste WCAG AAA roda continuamente.

O que é

Uma tab de workspace com 8 categorias de tokens (color, surface, divider, accent, status, typography, spacing, radius). Cada token edita a variável CSS correspondente ao vivo — sem rebuild, sem restart do app. Salve o set atual como um theme nomeado; troque de themes em View → Change Theme.

Quando usar

Customize quando você passa longas sessões no app e quer um look pessoal (Cobalto blue / Solarized / Monochrome dark / etc.) ou quando branding corporativo demanda consistência de cor em screenshots em evidência de compliance. O audit de contraste garante que regressão de acessibilidade não consiga landar.

Como abrir

  1. No app desktop do NoSqlStudio, abra o menu View → Change Theme → Theme Studio, ou pressione Ctrl+Alt+T.
  2. Uma tab de workspace abre com 8 tabs de categoria no topo, um painel de preview ao vivo no centro, e o audit WCAG à direita.
  3. Escolha uma categoria, tweak tokens com um color picker / input numérico / dropdown. Mudanças aplicam ao vivo em todo o app.

Trabalhando com ele

  • Categoria Color — surface, surfaceRaised, accent, divider, fg, fgMuted, fgInverse. Cada token mostra hex + RGB + o swatch renderizado.
  • Audit WCAG AAA — roda em toda mudança. Lista cada par foreground/background com sua razão de contraste e flag AAA / AA / fail. Pares flaggados como fail são destacados em vermelho.
  • Save / load themes — nomeie seu set, salve em disco sob userData/Themes/, exporte como JSON para compartilhar com um teammate, importe o JSON dele de volta. O theme default incluído é o Cobalto.
  • Janela frameless — Theme Studio também controla o estilo da title bar (frameless / OS native). Útil para consistência de screenshot.

Limitações (v1)

  • Granularidade de token é fixa em ~190 vars. Adicionar uma nova variável CSS requer mudança de código — Theme Studio não pode definir novas variáveis, só editar existentes.
  • Algumas surfaces legacy (ex.: widgets Leafygreen mais antigos) ignoram o sistema de tokens e usam cores de palette hardcoded. ESLint bloqueia novas regressões mas as surfaces históricas permanecem.
  • Arquivos JSON de theme são local-first; sincronize via seu file sync (Dropbox / git) para compartilhar entre workstations.