2023-06-08 17:09:24 +02:00
<!doctype html>
2023-06-18 10:15:15 +02:00
< html lang = "en" data-bs-theme = "auto" >
2023-06-08 17:09:24 +02:00
< 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.0/dist/css/bootstrap.min.css" rel = "stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
< title > bootstrap-auto-dark-mode< / title >
< script src = "./src/bootstrap-auto-dark-mode.js" > < / script >
< / head >
< body class = "p-4" >
< h1 > bootstrap-auto-dark-mode< / h1 >
2023-06-18 10:15:15 +02:00
< p > This script adds an auto-dark mode to the new theme feature of Bootstrap 5.3.< / p >
2023-06-08 17:09:24 +02:00
2023-06-18 10:15:15 +02:00
< p > It switches the Bootstrap theme automatically between light and dark mode, depending on the system settings, if
you set the < code > data-bs-theme< / code > attribute of your < code > < html>< / code > to < code > auto< / code > .< / p >
< p > Use it by just including < code > bootstrap-auto-dark-mode.js< / code > in your header and setting < code > data-bs-theme< / code > to < code > < / code > auto< / code > .< / p >
2023-06-08 17:09:24 +02:00
< code >
2023-06-18 10:15:15 +02:00
< pre >
< html data-bs-theme="< b class = "text-success" > auto< / b > ">
< head>
[…]
< b class = "text-success" > < script src="./src/bootstrap-auto-dark-mode.js">< /script>< / b >
< /head>
[…]
< / pre >
2023-06-08 17:09:24 +02:00
< / code >
2023-06-18 10:15:15 +02:00
< h2 > Switch manually< / h2 >
< button class = "btn btn-primary" onclick = "document.documentElement.setAttribute('data-bs-theme', 'light')" > Light
mode
< / button >
< button class = "btn btn-primary" onclick = "document.documentElement.setAttribute('data-bs-theme', 'dark')" > Dark
mode
< / button >
2023-06-08 17:09:24 +02:00
< script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous">< / script >
< / body >
< / html >
