How can I change whole site color with toggle a button

Ask the community
,
1

Hi There,

I’m trying to change my site(Which is not published yet) color background when I toggle with button and when I toggle it again it turns back to the original color but unfortunately when I toggle the button the background color changes to the gray and toggle back it gets darker(but doesn’t get back to the original color which is :E5F0FE)Please take a close look at the code and let me know what my issue is!

$w . onReady ( function () {

$w ( ‘#darkModeSwitch’ ). onChange ( function () {
if ( $w ( ‘#darkModeSwitch’ ). checked ) {
$w ( ‘Document’ ). background . src = “https://dummyimage.com/1/333333” , $w ( ‘#darkModeState’ ). text = “Dark Mode On”
$w ( “#columnStrip6” ). background . src = “https://dummyimage.com/1/333333”
} else {
$w ( ‘Document’ ). background . src = “https://dummyimage.com/1/E5F0FE” , $w ( ‘#darkModeState’ ). text = “Dark Mode Off” }
$w ( “#columnStrip6” ). background . src = “https://dummyimage.com/1/E5F0FE”
});

});

Thanks in advance

2

The problem might be with the 1px image that dummyimage returns.
You can create a 1px image (or more. 1px is just to save some loading time, but other small images are also good enough) with the color E5F0FE, upload it to the site through the media manager, and use its URL instead.

3

I’ve created a 1px image with the color E5F0FE and uploaded on my media manager and link it(Please see the code) according to what you recommended me to do and thank you very much Please see the screenshot in dark mode the font color changes but the icons color(which is pointed by white arrows) is dark blue how can I have them like text fonts or a little lighter?

1880×792 237 KB

$w . onReady ( function () {
$w ( ‘#darkModeSwitch’ ). onChange ( function () {
if ( $w ( ‘#darkModeSwitch’ ). checked ) {
$w ( ‘Document’ ). background . src = “https://dummyimage.com/1/333333” , $w ( ‘#darkModeState’ ). text = “Dark Mode On”
} else {
$w ( ‘Document’ ). background . src = “https://static.wixstatic.com/media/d04120_2636c2ad09774cd597ccfb1e9f929e25~mv2.png” , $w ( ‘#darkModeState’ ). text = “Dark Mode Off” }
});

});

Thanks

4

Upload 2 versions of the icons (light and dark) to your media manger and swatch between the sources.
For example:

if ($w('#darkModeSwitch').checked) { 
//....
$w('#emailIcon').src = 'https://static.wixstatic.com/shapes/43987a_d58f.svg';//light icon
} else {
//..
$w('#emailIcon').src = 'https://static.wixstatic.com/shapes/34567d_d6rt.svg';//dark icon
}

Alternatively, you can change the SVG code (the fill and strike attributes), but I think using 2 files will be easier for you.

5

@jonatandor35 Thanks for your response well I’ve changed some changes in the code please see the code:

$w . onReady ( function () {
$w ( ‘#darkModeSwitch’ ). onChange ( function () {
if ( $w ( ‘#darkModeSwitch’ ). checked ) {

$w ( ‘#emailIcon’ ). src = ‘https://static.wixstatic.com/media/d04120_2cd897ba7a2246a396bfa8a23dad40ef~mv2.png’ ; //light icon
} else {
//…
$w ( ‘#emailIcon’ ). src = ‘https://static.wixstatic.com/media/d04120_a2f9e9ccd89744d5af2cd1e4bb652e6b~mv2.jpg’ ; //dark icon
}

$w ( ‘Document’ ). background . src = “https://static.wixstatic.com/media/d04120_7c42b975c694470ba8a77195178acfd8~mv2.png” , $w ( ‘#darkModeState’ ). text = “Dark Mode On”
} else {
$w ( ‘Document’ ). background . src = “https://static.wixstatic.com/media/d04120_2636c2ad09774cd597ccfb1e9f929e25~mv2.png” , $w ( ‘#darkModeState’ ). text = “Dark Mode Off” }
});

});

But unfortunately it doesn’t work and even can’t change the background color!

6

@danmaxwix you used commas instead of semicolons (+ other things).
It should be something like:

$w.onReady(function () {
    $w('#darkModeSwitch').onChange(function () {
        if ($w('#darkModeSwitch').checked) { 
            $w('Document').background.src = 'https://dummyimage.com/1/333333';
            $w('#darkModeState').text = 'Dark Mode On';
            $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('#emailIcon').src = 'https://static.wixstatic.com/media/d04120_a2f9e9ccd89744d5af2cd1e4bb652e6b~mv2.jpg';
          }
    });
});
7

Thanks for the code the issue that I’ve got is I moved the icon from the header to the page and I see an error please see the screenshot

1884×841 228 KB

In the preview when the dark mode is on the icon is black :

1903×830 253 KB

and when the dark mode is off the icon is white!

$w . onReady ( function () {
$w ( ‘#darkModeSwitch’ ). onChange ( function () {
if ( $w ( ‘#darkModeSwitch’ ). checked ) {
$w ( ‘Document’ ). background . src = ‘https://dummyimage.com/1/333333’ ;
$w ( ‘#darkModeState’ ). text = ‘Dark Mode On’ ;
$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 ( ‘#emailIcon’ ). src = ‘https://static.wixstatic.com/media/d04120_a2f9e9ccd89744d5af2cd1e4bb652e6b~mv2.jpg’ ;
}
});
});

should I paste the code in the home or just keep it in the masterPage.js ?

Thanks

8

The property ID of the icon is wrong

9

@jonatandor35 When I click on the mail icon the element ID is correct please see the code.

1907×856 232 KB

I think it’s because the element(mail icon) is not in the header I get the error?

10

@danmaxwix If you moved the element from the header to the page itself, you also need to move the code from masterPage.js to the page code.

11

If I’m gonna have the toggle button in the header and the mail icon in the page so where exactly I need to have the code?

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.

13

Thanks J.D. for your response could you kindly inform me what to add in red option of the code please?
as for this “you keep the mode in the session/locale browser cache and apply it on page load”. I didn’t get it could you kindly elaborate it please?

Thanks

14

  1. The path for the page where the icon is.

  2. You can read here, how to store data in the browser cache and how to retrieve tit on the other page:
    https://www.wix.com/velo/reference/wix-storage

15

Please see the code below I got some error!

import wixSite from ‘wix-site’ ;
$w . onReady ( function () {
const currentPath = www . danmaxwix . wixsite . com /website-6/ ; //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 === ‘/https://danmaxwix.wixsite.com/website-6’ ){
$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 === ‘/https://danmaxwix.wixsite.com/website-6’ ){
$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.
}
}
});
});

My icon is in the home page which is: https://danmaxwix.wixsite.com/website-6

1920×1080 192 KB

Please see the link:https://danmaxwix.wixsite.com/website-6/about

when I toggle the button the center of page doesn’t change!

1859×837 54.1 KB

16

You’re have several mistakes,

  1. The path is the ‘/home’ or ‘/contact’ part of the url.

  2. In line 6 the url (which should only be the path) had to be in-between equation marks.

  3. But actually it should be const currentPath = wixSite.currentPage?.url; as in my code.

  4. As you can see my code was referring to the masterPage.js and you mistakenly put it in home page code.

17

The reason I put the code in the homepage because when I put the code in masterPage.js I get the error because emailIcon doesn’t exist Please see the screenshot

1880×843 289 KB

At the moment I have the following code!

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 === ‘/home’ ){
$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.
}
}
});
});

Another error that I’ve got is in the below screenshot

1874×851 172 KB

as for line 6 that you mentioned is that the code?

$w ( ‘Document’ ). background . src = ‘https://dummyimage.com/1/333333’ ;

the url should be between equation marks you mean I should have the code this way?

$w ( ‘Document’ ). background . src = ‘https://dummyimage.com/1/333333 =’ ;

Thanks

18

Have a look at my code above, it should work (in the masterPage.js) even if it’s marked as an error in the editor.

19

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!

20

@jonatandor35 I visited the link you provided with thank you for that I saw some code regarding Store an item in memory storage and Retrieve an item from session storage should I copy and paste the code in masterPage.js?