Skip to content

Timonwa/theme-switching-with-react-and-styled-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Theme Switching using Styled Components in ReactJs. ✍️

This is the code example for my article on Build a React theme switcher app with styled-components for LogRocket. Here is the live demo.

Visit my blog, Timonwa's Notes, for awesome technical content like articles, code snippets, tech goodies, community projects, and more.

Summary

Using the ThemeProvider, a wrapper component available in styled-components, we can quickly set up multiple custom themes in React and switch between them with ease.

To demonstrate this, we’ll build a React app featuring quotes from popular characters from Game of Thrones. This tutorial will show how to create styled components and multiple themes for the app, change the theme with a click of a button, and save the theme in local storage.

Breakdown:

  • Why use styled-components for theme switching?
  • Prerequisites
  • Setting up the React app
  • Creating the styled components
  • Creating multiple themes
  • Adding themes with ThemeProvider
  • Switching themes
  • Saving the theme in local storage

Please give this repo a ⭐ if it was helpful to you.

short clip of the theme switchhing app