Is there a way to get the token values / theme properties so it can be used with javascirpt functions

[ReangeloJ]

Hey everyone,

I would like to be able to use javascript functions in my css for example for dynamically deciding if text should be black or white. Logically, I cant use the tokens in my functions as this would just render a string and not a color. I have a global ThemeContext setup. So I am able to get the theme colors using my useTheme hook. However, I would have to create my styled component inside my component so it can receive the theme styles. I have a feeling this is not perse the right way to go and was wondering if there are other ways. Thanks in advance :)

const BaseButton = styled('button', {
    backgroundColor:'$primary',
    color: returnDarkOrLightBasedOnBgColor($primary, $fontDark, $fontLight)  //How do I get the values of my tokens?
});

function Button(props: BaseButton) {
    const {theme} = useTheme();
    return (
        <BaseButton {...props}>
            {props.children}
        </BaseButton>
    );
}

Solution: 1

function Button(props: BaseButton) {
    const {theme} = useTheme();

const BaseButton = styled('button', {
    backgroundColor:'$primary',
    color: returnDarkOrLightBasedOnBgColor(theme.color.primary, theme.color.fontDark, theme.color.fontLight)
});

    return (
        <BaseButton {...props}>
            {props.children}
        </BaseButton>
    );
}

[joseDaKing]

If you want to access the theme object you can do it, look at the createStitches

[Jackardios]

@ReangeloJ Tokens are JS objects, you can access their values using the value property
returnDarkOrLightBasedOnBgColor(theme.color.primary.value, theme.color.fontDark.value, theme.color.fontLight.value)

[marconucara]

If you do as stated in the previous answers you will only get the default theme, or a specific theme, you will not get the correct theme based on the one selected/applied at that time. I think the best way is to do as they did in next ui, create your own theme context with standard react syntax:

https://github.com/nextui-org/nextui/search?q=themecontext

Alternatively you could look up the currently applied theme each time you need a token, but it seems inconvenient if you can only do it once when the theme switch happens.