I copied and pasted your code in masterPage.js all the code that I have :
/**
- Adds an event handler that runs when an input element’s value
is changed.
Read more - @param {$w.Event} event
*/
export function darkModeSwitch_change ( event ) {
}
/**
- Adds an event handler that runs when the mouse pointer is moved
onto the element.
You can also define an event handler using the Properties and Events panel.
Read more
- @param {$w.MouseEvent} event
*/
/**
- Adds an event handler that runs when the mouse pointer is moved
off of the element.
You can also define an event handler using the Properties and Events panel.
Read more
- @param {$w.MouseEvent} event
*/
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’ ;
$w ( ‘#sunblack’ ). show ();
$w ( ‘#sun’ ). hide ();
$w ( ‘#emailIcon’ ). src = ‘https://static.wixstatic.com/media/d04120_de7b1c2b8afd4d80ad37fa8728122eda~mv2.png’ ;
if ( currentPath === ‘/my-page-path’ ){
// will show you an error red line on the editor - you should ignore it.
$w ( ‘#emailIcon’ ). src = ‘https://static.wixstatic.com/media/d04120_2cd897ba7a2246a396bfa8a23dad40ef~mv2.png’ ;
}
} else {
$w ( ‘Document’ ). background . src = “https://static.wixstatic.com/media/d04120_2636c2ad09774cd597ccfb1e9f929e25~mv2.png” ;
$w ( ‘#darkModeState’ ). text = ‘Dark Mode Off’ ;
$w ( ‘#sunblack’ ). hide ();
$w ( ‘#sun’ ). show ();
$w ( ‘#emailIcon’ ). src = ‘https://static.wixstatic.com/media/d04120_2cd897ba7a2246a396bfa8a23dad40ef~mv2.png’ ;
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.
}
}
});
});
Please visit the link:https://danmaxwix.wixsite.com/website-6
When I toggle on the button in preview work page gets dark but when I publish the site and try it that page doesn’t change.If you play with it for example if you go to about page and toggle the button it gets dark(except middle of the page which won’t change)and then go to work page and toggle the button then get back to work page again and toggle the button the dark mode won’t work!
Please see the video screen and you will get exactly what I mean!