gluestack-ui icon indicating copy to clipboard operation
gluestack-ui copied to clipboard

New hook to get theme object by theme name

Open quocluongha opened this issue 11 months ago • 2 comments

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

quocluongha avatar Mar 01 '24 05:03 quocluongha