I have a additional css file I would like to load, once enabled through a toggle switch. & inversely allow it to be unset and revert back to the default .css file when un-switched.
I seem to be having a bit a troubles in successfully adding this, as writing java-script is a bit tricky for me sometimes. So I call on the community to offer their input & how they would go about adding this ability. Thanks to everyone in advance for you're time & reading!
Here is the URL for the site: (https://phpstack-726541-2423367.cloudwaysapps.com/) You can see the toggle switch in the top right corner
It would be greatly appreciated for the simplest solution possible to this :)
????Bootstrap toggle switch, so no custom or additonal css to include.
The path for the intended css file is 'assets/css/dark-theme.css'<div class="custom-control custom-switch" style = "display: inline-block; padding: 0px 10px 0px 10px;">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1"></label>
</div>You might want to review this answer: https://stackoverflow.com/a/63087710/7216508
I understand you are using Bootstrap, and thus the code snippet below might not be ready-to-use by simple copy-paste. But hope it'd give you a general understanding of how this could be achieved.
In a nut-shell, you could assign theme colors in CSS variables and override their values depending on the user selection. In your case you might want to merge the two CSS files and refactor the structure a bit.
document.querySelector('.switch').addEventListener('click', () => {
document.body.classList.toggle('dark');
});:root {
--bg-nav: #333;
--bg-body: #f0f0f0;
--text-nav: #fff;
--text-body: #202020;
}
body {
margin: 0;
min-height: 100vh;
position: relative;
display: flex;
flex-direction: column;
background-color: var(--bg-body);
color: var(--text-body);
}
body.dark {
--bg-nav: #112200;
--bg-body: #333;
--text-nav: #fff;
--text-body: #fff;
}
main {
flex: 1;
padding: 15px;
}
header, footer {
background-color: var(--bg-nav);
color: var(--text-nav);
padding: 10px;
}<header>Header Nav</header>
<main>
<h1>Test Page</h1>
<p>Here is a sample page</p>
<button class="switch">Switch theme</button>
</main>
<footer>Footer Nav</footer>