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
const twentyTwentyTheme = {
name: "@frontity/twentytwenty-theme",
roots: {
theme: Theme,
},
state: {
theme: {
mode: 'light',
}
},
actions: {
theme: {
lightMode: ({state}) => {
state.theme.mode = 'light';
},
darkMode: ({state}) => {
state.theme.mode = 'dark';
}
}
}
};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
const Theme = ({ state }) => {
const data = state.source.get(state.router.link);
const { mode } = state.theme;
return (
<>
{/* Add global styles for the whole site */}
<Global styles={globalStyles(state.theme.colors)} />
{/* Global style for color and background-color is added when the theme is light/dark. */}
<Global styles={css`
body {
background-color: ${mode === 'light' ? '#fff' : '#000'};
color: ${mode === 'light' ? '#000' : '#fff'};
}` } />
</>
);
};
export default connect(Theme);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
import React from "react";
import { connect, styled } from "frontity";
import { Icon } from "react-icons-kit";
import { iosSunny as sun } from "react-icons-kit/ionicons/iosSunny";
import { iosMoon as moon } from "react-icons-kit/ionicons/iosMoon";
const ToggleMode = ({ actions, state }) => {
const { lightMode, darkMode } = actions.theme;
const { mode } = state.theme;
return (
<Container>
<ButtonsStyled isSelected={ mode === 'light' } onClick={ lightMode }><Icon size={36} icon={sun} /></ButtonsStyled>
<ButtonsStyled isSelected={ mode === 'dark' } onClick={ darkMode }><Icon size={36} icon={moon}/></ButtonsStyled>
</Container>
)
}
export default connect(ToggleMode);
const Container = styled.div`
display: flex;
`;
const ButtonsStyled = styled.button`
width: 50px;
height: 50px;
text-align: center;
border:0px;
color:inherit;
background-color: ${({ isSelected }) => (isSelected ? '#a5a5a5': 'transparent')};
`;
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
import ToggleMode from "./toggle-mode";
const Header = ({ state }) => {
return (
<>
<HeaderNavigationWrapper>
{/* Desktop navigation links */}
<Navigation />
{/* Toggle buttons */}
<ToggleMode />
</HeaderNavigationWrapper>
</>
);
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:-
Dark Mode:-
Read: When to use flex or grid
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.
You may also like
WooCommerce: Boost conversion with Pre-Sales activities
Conversion means users who are converted from visitors to customers for your e-commerce website. You...
WooCommerce: Conversion rate
As per today’s situation, about 5+ million e-commerce websites are using the WooCommerce platform. To survive and thrive, you need to know where you stand in this competitive and crowded community. ...
Introducing Twenty Twenty-Two – first default block theme!
The WordPress default theme twenty twenty-two with WordPress...
