Color Mode Toggle

Demonstrates Bootstrap 5.3 dark mode with system preference detection and manual toggle.

Light Dark Auto

Current theme: light

Standard Card

This card automatically adapts to the current color mode. The background, text, and border colors all respond to the data-bs-theme attribute.

Primary Action

Forced Dark Card

This card has data-bs-theme="dark" applied directly, so it stays dark regardless of the page theme. Useful for contrast sections.

Outline Button

A primary alert adapts to color modes automatically.

Success alerts use subtle background colors that work in both modes.

Warning alert with theme-appropriate contrast.

#	Feature	Light Mode	Dark Mode
1	Background	`#ffffff`	`#212529`
2	Text Color	`#212529`	`#dee2e6`
3	Border Color	`#dee2e6`	`#495057`