Theme Studio
Edit any of ~190 CSS variables driving the NoSqlStudio look — color, surface, divider, typography, spacing, radius. Save as a named theme. Apply per session or as default. WCAG AAA contrast audit runs continuously.
What it is
A workspace tab with 8 categories of tokens (color, surface, divider, accent, status, typography, spacing, radius). Each token edits the corresponding CSS variable live — no rebuild, no app restart. Save the current set as a named theme; switch themes from View → Change Theme.
When to use
Customize when you spend long sessions in the app and want a personal look (Cobalto blue / Solarized / Monochrome dark / etc.) or when corporate branding demands consistent screenshot color in compliance evidence. The contrast audit ensures accessibility regression cannot land.
How to open
- In the NoSqlStudio desktop app, open the View menu → Change Theme → Theme Studio, or press Ctrl+Alt+T.
- A workspace tab opens with 8 category tabs at the top, a live preview pane in the center, and the WCAG audit on the right.
- Pick a category, tweak tokens with a color picker / numeric input / dropdown. Changes apply live across the whole app.
Working with it
- Color category — surface, surfaceRaised, accent, divider, fg, fgMuted, fgInverse. Each token shows hex + RGB + the rendered swatch.
- WCAG AAA audit — runs on every change. Lists each foreground/background pair with its contrast ratio and AAA / AA / fail flag. Pairs flagged as fail are highlighted in red.
- Save / load themes — name your set, save to disk under userData/Themes/, export as JSON to share with a teammate, import their JSON back. The included default theme is Cobalto.
- Frameless window — Theme Studio also controls the title bar style (frameless / OS native). Useful for screenshot consistency.
Limitations (v1)
- Token granularity is fixed at ~190 vars. Adding a new CSS variable requires a code change — Theme Studio cannot define new variables, only edit existing ones.
- Some legacy surfaces (e.g. older Leafygreen widgets) ignore the token system and use hardcoded palette colors. ESLint blocks new regressions but the historical surfaces remain.
- Theme JSON files are local-first; sync via your file sync (Dropbox / git) to share across workstations.