Laravel css replace through js not working on non-base(Sub routes)

Question

I have created a theme changer toggle switch using JavaScript. I replaced between two .css files one is for dark theme and another is for white theme. My theme switcher is working for every base routes like "./routes" but theme switcher is not working on routes like "./routes/{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");
    }
}

I tried putting URL before href routes as following

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

Answer 1

Laravel blade syntax does not work on js file.So I simply putted the folloing code in my blade file with script tag.And everything worked fine.

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);
    }
}