This template includes both light and dark modes, giving you the flexibility to customize the look and feel according to your preferences. Switching between these modes is seamless and can be done with a simple toggle, ensuring the optimal user experience no matter the setting. Read on to learn how to enable, customize, and make the most of these modes in your template.
For this template, two folders are defined in the variables panel: one for the light mode and one for the dark mode. With a click on the light/dark toggle button, located at the bottom right of the site, the site’s theme switches modes, and these variables change to their corresponding colors.
When you click the mode switch toggle button, located at the bottom right corner of the site, the template changes to dark mode with the first click. With a second click, it returns to light mode, restoring its original appearance. These transitions are accompanied by animations, titled "Change theme to dark on first click" and "Change theme to light on second click".
Each variable in one folder has a corresponding variable in the other folder, with colors matched to the appropriate mode. For example, the first variable of the light mode has a specific color for light mode and a particular color for dark mode. Therefore, in the animation, you must specify that this variable switches to its corresponding variable in the other mode. For instance, in the "Change theme to dark on first click" animation, you should specify that the background color primary variable in the Background Color folder changes from its initial state in the light mode palette to its corresponding variable in the dark mode palette. Similarly, in the "Change theme to light on second click" animation, you should define it in reverse to achieve the desired effect. You can also implement another rule to equate your colors based on your taste.
Now you can change any color you like and understand how the animation works. For further questions, feel free to contact us through the support panel.