8th Jul 2021

How to implement dark mode in frontity

Wordpress

Written By, Kinnari Vasavada

Overview

Nowadays, dark mode integration is very popular on many websites. If you are eager to implement dark mode in frontity as well, let’s get started with the blog as it will help you to implement dark mode and light mode functionality effortlessly.

1. Add theme modes for State and actions

I have used the twentytwentyTheme here, you can use any other theme of your choice and add the below code as per your theme settings.

To implement dark mode in frontity, open your index.js file and place this code where you find, state (defines global variable), and actions (functions that modifies the defined variables)

Index.js file path: packages/twentytwenty-theme/src/index.js

2. Change color of your site with the help of modes

Now add the functionalities to get the mode from your state in the components folder of your theme and open the index.js file.

Index file path:- packages/twentytwenty-theme/src/components/index.js

3. Toggle light and dark mode

Now, we will create a component that allows you to change from one mode to another. Here I have installed “react-icons-kit” for the icons of Sun and moon, you can use Svg image or any other icons library as per your requirement.

npm i react-icons-kit

Toggle mode file: packages/twentytwenty-theme/src/components/toggle-mode.js

4. Add ‘ToggleMode’ component in your header file

Below code structure is for twentytwentyTheme, you can add the <ToggleMode /> component in your file according to your requirement. Here I have wrapped the Navigation and ToggleMode in a header wrapper.

Header file:- packages/twentytwenty-theme/src/components/header.js

Once you have added the above code in your respective files, your dark mode is implemented in simple steps. By default, the Sun icon will remain highlighted as the default theme is light but when you will click on the Moon icon, dark mode will be activated.

Below are the screenshots of the output of toggle Light and Dark mode.

Light mode:-

frontity-light-mode

Dark Mode:-

Conclusion

I hope this article will help you to integrate dark mode and light mode functionality in frontity. Stay connected to know more about interesting features of Frontity.

Written By,

Web Designer at Yudiz Solutions Pvt. Ltd