How can I Create a Dark/Light Transition?

Ask the community
1

How can I Create a Dark Light Transition Toggle like the example below

When I click on the star in the middle I switch to light or dark mode

https://www.cassandratang.me/index.html

Thank you for your help

2

I have done this before using JS and raw CSS. However, because we have limed CSS and JS input, and if you site is not too complicated, duplicate sections and overlay one over the other and add some velo commands to show and or hid the other?

3

Hi iamteejay

Thank you for your answer. , I am a novice in code …

I tried this code. That works when I click on the button. The section disappears.

but what command should I put so that when I click again it reappears

export function vectorImage67_click ( event ) {
$w ( “#section1” ). hide ();
};

:smiling_face:

4

I would make sure there is a button in the same place in the summoning section, or put it in the header that has a transparent that is not involved with the transition and the button works both ways. I am just guessing but excited to see what you come up with.

5

I remember seeing someone do this within a section with click interactions. https://support.wix.com/en/article/editor-x-about-click-and-hover-interactions-beta
Assuming you have access to Click interactions, you can customize the effects to change colors and have one button affect all of them.

6

You would use the .show function for the button that is on the opposite scene to show the previous scene again.