Dark mode customization
Learn more about the dark mode customization options
Customization options
In the second section of settings panel, you can see various customization options to customize the look and functionality of the dark mode toggle button in the frontend. Please check below list for the detailed explanation.
Auto match user operating system theme: Setting this option to “Yes” matches the dark mode option to enable by default based on the user operating system preferences.
Background color: background color of the toggle button.
Button color when in dark mode: As the label says, this is the button foreground color when the website dark mode is enabled.
Button color when in light mode: As the label says, this is the button foreground color when the website light mode is enabled.
Save user preference in cookies: This option saves the visitor’s dark mode preference in cookies and remember’s the visitor’s choice when the same visitors visits again.
Label Icon or Emoji: We have provided number of icons to use as the Dark mode toggle button.
Mix color: This is the mix color.
Transition time: This is the transition animation time to apply the dark mode to the website when clicked on the dark mode button.
Bottom position: This option is to set the dark mode button position from bottom side. You can use px, rem or vh units.
Right position: This option is to set the dark mode button position from the right side. You can use px, rem or vh units.
Left position: This option is to set the dark mode button position from the left side. You can use px, rem or vh units.