Bootstrap
Posted in
2757
12:21 am, February 23, 2022
Added Bootstrap Nightshade Again
I did have a toggle dark mode switch on the top right of this site.
But i noticed when i loaded in the page it would flash white and then load in the dark mode.
This is really annoying when loading multiple pages on the same site.
So back to this nightshade again, which just applies light or dark mode depending on your operating system preference, if you like things in dark mode, it just applies it. Easy.
Maybe the old one was called Nightshade and this one is just called bootstrap dark, anyway this is the css.
Bootstrap Dark
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.0.1/dist/css/bootstrap-dark.min.css" />
vs
Bootstrap Nightshade and Toggle
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap-utilities.min.css" integrity="sha512-kRvJclW5GazdbAJPE9vvs560XNBwTBGLg4RVHZALXHFnAWQeRbQ/jGcGDHcQXiiqRld4wEFs6Kpoa6Tm/wCrtg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-nightshade.min.css" rel="stylesheet">
Toggle Code
HTML
<div class="form-check form-switch dark-mode-switch">
<input class="form-check-input" type="checkbox" id="DarkMode">
<label class="form-check-label" for="DarkMode">Dark Mode</label>
</div>
Sources
View Statistics
This Week
47
This Month
192
This Year
761
Add Comment
Other Items in Bootstrap
Related Search Terms
Other Categories in Articles
ai api and javascript apps bootstrap data imports docker forster funny images gaming linux marriage minecraft nft newsletters osrs operating systems photoshop pi rs3 slayer random code random things site development site updates tech tool documentation tools and utilities utilities vpn video notes videos web dev windows apps android apple apps atom bootstrap charts code code thoughts comments cooking core crypto css designs factorio games google hardware how to howto ios ideas linux mac music new world osrs php pi400 privacy python random random stats random web code random web things rs3 runescape site bugs slick slider terraria valheim videos web development webdev windows wordpress wow wow classic youtube