question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using state for the theme in ThemeProvider

See original GitHub issue

The 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:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Andaristcommented, Nov 21, 2020

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.

0reactions
salientknightcommented, Mar 26, 2021

@Andarist I don’t get it. The example you provided doesn’t appear to use emotion.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found