Laravel-css通过js替换，不适用于非基础(子路由)

Question

我使用JavaScript创建了一个主题转换开关。我替换了两个.css文件，一个用于深色主题，另一个用于白色主题。我的主题转换程序正在为每一条基本路线工作，比如"/"路线"；但主题切换器并没有在"这样的路线上工作/路由/｛id｝"；。

var checkbox = document.getElementById("theme-changer-checkbox");
var body = document.getElementById("kt_body");
var el = document.getElementById("theme-change-styleSheet");
checkbox.onclick = function() {
myFunction();
};
function myFunction() {
if (checkbox.checked) {
el.href = "css/dashboardDarkTheme.css";
body.style.setProperty("background", "#152036", "important");
} else {
el.href = "css/dashboardWhiteTheme.css";
body.style.setProperty("background", "white", "important");
}
}

我尝试将URL放在href路由之前，如下所示

<link id="theme-change-styleSheet" rel="stylesheet" href="{{URL('css/dashboardWhiteTheme.css')}}">

Answer 1

Laravel blade语法不适用于js文件。所以我简单地把下面的代码放在带有脚本标签的blade文件中。一切都很顺利。

var checkbox = document.getElementById("theme-changer-checkbox");
var body = document.getElementById("kt_body");
var el = document.getElementById("theme-change-styleSheet");
console.log("href :" + el.href);
checkbox.onclick = function() {
myFunction()
};
function myFunction() {
if (checkbox.checked) {
console.log("{{ asset('css/dashboardWhiteTheme.css') }}");
el.href = "{{ asset('css/dashboardDarkTheme.css') }}";
body.style.setProperty('background', '#152036', 'important');
console.log("href checked :" + el.href);

} else {
el.href = "{{ asset('css/dashboardWhiteTheme.css') }}";
body.style.setProperty('background', 'white', 'important');
console.log("href !checked :" + el.href);
}
}