Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/timonwa/theme-switching-with-react-and-styled-components
Build a React theme switcher app with styled-components
https://github.com/timonwa/theme-switching-with-react-and-styled-components
article article-publisher articles react reactjs styled-components theme-development theme-switcher themes writing-articles
Last synced: about 21 hours ago
JSON representation
Build a React theme switcher app with styled-components
- Host: GitHub
- URL: https://github.com/timonwa/theme-switching-with-react-and-styled-components
- Owner: Timonwa
- License: mit
- Created: 2022-03-23T18:27:29.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-02T21:02:35.000Z (about 1 year ago)
- Last Synced: 2023-10-03T05:16:41.623Z (about 1 year ago)
- Topics: article, article-publisher, articles, react, reactjs, styled-components, theme-development, theme-switcher, themes, writing-articles
- Language: JavaScript
- Homepage: https://theme-switching.vercel.app
- Size: 2.43 MB
- Stars: 13
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Theme Switching using Styled Components in ReactJs. :writing_hand:
This is the code example for my article on [Build a React theme switcher app with styled-components](https://blog.timonwa.com/build-react-theme-switcher-app-styled-components) for LogRocket. Here is the [live demo](https://theme-switching.vercel.app).
Visit my blog, [Timonwa's Notes](https://blog.timonwa.com), 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.
