I'm experimenting with toggling between a custom dark and light theme in my MVC application.
On the _Layout.cshtml page, the default theme is loaded by the following code:
<link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original.css ">
To switch between themes, I have created these buttons:
<button id="light">Light</button><br />
<button id="dark">Dark</button>
The two additional bootstrap themes are stored in lib > bootstrap> dist > css
In my bootstrap.js file, I've included the following JavaScript:
$('#dark').click(function () {
$('link[href="~/lib/bootstrap/dist/css/Dark.css"]').attr('href', '~/lib/bootstrap/dist/css/Dark.css');
});
$('#light').click(function () {
$('link[href="~/lib/bootstrap/dist/css/Dark.css"]').attr('href', '~/lib/bootstrap/dist/css/Light.css');
});
If I've overlooked an obvious mistake, I would appreciate any guidance on this matter.