Bright Themes, WCAG Contrast Inversion & High-Luminance Adaptation
Personalizing application aesthetics with vibrant colors enhances focus and workflow enjoyment. However, when users select high-luminance UI accent colors (such as Canary Yellow, Lime Green, Peach, or Warm Gold), standard user interface conventions can fail: white header text, light logos, and translucent buttons quickly become illegible against bright backgrounds. Version 4.17.2 introduced intelligent high-luminance adaptation to Open Publisher, enabling real-time Web Content Accessibility Guidelines (WCAG) contrast inversion across the Startup Dashboard, modals, contextual toolbars, and desktop client titlebars.
High-luminance themes automatically invert foreground typography and logos to dark charcoal for maximum contrast.
The .bright-theme Global State
To preserve accessibility across more than 700 theme combinations, Open Publisher evaluates the perceptual luminance of the active palette:
Automated Luminance Calculation: When a user auditions or applies a theme in the Theme Studio, the color engine calculates relative luminance using standard sRGB coefficients.
Global Class Activation: If the calculated background luminance exceeds predefined accessibility thresholds, the application attaches the .bright-theme class to the document root, triggering coordinated CSS overrides across all UI layers.
Dynamic WCAG Contrast Inversion
Under the .bright-theme state, critical interface elements adapt automatically:
Logo & Header Typography: The application brand logo and primary title text flip dynamically from white to dark charcoal (#111111), guaranteeing compliance with WCAG AAA contrast ratios.
Ghost Button Styling: Primary action triggers (such as the "Skip / Open Editor" button in the Startup Dashboard) transition from solid white fills into high-contrast ghost buttons with dark borders and crisp charcoal typography.
Close Controls & Sidebar Highlights: The modal close button (.custom-dialog-close) adopts a dark translucent pill styling while preserving its red hover state. Active sidebar navigation links invert their label text to dark gray when highlighted by bright accent colors.
Native Desktop Drag Zone Clearance
In standalone desktop client wrappers (such as NW.js or Electron), modal dialogs must coexist with operating system window frames. Version 4.17.2 tuned the dashboard positioning to a top offset of 7vh and maximum height of 88vh. This ensures the modal never obstructs native window controls (such as Windows minimize/maximize/close icons or macOS window traffic lights) regardless of display scaling.
Tip: You can preview how your publication canvas looks against both bright accent themes and Dark Mode by opening the UI Themes dialog from the View tab.