Using state for the theme in ThemeProvider
See original GitHub issueThe problem
Changing the theme using state. Although its possible to do it requires either another context or passing state down via props.
A use case would be switching a theme to a dark mode or a more accessible theme.
Proposed solution
Allow for the ThemeProvider to take either a theme or a theme and a setTheme returned from useState
.
Alternative solutions
Set the state and apply to another provider that would be used for setting the theme.
Additional context
If this is something that sounds like a good addition I’m happy to make a PR.
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (2 by maintainers)
Top Results From Across the Web
A Dark Mode Toggle with React and ThemeProvider
In this tutorial, we're going to build a toggle that allows users to switch between light and dark modes, using a <ThemeProvider wrapper ......
Read more >Build a Custom Theme Provider Using React's Context API
Here we declare isDarkTheme state and set it to false by default. Then we have a toggleTheme() function that essentially flips the value...
Read more >Build a React theme switcher app with styled-components
In this tutorial, we demonstrate how to build a custom theme switcher for a Game of Thrones-themed React app using styled-components.
Read more >Implementing a dark theme toggle with react-redux and styled ...
We need some way to connect the state in our redux store to the ThemeProvider wrapped around our app. To keep things clear,...
Read more >Adding themes to a React app using styled-components | Blog
We will store the current value in a React state variable. src/app/App.js import React, { useState } from 'react' import { ThemeProvider }...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This can be easily handled by composition: https://codesandbox.io/s/adoring-pond-39vw0 (you have probably posted similar solutions as part of the 2 first demos), so I don’t think this is something that we should provide. Especially that this would most likely be a breaking change now and would require some runtime costs for all users that do not with to use this.
@Andarist I don’t get it. The example you provided doesn’t appear to use emotion.