Изменение оформления сайта

Question

Интересует возможно ли чтобы при нажатии кнопки на сайте подгружало другой цсс файл со стилями взамену старого? Типу как на сайтах есть скачок со светлой на черную тему. Буду рад если вы предложите какие-то варианты, необязательно код, можно и словами суть обьяснить

Answer 1

Не обязательно подгружать разные css файлы, можно просто использовать переменные CSS и псевдокласс :root:

l = document.getElementById('l');
d = document.getElementById('d');
document.getElementsByName('style').forEach(e => e.addEventListener('change', switchTheme));

function switchTheme() {
  if (l.checked) {
    document.documentElement.className = 'light';
  } else if (d.checked) {
    document.documentElement.className = 'dark'
  } else {
    document.documentElement.className = window.matchMedia("(prefers-color-scheme: dark)").matches ? 'dark' : 'light';
  }
}

  :root,
:root.light {
  --bg: green;
  --text: black;
}

:root.dark {
  --bg: black;
  --text: green;
}

body {
  background: var(--bg);
  color: var(--text);

<!DOCTYPE html>
<html>

<body>
  <label>
    Светлая
    <input type="radio" name="style" id="l">
  </label>
  <br/>
  <label>
    Тёмная
    <input type="radio" name="style" id="d">
  </label>
</body>

</html>

БЛОГ НА HUSL

Изменение оформления сайта

Ответы (1 шт):