DEV Community

Cover image for Dark-Light Theme (react-redux)
Zain Ahmed
Zain Ahmed

Posted on

1

Dark-Light Theme (react-redux)

Logic : The logic is simple, we have a switch button which have 2 stats true and false, false is for white theme and true is for dark theme , we ll have a key of toggleTheme in redux, (you can name it any) , we have a reducer or update its state and action function for dispatch the reducer type for update state, we have a config file where you ll define the theme properties for LIGHT and DARK theme, like textColor, backgoundColor, borderColor, and etc, i also attach my basic theme objects for both ,

Alt Text

Alt Text

Alt Text

these are files for redux toggleFlag we have state in reducer and switch case for update state, we have action for dispatch type to reducer,

Alt Text

here it all , hope you learn from this, support me on my youtube channel if you like this artical.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay