在Wrodpress中切换页面的两个CSS文件

我正在尝试将我的html模板转换为WordPress主题。html模板有一个开关，可以在“亮”和“暗”之间转换页面主题（我有一个用于亮模式和暗模式的CSS文件，所以基本上我使用JavaScript在按钮单击时在这两个文件之间切换）

现在我正试图将我的模板转换为WordPress主题，我面临的问题是，当我将CSS文件添加到functions.php时，它似乎一次加载所有CSS文件。在WordPress中有没有一种方法可以通过点击按钮在这些文件之间切换

下面是functions.php文件

  add_theme_support( 'post-thumbnails' );

  function load_stylesheets(){

      wp_register_style('homepage', get_template_directory_uri() . '/CSS/homepage.css', array(), 1, 'all');
      wp_enqueue_style('homepage');

      wp_register_style('homepage', get_template_directory_uri() . '/CSS/homepage_dark.css', array(), 1, 'all');
      wp_enqueue_style('homepage_dark');

      wp_register_style('single', get_template_directory_uri() . '/CSS/single.css', array(), 1, 'all');
      wp_enqueue_style('single');

  }

  add_action('wp_enqueue_scripts', 'load_stylesheets');
  

// Load Scripts

function load_js(){
  
  wp_register_script('homepagejs', get_template_directory_uri() . '/JavaScript/homepage.js', array(), 1, 1, 1);
  wp_enqueue_script('homepagejs'); 

  wp_register_script('masonry', get_template_directory_uri() . 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js', array(), 1, 1, 1);
  wp_enqueue_script('masonry');

  wp_register_script('singlejs', get_template_directory_uri() . '/JavaScript/single.js', array(), 1, 1, 1);
  wp_enqueue_script('singlejs'); 
}

add_action('wp_enqueue_scripts', 'load_js');

?>

下面是带有切换功能的JS文件

window.onload = () =>{
    const grid = document.querySelector('.grid-container');
    const masonry = new Masonry(grid, {
        itemSelector: '.grid-item',
        gutter: 15,
        marginBottom: 15,
        columnWidth: 260,
        fitWidth: true,
        horizontalOrder: true

    });
}



function toggleTheme() {
    // Obtains an array of all <link>
    // elements.
    // Select your element using indexing.
    var theme = document.getElementsByTagName('link')[0];
    var btn = document.getElementsByClassName("switch")
    // Change the value of href attribute 
    // to change the css sheet.
    if (theme.getAttribute('href') == '/CSS/homepage.css') {
        theme.setAttribute('href', '/CSS/homepage_dark.css');
        btn.value = "Light Mode"
        document.getElementsByClassName('img_logo').src= '/assets/img/logo_white.svg'
    } else {
        theme.setAttribute('href', '/CSS/homepage.css');
        btn.value = "Dark Mode"
        document.getElementsByClassName('img_logo').src= '/assets/img/logo.svg'
    }
}

window.onload=（）=>{
const grid=document.querySelector（“.grid容器”）；
施工砌体=新砌体（网格{
itemSelector:“.grid项”，
排水沟：15，
marginBottom:15，
列宽：260，
菲特：是的，
水平顺序：正确
});
}
函数toggleTheme（）{
//获取所有
//元素。
//使用索引选择元素。
var theme=document.getElementsByTagName（'link'）[0]；
var btn=document.getElementsByClassName（“开关”）
//更改href属性的值
//更改css工作表。
if（theme.getAttribute（'href'）='/CSS/homepage.CSS'）{
theme.setAttribute（'href'，'/CSS/homepage_dark.CSS'）；
btn.value=“灯光模式”
document.getElementsByClassName（'img_logo'）.src='/assets/img/logo_white.svg'
}否则{
theme.setAttribute（'href'，'/CSS/homepage.CSS'）；
btn.value=“暗模式”
document.getElementsByClassName（'img_logo'）.src='/assets/img/logo.svg'
}
}

在front-page.php中更改主题onchange

 <div class ="dark_mode_switch">
     <label class="switch" id="theme_toggle_switch" onchange="toggleTheme()">
            <input type="checkbox">
            <span class="slider round"></span>
     </label>
 </div>

---

我的建议是采用CSS样式表URL并将其输出到内嵌JavaScript

因此，在functions.php中，您可以执行以下操作：

函数加载_js（）{
$stylesheets=[
“主题”=>[
'dark'=>get_template_directory_uri（）。/CSS/homepage_dark.CSS'，
'light'=>get_template_directory_uri（）。/CSS/homepage.CSS'
]
];
wp_register_script（'singlejs'，get_template_directory_uri（）。/JavaScript/single.js'，array（），1,1,1）；
wp_add_inline_脚本（'singlejs'，json_encode（$stylesheets））；
}

然后，您可以修改JavaScript以获取样式表URL，并对其执行任何操作：

console.log（themes.light）；
console.log（themes.dark）；

你真的应该添加任何你尝试过的代码，这样社区就可以看到你自己在努力解决这个问题。没有努力解决问题的问题肯定会被解决。我添加了我正在使用的代码。