Динамическое переключение между темами bootstrap. css

Question

Я пытаюсь переключиться между темной и светлой темой, которую я создал в своем приложении MVC.

Моя страница _Layout.cs html загружает тему по умолчанию, которую я создал ниже

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

Я создал следующие кнопки для переключения между темами ниже

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

Две другие мои bootstrap темы находятся в lib> bootstrap> dist> css>

У меня есть ниже js в моем ботстрапе. js file

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

Здесь, в Vanilla JS, проверьте также, разрешает ли 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')
});

Answer 2

Вам, вероятно, нужен следующий код:

$('#dark').click(function () {
    $('#theme').attr('href', '~/lib/bootstrap/dist/css/Dark.css');
});
$('#light').click(function () {
    $('#theme').attr('href', '~/lib/bootstrap/dist/css/Light.css');
});

Ваш код ищет элемент ссылки, где href буквально начинается с ~/. На вашей странице бритвы href начинается с этой строки. Но ASP. NET заменяет его на путь для содержимого - root, поэтому для браузера href не начинается с этой строки.