javascript - 在 bootstrap.css 主题之间动态切换

Question

我正在尝试在我的 MVC 应用程序上创建的深色和浅色主题之间切换。

我的 _Layout.cshtml 页面加载我在下面创建的默认主题

<link id="theme" rel="stylesheet" href="~/lib/bootstrap/dist/css/Original.css">

我创建了以下按钮来在下面的主题之间切换

<button id="light">Light</button><br />
<button id="dark">Dark</button>

我的另外两个引导主题位于 lib > bootstrap> dist > css >

我的 botstrap.js 文件中有以下 js

$('#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');
});

不确定我是否犯了一些明显的错误，但如果有任何帮助，我们将不胜感激。

Answer 1

这是在 VanillaJS 中，还请检查链接标签上的 href 是否正确解析为 CSS 文件。

const darkBtn = document.querySelector('#dark');
const lightBtn = document.querySelector('#light');
const linkTag = document.querySelector('#theme');

darkBtn.addEventListener('click', () => {
  linkTag.setAttribute('href', '~/lib/bootstrap/dist/css/Dark.css')
});

lightBtn.addEventListener('click', () => {
  linkTag.setAttribute('href', '~/lib/bootstrap/dist/css/Light.css')
});