Lesson 8 of 11Article12 min
Dark Mode
Dark Mode
Class-based dark mode
dark: variant
<html class="dark">
<body class="bg-white text-slate-900 dark:bg-slate-950 dark:text-slate-100">
<div class="bg-slate-100 dark:bg-slate-800 border-slate-200 dark:border-slate-700">
<button class="bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700">Toggle with JavaScript
function toggleDark() {
document.documentElement.classList.toggle("dark");
localStorage.setItem(
"theme",
document.documentElement.classList.contains("dark") ? "dark" : "light"
);
}