An experimental dark mode (dark theme) switcher for Bootstrap 5 that allows the visitor to toggle between dark/light themes and saves the user’s preferences in local storage.
How to use it:
1. The necessary dark styles for Bootstrap 5 and its UI components.
[data-theme="dark"] { background-color: #111 !important; color: #fff; }
[data-theme="dark"] a { color: #fff; }
[data-theme="dark"] a:hover { color: #eee; }
[data-theme="dark"] .text-dark { color: #fff !important; }
/* BUTTONS */
[data-theme="dark"] .btn-link { color: #fff; }
[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] .btn-dark { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
[data-theme="dark"] .btn-dark:hover { color: #000; background-color: #f9fafb; border-color: #f9fafb; }
[data-theme="dark"] .btn-check:focus + .btn-dark,
[data-theme="dark"] .btn-dark:focus { color: #000; background-color: #f9fafb; border-color: #f9fafb; box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); }
[data-theme="dark"] .btn-check:checked + .btn-dark,
[data-theme="dark"] .btn-check:active + .btn-dark,
[data-theme="dark"] .btn-dark:active,
[data-theme="dark"] .btn-dark.active,
[data-theme="dark"] .show > .btn-dark.dropdown-toggle { color: #000; background-color: #f9fafb; border-color: #f9fafb; }
[data-theme="dark"] .btn-check:checked + .btn-dark:focus,
[data-theme="dark"] .btn-check:active + .btn-dark:focus,
[data-theme="dark"] .btn-dark:active:focus,
[data-theme="dark"] .btn-dark.active:focus,
[data-theme="dark"] .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5); }
[data-theme="dark"] .btn-dark:disabled,
[data-theme="dark"] .btn-dark.disabled { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
[data-theme="dark"] .btn-light { color: #fff; background-color: #212529; border-color: #212529; }
[data-theme="dark"] .btn-light:hover { color: #fff; background-color: #1c1f23; border-color: #1a1e21; }
[data-theme="dark"] .btn-check:focus + .btn-light,
[data-theme="dark"] .btn-light:focus { color: #fff; background-color: #1c1f23; border-color: #1a1e21; box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); }
[data-theme="dark"] .btn-check:checked + .btn-light,
[data-theme="dark"] .btn-check:active + .btn-light,
[data-theme="dark"] .btn-light:active,
[data-theme="dark"] .btn-light.active,
[data-theme="dark"] .show > .btn-light.dropdown-toggle { color: #fff; background-color: #1a1e21; border-color: #191c1f; }
[data-theme="dark"] .btn-check:checked + .btn-light:focus,
[data-theme="dark"] .btn-check:active + .btn-light:focus,
[data-theme="dark"] .btn-light:active:focus,
[data-theme="dark"] .btn-light.active:focus,
[data-theme="dark"] .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5); }
[data-theme="dark"] .btn-light:disabled,
[data-theme="dark"] .btn-light.disabled { color: #fff; background-color: #212529; border-color: #212529; }
[data-theme="dark"] .btn-outline-dark { color: #f8f9fa; border-color: #f8f9fa; }
[data-theme="dark"] .btn-outline-dark:hover { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
[data-theme="dark"] .btn-check:focus + .btn-outline-dark,
[data-theme="dark"] .btn-outline-dark:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); }
[data-theme="dark"] .btn-check:checked + .btn-outline-dark,
[data-theme="dark"] .btn-check:active + .btn-outline-dark,
[data-theme="dark"] .btn-outline-dark:active,
[data-theme="dark"] .btn-outline-dark.active,
[data-theme="dark"] .btn-outline-dark.dropdown-toggle.show { color: #000; background-color: #f8f9fa; border-color: #f8f9fa; }
[data-theme="dark"] .btn-check:checked + .btn-outline-dark:focus,
[data-theme="dark"] .btn-check:active + .btn-outline-dark:focus,
[data-theme="dark"] .btn-outline-dark:active:focus,
[data-theme="dark"] .btn-outline-dark.active:focus,
[data-theme="dark"] .btn-outline-dark.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5); }
[data-theme="dark"] .btn-outline-dark:disabled,
[data-theme="dark"] .btn-outline-dark.disabled { color: #f8f9fa; background-color: transparent; }
[data-theme="dark"] .btn-outline-light { color: #212529; border-color: #212529; }
[data-theme="dark"] .btn-outline-light:hover { color: #fff; background-color: #212529; border-color: #212529; }
[data-theme="dark"] .btn-check:focus + .btn-outline-light,
[data-theme="dark"] .btn-outline-light:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); }
[data-theme="dark"] .btn-check:checked + .btn-outline-light,
[data-theme="dark"] .btn-check:active + .btn-outline-light,
[data-theme="dark"] .btn-outline-light:active,
[data-theme="dark"] .btn-outline-light.active,
[data-theme="dark"] .btn-outline-light.dropdown-toggle.show { color: #fff; background-color: #212529; border-color: #212529; }
[data-theme="dark"] .btn-check:checked + .btn-outline-light:focus,
[data-theme="dark"] .btn-check:active + .btn-outline-light:focus,
[data-theme="dark"] .btn-outline-light:active:focus,
[data-theme="dark"] .btn-outline-light.active:focus,
[data-theme="dark"] .btn-outline-light.dropdown-toggle.show:focus { box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5); }
[data-theme="dark"] .btn-outline-light:disabled,
[data-theme="dark"] .btn-outline-light.disabled { color: #212529; background-color: transparent; }
/* DROPDOWNS */
[data-theme="dark"] .dropdown-menu { color: #dee2e6; background-color: #343a40; border-color: rgba(0, 0, 0, 0.15); }
[data-theme="dark"] .dropdown-menu .dropdown-item { color: #dee2e6; }
[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
[data-theme="dark"] .dropdown-menu .dropdown-item:focus { color: #fff; background-color: rgba(255, 255, 255, 0.15); }
[data-theme="dark"] .dropdown-menu .dropdown-item.active,
[data-theme="dark"] .dropdown-menu .dropdown-item:active { color: #fff; background-color: #0d6efd; }
[data-theme="dark"] .dropdown-menu .dropdown-item.disabled,
[data-theme="dark"] .dropdown-menu .dropdown-item:disabled { color: #adb5bd; }
[data-theme="dark"] .dropdown-menu .dropdown-divider { border-color: rgba(0, 0, 0, 0.15); }
[data-theme="dark"] .dropdown-menu .dropdown-item-text { color: #dee2e6; }
[data-theme="dark"] .dropdown-menu .dropdown-header { color: #adb5bd; }
/* LIST GROUPS */
[data-theme="dark"] .list-group-item-action { color: #fff; }
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus { color: #fff; background-color: #333; }
[data-theme="dark"] .list-group-item-action:active { color: #212529; background-color: #e9ecef; }
[data-theme="dark"] .list-group-item { background-color: #111; border: 1px solid #333; }
[data-theme="dark"] .list-group-item:not(:first-child) { border-top: none; }
[data-theme="dark"] .list-group-item.disabled,
[data-theme="dark"] .list-group-item:disabled { color: #fff; background-color: #000; }
[data-theme="dark"] .list-group-item.active { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
/* TABS */
[data-theme="dark"] .nav-tabs { border-bottom: 1px solid #000; }
[data-theme="dark"] .nav-tabs .nav-link:hover,
[data-theme="dark"].nav-tabs .nav-link:focus { border-color: #212529 #212529 #000; }
[data-theme="dark"] .nav-tabs .nav-link.disabled { color: #333; }
[data-theme="dark"] .nav-tabs .nav-link.active,
[data-theme="dark"] .nav-tabs .nav-item.show .nav-link { color: #fff; background-color: #000; border-color: #212529 #212529 #000; }
/* PAGINATION */
[data-theme="dark"] .page-link { color: #fff; background-color: #111; border: 1px solid #333; }
[data-theme="dark"] .page-link:hover { color: #fff; background-color: #333; border-color: #333; }
[data-theme="dark"] .page-link:focus { color: #fff; background-color: #000; }
[data-theme="dark"] .page-item.active .page-link { color: #fff; background-color: #0d6efd; border-color: #0d6efd; }
[data-theme="dark"] .page-item.disabled .page-link { color: #fff; background-color: #000; border-color: #333; }
/* BACKGROUNDS */
[data-theme="dark"] .bg-light { background-color: #212529 !important; }
[data-theme="dark"] .bg-dark { background-color: #f8f9fa !important; }
[data-theme="dark"] .bg-white { background-color: #000 !important; }
[data-theme="dark"] .bg-white.text-white,
[data-theme="dark"] .bg-dark.text-white,
[data-theme="dark"] .bg-warning.text-dark,
[data-theme="dark"] .bg-info.text-dark { color: #212529 !important; }
/* BORDERS */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-end,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start { border-color: #212529 !important; }
/* BREADCRUMB */
[data-theme="dark"] .breadcrumb.border { border-color: #333 !important; }
/* SHADOWS */
[data-theme="dark"] .shadow { box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.15) !important; }
[data-theme="dark"] .shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.075) !important; }
[data-theme="dark"] .shadow-lg { box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.175) !important; }
/* CARDS */
[data-theme="dark"] .card { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.125); }
/* MODALS */
[data-theme="dark"] .modal-content { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.2); }
[data-theme="dark"] .modal-header { border-bottom: 1px solid #212529; }
[data-theme="dark"] .modal-footer { border-top: 1px solid #212529; }
[data-theme="dark"] .modal-backdrop.show { opacity: 0.75; }
/* ACCORDIONS */
[data-theme="dark"] .accordion:not(.accordion-flush) { border-top: 1px solid #333; border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
[data-theme="dark"] .accordion-button { color: #fff; background-color: #000; border: 1px solid #333; border-top: none; }
[data-theme="dark"] .accordion-button:not(.collapsed) { color: #fff; background-color: #111; border-bottom: none; }
[data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="dark"] .accordion-collapse { border: 1px solid #333; }
[data-theme="dark"] .accordion-flush .accordion-button { border-right: 0; border-left: 0; border-radius: 0; }
[data-theme="dark"] .accordion-flush .accordion-collapse { border-width: 0; }
[data-theme="dark"] .accordion-flush .accordion-item:first-of-type .accordion-button { border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
[data-theme="dark"] .accordion-flush .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-width: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
/* PROGRESS BARS */
[data-theme="dark"] .progress { background-color: #333; }
/* FORMS */
[data-theme="dark"] .form-control::-webkit-input-placeholder,
[data-theme="dark"] .form-control::-moz-placeholder,
[data-theme="dark"] .form-control::placeholder { color: #ccc; }
[data-theme="dark"] .form-control-plaintext { color: #ccc; }
[data-theme="dark"] .form-control { color: #fff; background-color: #333; border: 1px solid #111; }
[data-theme="dark"] .form-select { color: #fff; border-color: #111 !important; background: #333 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; border: 1px solid #111; }
[data-theme="dark"] .form-select:focus { border-color: #dc3545; box-shadow: 0 0 0 0.2rem #dc3545; background-color: rgba(255,0,0,0.1); }
[data-theme="dark"] .form-select:focus::-ms-value { color: #495057; background-color: #fff; }
[data-theme="dark"] .form-select option { color: #000; }
[data-theme="dark"] .form-select:disabled { color: #6c757d; background-color: #e9ecef; }
[data-theme="dark"] .form-select:-moz-focusring { text-shadow: 0 0 0 #495057; }
2. Create a switcher to toggle between dark and light modes.
<div class="position-fixed py-2 px-3 bg-dark text-white rounded-pill" style="bottom:1rem;left:1rem;"> <div class="form-check form-switch pull-right"> <input class="form-check-input" type="checkbox" id="darkMode"> <label id="darkModeLabel" for="darkMode">Light</label> </div> </div>
3. The JavaScript to enable the dark mode switcher.
var darkMode = document.getElementById('darkMode');
var darkLabel = "darkModeLabel";
var darkLang = "Dark";
var lightLang = "Light";
var imgID = "logo";
var darkImg = "./dark.png";
var lightImg = "./light.png";
window.addEventListener('load', function () {
if (darkMode) {
initTheme();
darkMode.addEventListener('change', function () {
resetTheme();
});
}
});
function initTheme() {
var darkThemeSelected = localStorage.getItem('darkMode') !== null && localStorage.getItem('darkMode') === 'dark';
darkMode.checked = darkThemeSelected;
darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') : document.body.removeAttribute('data-theme');
darkThemeSelected ? document.getElementById(imgID).src = darkImg : document.getElementById(imgID).src = lightImg;
darkThemeSelected ? document.getElementById(darkLabel).innerHTML = darkLang : document.getElementById(darkLabel).innerHTML = lightLang;
}
function resetTheme() {
if (darkMode.checked) {
document.body.setAttribute('data-theme', 'dark');
localStorage.setItem('darkMode', 'dark');
document.getElementById(imgID).src = darkImg;
document.getElementById(darkLabel).innerHTML = darkLang;
} else {
document.body.removeAttribute('data-theme');
localStorage.removeItem('darkMode');
document.getElementById(imgID).src = lightImg;
document.getElementById(darkLabel).innerHTML = lightLang;
}
}
The post Dark Mode Switcher For Bootstrap 5 appeared first on CSS Script.