Dark mode
Only the semantic layer changes. Component code stays the same.
Switch the theme with the toggle in the sidebar of this site: every example follows.
Bookings today
128+12%
Patients arrived
96+8%
Results uploaded
128
Used to confirm your booking.
Phone number must be 10 to 13 digits.
Rules
- In dark mode, depth comes from lighter surfaces instead of shadows.
shadow-surfacebecomes a faint outline. - Accent and status colors are brightened so contrast on dark surfaces stays at 4.5:1 or more.
- Glass keeps working with a dark base color and still has a solid fallback.
- The theme follows the device setting and can be chosen manually.
Enabling it
<html data-theme="dark">The class dark on the root element works too.