To get started, follow the steps below:
- Navigate to Theme Options > Dark Mode
- Dark Mode option:
Disable Dark Mode: select this if you want to turn off the Dark Mode feature on the website.
Light/Dark Switchable: this option will enable the Light/Dark toggle button located above the header.
Dark Mode Only: this option will allow the website to always be in dark mode.
Based on Browser: the option allows the website to switch between Light and Dark modes based on the default display mode of the user’s browser. Ex: if a user’s browser is set to Dark Mode by default, the website will automatically display in Dark Mode when the user visits it. - Preventing Dark Mode Flickering option: Utilize cookies or a JavaScript function positioned after the Body tag to avoid abrupt background flickering while the page is loading.
We recommend using the “Move JS Function after Body Tag” option as it has been thoroughly tested and proven to be the most stable choice. It ensures a smoother user experience by preventing background flickering during page loading. Importantly, it does not adversely impact website speed and performance. - First Time Visit Mode: Customize the color scheme of your website for users when they visit your site for the first time. This feature only takes effect when the ‘Dark/Light‘ button on the header is enabled. It anticipates the user’s browser settings and automatically adjusts the website’s color scheme to either light or dark mode during their initial visit.
