Dark mode and design tokens

Design Systems · 2026-05-22

Dark mode is implemented with Tailwind dark: variants, a documentElement class toggle, and connectSoftShell.setTheme in shell.js.

Page bodies use Components/Sections and Tailwind utilities only — figma-redesign.css and theme-overrides.css are not part of the template.

Store the user preference in localStorage and mirror it to data-theme so Blazor enhanced navigation does not reset the palette.

Adjust brand colors via design-tokens.css and Tailwind classes rather than editing Flowbite CDN bundles.

Test contrast ratios for hero text, cards, and CTA banners in both themes before launch.

Explore more articles

Back to the blog index for guides on UIKit, SEO, and operations.

We Value Your Privacy

We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic. By clicking "Accept All", you consent to our use of cookies. Learn More