How can I change whole site color with toggle a button

Ask the community
,
12

In this case what you should do is like that.
In the masterPage.js:

import wixSite from 'wix-site';
$w.onReady(function () {
const currentPath = wixSite.currentPage?.url;//it will show you an error red line on the editor - you should ignore it.
    $w('#darkModeSwitch').onChange(function () {
        if ($w('#darkModeSwitch').checked) { 
            $w('Document').background.src = 'https://dummyimage.com/1/333333';
            $w('#darkModeState').text = 'Dark Mode On';
if(currentPath === '/my-page-path'){
            $w('#emailIcon').src = 'https://static.wixstatic.com/media/d04120_2cd897ba7a2246a396bfa8a23dad40ef~mv2.png'; //it will show you an error red line on the editor - you should ignore it.
}
        } else { 
            $w('Document').background.src = "https://static.wixstatic.com/media/d04120_2636c2ad09774cd597ccfb1e9f929e25~mv2.png";
            $w('#darkModeState').text = 'Dark Mode Off';
if(currentPath === '/my-page-path'){
            $w('#emailIcon').src = 'https://static.wixstatic.com/media/d04120_a2f9e9ccd89744d5af2cd1e4bb652e6b~mv2.jpg'; //it will show you an error red line on the editor - you should ignore it.
}
          }
    });
});

This will only work if you toggle the switch when you’re on the current page.
If you wish to keep the mode across all the site pages, you keep the mode in the session/locale browser cache and apply it on page load.