Ir al contenido
Documentación

Theme Studio

Edite cualquiera de las ~190 variables CSS que dirigen el look del NoSqlStudio — color, surface, divider, typography, spacing, radius. Guarde como theme nombrado. Aplique per session o como default. Audit de contraste WCAG AAA corre continuamente.

Qué es

Un tab de workspace con 8 categorías de tokens (color, surface, divider, accent, status, typography, spacing, radius). Cada token edita la variable CSS correspondiente en vivo — sin rebuild, sin restart del app. Guarde el set actual como un theme nombrado; cambie de themes en View → Change Theme.

Cuándo usar

Personalice cuando pasa largas sesiones en el app y quiere un look personal (Cobalto blue / Solarized / Monochrome dark / etc.) o cuando branding corporativo demanda consistencia de color en screenshots en evidencia de compliance. El audit de contraste garantiza que regresión de accesibilidad no pueda landar.

Cómo abrirlo

  1. En el app desktop del NoSqlStudio, abra el menú View → Change Theme → Theme Studio, o presione Ctrl+Alt+T.
  2. Un tab de workspace abre con 8 tabs de categoría arriba, un panel de preview en vivo en el centro, y el audit WCAG a la derecha.
  3. Elija una categoría, tweak tokens con un color picker / input numérico / dropdown. Cambios aplican en vivo en todo el app.

Trabajando con él

  • Categoría Color — surface, surfaceRaised, accent, divider, fg, fgMuted, fgInverse. Cada token muestra hex + RGB + el swatch renderizado.
  • Audit WCAG AAA — corre en cada cambio. Lista cada par foreground/background con su ratio de contraste y flag AAA / AA / fail. Pares flaggados como fail son destacados en rojo.
  • Save / load themes — nombre su set, guarde a disco bajo userData/Themes/, exporte como JSON para compartir con un teammate, importe su JSON de vuelta. El theme default incluido es Cobalto.
  • Ventana frameless — Theme Studio también controla el estilo de la title bar (frameless / OS native). Útil para consistencia de screenshot.

Limitaciones (v1)

  • Granularidad de token es fija en ~190 vars. Agregar una nueva variable CSS requiere cambio de código — Theme Studio no puede definir nuevas variables, solo editar existentes.
  • Algunas surfaces legacy (ej.: widgets Leafygreen más antiguos) ignoran el sistema de tokens y usan colores de palette hardcoded. ESLint bloquea nuevas regresiones pero las surfaces históricas permanecen.
  • Archivos JSON de theme son local-first; sincronice vía su file sync (Dropbox / git) para compartir entre workstations.