Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.

  • Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
  • Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
  • Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
  • Opera: Нажмите Ctrl+F5.
function toggleTheme() {
  const body = document.querySelector('body');
  if (body.classList.contains('dark')) {
    body.classList.remove('dark');
    body.classList.add('light');
    localStorage.setItem('theme', 'light');
  } else {
    body.classList.remove('light');
    body.classList.add('dark');
    localStorage.setItem('theme', 'dark');
  }
}

function getSavedTheme() {
  return localStorage.getItem('theme') || 'dark';
}

function initTheme() {
  const savedTheme = getSavedTheme();
  const body = document.querySelector('body');
  body.classList.add(savedTheme);
}

function createThemeButton() {
  const personalElement = document.querySelector('#p-personal');
  const themeButton = document.createElement('button');
  themeButton.textContent = 'Сменить тему';
  themeButton.addEventListener('click', toggleTheme);
  personalElement.parentNode.insertBefore(themeButton, personalElement);
}

document.addEventListener('DOMContentLoaded', function () {
  initTheme();
  createThemeButton();
});