Как реализовать смену стиля сайта по нажатию кнопки в WordPress?

Question

[jokejoy]

В первый раз натягиваю верстку на Wordpress и столкнулся со следующей проблемой: в задании есть цель - смена темы со светлой на темную при нажатии на чекбокс. Реализовал это при помощи двух страниц стилей - темной (dark-theme.css) и светлой (style.css). Но столкнулся проблемой что при натяжке, страницы не переключались друг на друга. Помогите, кто знает что не так.
Вот код из functions.php

<?php

add_action('wp_footer', 'addScripts');
add_action( 'wp_enqueue_scripts', 'addStyles');

function addScripts(){
    wp_deregister_script('jquery-core');
    wp_register_script('jquery-core', 'https://code.jquery.com/jquery-3.2.1.slim.min.js');
    wp_enqueue_script('jquery');
    wp_enqueue_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js');
    wp_enqueue_script('mainJS', get_template_directory_uri() . '/assets/js/main.js');
}

function addStyles(){
    wp_enqueue_style('bootstrap', get_template_directory_uri() . '/assets/css/bootstrap.min.css');
    wp_enqueue_style('main', get_template_directory_uri() . '/style.css' );
    wp_register_style('dark-theme', '/assets/css/dark-theme.css');
    wp_register_style('white-theme', '/assets/css/white-theme.css');
}

?>

А вот код скрипта

'use strict';
  // создал <link rel="stylesheet" href="light-theme|dark-theme.css">
  let head = document.head,
      link = document.createElement('link');
  link.rel = 'stylesheet';
  // Проверка значения. Если dark-theme то будет темная тема
  if (localStorage.getItem('themeStyle') === 'dark') {
    link.href = '/assets/css/dark-theme.css'; // ссылка на темную тему
    document.getElementById('switch-dark').setAttribute('checked', true); // переключаем чекбокс в положение "темная тема"
  }

  else {
    link.href = '/assets/css/white-theme.css'; // ссылка на светлую тему
  }
  head.appendChild(link); // вставляем <link rel="stylesheet" href="light-theme|/assets/css/dark-theme.css">

  // событие при переключении чекбокса
  document.getElementById('switch-dark').addEventListener('change', ev => {
    let btn = ev.target;
    // если чекбокс включен
    if (btn.checked) {
      link.href = '/assets/css/dark-theme.css'; // включаем темную тему
      localStorage.setItem('themeStyle', 'dark'); // записываем значение в localStorage
    }
    else {
      link.href = '/assets/css/white-theme.css'; // включаем светлую тему
      localStorage.setItem('themeStyle', 'light'); // записываем значение в localStorage
    }
  });

Answer 1

[yarovikov]

Уберите подключение из php и используйте подгрузку стилей только с помощью js.

Comments

[jokejoy]

Спасибо большое за ответ. Я в JS новичок, можете подсказать как это сделать, если вам не сложно?)

[yarovikov]

jokejoy, закомментируйте эти две строчки

wp_register_style('dark-theme', '/assets/css/dark-theme.css');
wp_register_style('white-theme', '/assets/css/white-theme.css');