Bootstrap 5 TutorialLesson 32Free preview
BS5 Dark Mode
This lesson is part of Bootstrap · All levels
Summary
Bootstrap 5.3 supports dark mode by default through data-bs-theme="dark" attributes placed on <html> or a specific section of the page. Just add those attributes and the components, colors, and utilities will automatically customize the dark theme. You can also follow the user's system preferences through the preferences-color-scheme.
Key points
- Data-bs-theme="dark" on <html> activates the dark mode of the entire page.
- The same attribute can be given to certain elements for the partially dark part.
- Classes like .bg-body-tertiary adjust colors to automatic themes.
- Operating system preferences can be followed by media query preferences-color-scheme.
- Custom CSS can be created following a theme via the Bootstrap color variable.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.