Tutorials Bootstrap 5 Tutorial
Dark Mode with data-bs-theme
Dark Mode with data-bs-theme: free step-by-step lesson with examples, common mistakes, and interview tips — part of Bootstrap 5 Tutorial on Toolliyo Academy.
On this page
Bootstrap 5 Tutorial · Lesson 65 of 100
Dark Mode with data-bs-theme
Setup & Utilities ✓ → Components & Forms ✓ → Theme & Integrate → Ship & Projects
Theme & Integrate · 3 — Polish · ~10 min · Theming and Accessibility
What is this?
Bootstrap 5.3+ supports color modes. Set data-bs-theme="dark" on (or a subtree) to flip theme colors.
Why should you care?
Admin users expect a dark BootVerse option that still uses theme tokens.
See it live — copy this example
Examples include Bootstrap 5.3 CDN links. Paste into an HTML file or use Run Example to preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>BootVerse</title>
</head>
<body class="p-3">
<div data-bs-theme="dark" class="p-3 bg-body text-body rounded border">
<p class="mb-2">Dark preview</p>
<button class="btn btn-primary">Action</button>
<button class="btn btn-outline-light">Secondary</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Theme variables retarget body, borders, and components.
- Prefer tokens over hard-coded #fff/#000.
Practice next
- Toggle dark on in DevTools.
- Check a card and a table.
- Avoid raw hex in custom CSS.
- Build a tiny theme toggle button.
- Try data-bs-theme="light" explicitly.
Remember
data-bs-theme drives mode. Use theme classes. Test contrast.
Night shift UI
Ops team works late.
Outcome: BootVerse readable in dark mode.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!