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.

גלה מאמרים נוספים

חזור לעמוד הבלוג למדריכים על UIKit, SEO ותפעול.

אנו מעריכים את הפרטיות שלך

אנו משתמשים בעוגיות כדי לשפר את חווית הגלישה שלך, להציג תוכן מותאם אישית ולנתח את התנועה שלנו. על ידי לחיצה על "אשר הכל", אתה מסכים לשימוש שלנו בעוגיות. למד עוד