How to add Night Mode in Blockpress theme with Button and cookie option

In Greenshift 3.7, we added special cookie option for button. Now, you can save cookie on user click and also add/remove classes to Body which will be attached to this cookie.

One of possible example how flexible this option is ability to add Night mode.

As we use BlockPress theme, it’s FSE based theme and it’s design is controlled by theme.json file which generates CSS variables on frontend.

If you check code of Body tag in console, you will find next

As you see, body background and text color are saved as variables and blocks use these variables to style colors. This is good practice and most of modern themes have something similar.

So, now, we add button block from Greenshift and we added special cookie and special class nightmode. Once button will be clicked, we save cookie and save attached class “nightmode” to body.

Now, we can use this class to revert colors with next code

body.nightmode{--wp--custom--color--white: black; --wp--custom--color--black: white}

So, we just reverting black and white colors. You can add this code to button options in Advanced – Responsive and custom CSS. Don’t forget to enable removing cookie on secondary click. This will turn button to be toggle button. We can even add different styling for such button in options.

«
«

Leave a Reply

Your email address will not be published.