gluestack / gluestack-ui

React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
https://gluestack.io/
MIT License
2.36k stars 114 forks source link

New hook to get theme object by theme name #1866

Open quocluongha opened 6 months ago

quocluongha commented 6 months ago

Description

Description

According to document: here, the only way I can access theme specific tokens is to use styled wrapper function. It would be nice if the library export a hook to retrieve theme object by name.

For example:

// gluestack-ui.config.ts
const config = createConfig({
    theme: {
        themeA: {...},
        themeB: {...}
    }
})

// later on other files
const themeA = useThemeObject("themeA") // <-- Retrieve themeA object
const themeB= useThemeObject("themeB") // <-- Retrieve themeB object

Problem Statement

I think this feature will save a lot of time for styling components that have deeply nested style props like:

<Component options={{ 
    containerStyle: {...}, 
    contentStyle: {...} ,
 }}
/>

I also try to use Property Resolver, but the resolver is only support one token type like colors or fonts.

Proposed Solution or API

The hook somehow works like Tamagui useTheme

Alternatives

No response

Additional Information

No response

Viraj-10 commented 6 months ago

Hey @quocluongha , Thanks for reporting the issue. We will have a look.

bathang313 commented 1 month ago

Has it been fixed yet?