Bootstrap Darkmode Switch
<p>I have tried this before without success but i googled "Bootstrap Darkmode Switch" and found <a href="https://github.com/coliff/dark-mode-switch" target="blank" rel="noopener">this repo</a> at the top of the list. So i thought i would give it a try on here and see how it looks. Demo page is <a href="https://coliff.github.io/dark-mode-switch/index.html" target="blank" rel="noopener">here</a>, lets see if it works.</p>
<p>The good thing about a toggle is that i can test it on every page and see what needs to be changed. I think there may be too many elements to actually change it on this site so this test might fail, but we will see. </p>
<p><a href="https://github.com/coliff/dark-mode-switch/archive/v1.0.0.zip" target="blank" rel="noopener">Download the latest release</a> of dark mode toggle.</p>
<p>I <a href="/html/dark-mode-switch/index.html" target="blank" rel="noopener">have a copy here</a> if you want to view the demo and source. </p>
<p>I added the code to this page, but when toggling the dark mode switch it does not seem to apply the data attribute to the html header. I can manually add it so that proves that the css is working ok, something seems to be blocking the attribute from being added correctly. </p>
<p>I think rather than digging into this one i will just mark this as a non working one for me. Here is the test of manually adding the data attribute, so that works just the script does not want to add it for me. </p>
<p><video controls="controls" width="100%" height="500">
<source src="https://i.imgur.com/J9utOVB.mp4" type="video/mp4" /></video></p>
HTML
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="darkSwitch" />
<label class="custom-control-label" for="darkSwitch">Dark Mode</label>
</div>CSS
[data-theme="dark"] {
background-color: #111!important;
color: #eee;
}
[data-theme="dark"] .bg-light {
background-color: #111!important;
}Scripts
<link rel="stylesheet" href="/html/dark-mode-switch/dark-mode.css" />
<script src="/html/dark-mode-switch/dark-mode-switch.js"></script>View Statistics
Add Comment
Other Items in bootstrap
Related Search Terms
Other Categories in Code
Random Quote
minecraft
