How to enable day and night mode at the frontend

Home » Docs » How to enable day and night mode at the frontend

Skinny’s site color scheme feature comes enabled by default with two palettes namely Light and Dark, you can customize these palettes to your preferred colors and have them toggle via a front-end toggle available at the header.

Customise the light and dark color palettes

To customize the palettes for each of the color schemes, from your wp-admin/Dashboard panel goto Appearance >> Customize and then Colors tab. Here you’ll be able to select and preview changes to the respective color scheme.

Here’s a screenshot of the Color Scheme controls available at Customizer >> Colors tab.

Test that it works well by switching palettes in several pages

Switching between these two color schemes will toggle their respective color controls and changes/previews should be a cakewalk following this. You can also try previewing other pages or theme buttons to adjust their color and hover behaviors.

Here’s a screenshot displaying color defaults set for the Dark color scheme palette.

Toggle at the header panel

You can also enable the front-end toggle available at the header, to enable this from the WordPress Customizer go to Theme Options >> Header tab and enable the Light / Dark mode switch available at the very bottom.

Once you toggle the Light / Dark mode switch from the above-shown Header tab, a color scheme toggle icon will be displayed at the very top right of the site header.

Note: This frontend color scheme toggle comes disabled by default in the Customizer, for color control live previews in the Colors tab.

Reset color scheme

If you ever wish to reset the color schemes back to their defaults, you can always find the Reset color scheme button at the very bottom of the Colors tab.

Last updated on November 8, 2023

Search docs

In this category