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

Ignite: Isolate theme and colours to a react hook, allowing for light/dark theming #8

Open
cdanwards opened this issue Oct 10, 2022 · 1 comment

Comments

@cdanwards
Copy link
Member

I'm working on an app with a dark and light theme. It's, I believe, a fairly common pattern nowadays.
I've found that having a react Hook to be a good approach.

import { useTheme } from '../hooks/';

const makeRootStyles(colors: any): ViewStyle => {
  return {
    backgroundColor: colors.black,
    flex: 1,
  }
}

const Component ....
   const { colors } = useTheme();
   const componentStyles = makeRootStyles(colors)

  return (
    <Screen style={componentStyles} preset="scroll">
      <Text preset="header" text="home" />
    </Screen>

However, if we do that, we lose many of the advantages of the generators, which import directly from the constants.

I'm wondering if there would be a way to implement variable theming with the ignite templates, without losing the advantages of the super helpful generators. Or if it is in the roadmap to isolate the colours / themes into a hook.

@cdanwards
Copy link
Member Author

Duplicate of Ignite issue: infinitered/ignite#1879

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant