Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add fallback theme when no ThemeProviders on top #7

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

js-jegan
Copy link

@js-jegan js-jegan commented Oct 1, 2021

Context

  • There are cases when there is no ThemeProviders on top, in that case we should enable a fallback mechanism where it defaults to a theme.
  • This feature enables the styled-theming to be flexi-independent of any libraries like ThemeProvider
  • Please refer to the examples in the Readme for the same.
  • Unit tests(in progress...)

Example

import styled, { ThemeProvider } from 'styled-components';
import theme from 'styled-theming';
const backgroundColor = theme('mode', { light: 'lightgray', dark: 'darkgray' }, 'light');
const Button = styled.button`
  background-color: ${backgroundColor};
`;
// Example #1 - bg color of this will be lightgray because no ThemeProvider as it's ancestors
<Button /> 
// Example #2 - bg color of this will be darkgray because it has ThemeProvider with a valid theme prop
<ThemeProvider theme={{ mode:'dark' }}>
  <Button />
</ThemeProvider>

@js-jegan
Copy link
Author

js-jegan commented Oct 1, 2021

cc @jamiebuilds

@js-jegan js-jegan marked this pull request as ready for review November 9, 2021 19:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant