सामग्री पर जाएँ
NoSqlStudio
दस्तावेज़

Theme Studio

NoSqlStudio look चलाने वाले ~190 CSS variables में से किसी को भी edit करें — color, surface, divider, typography, spacing, radius। एक नामित theme के रूप में save करें। Per session या default के रूप में apply करें। WCAG AAA contrast audit लगातार चलता है।

यह क्या है

8 token categories वाला एक workspace tab (color, surface, divider, accent, status, typography, spacing, radius)। हर token correspondingly CSS variable को live edit करता है — कोई rebuild नहीं, कोई app restart नहीं। Current set को एक नामित theme के रूप में save करें; View → Change Theme से themes switch करें।

कब उपयोग करें

तब customize करें जब आप ऐप में long sessions बिताते हैं और एक personal look चाहते हैं (Cobalto blue / Solarized / Monochrome dark / आदि) या जब corporate branding compliance evidence में screenshots में consistent color माँगता है। Contrast audit सुनिश्चित करता है कि accessibility regression land न हो सके।

इसे कैसे खोलें

  1. NoSqlStudio desktop ऐप में, View menu → Change Theme → Theme Studio खोलें, या Ctrl+Alt+T दबाएँ।
  2. एक workspace tab शीर्ष पर 8 category tabs, center में एक live preview pane, और दाहिनी ओर WCAG audit के साथ खुलता है।
  3. एक category चुनें, color picker / numeric input / dropdown के साथ tokens tweak करें। Changes पूरे ऐप पर live apply होते हैं।

इसके साथ काम करना

  • Color category — surface, surfaceRaised, accent, divider, fg, fgMuted, fgInverse। हर token hex + RGB + rendered swatch दिखाता है।
  • WCAG AAA audit — हर change पर चलता है। हर foreground/background pair को इसके contrast ratio और AAA / AA / fail flag के साथ सूचीबद्ध करता है। Fail के रूप में flag किए गए pairs लाल में highlight किए जाते हैं।
  • Save / load themes — अपना set नाम दें, userData/Themes/ के तहत disk पर save करें, एक teammate के साथ share करने के लिए JSON के रूप में export करें, उनका JSON वापस import करें। शामिल default theme Cobalto है।
  • Frameless window — Theme Studio title bar style (frameless / OS native) को भी control करता है। Screenshot consistency के लिए उपयोगी।

सीमाएँ (v1)

  • Token granularity ~190 vars पर fixed है। एक नया CSS variable add करने के लिए code change की आवश्यकता है — Theme Studio नए variables define नहीं कर सकता, केवल मौजूदा को edit कर सकता है।
  • कुछ legacy surfaces (जैसे पुराने Leafygreen widgets) token system को ignore करती हैं और hardcoded palette colors का उपयोग करती हैं। ESLint नई regressions block करता है लेकिन historical surfaces बनी रहती हैं।
  • Theme JSON files local-first हैं; workstations के बीच share करने के लिए अपने file sync (Dropbox / git) के माध्यम से sync करें।