How can specify the palette for all `colorMode` at once

[usedlife]

Description

When I set different text colors:

<Text
  sx={{
    _dark: {
      color: 'textDark1',
    },
    _light: {
      color: 'textLight1',
    },
  }}>
  Text - 1
</Text>

<Text
  sx={{
    _dark: {
      color: 'textDark2',
    },
    _light: {
      color: 'textLight2',
    },
  }}>
  Text - 2
</Text>

There may be an easier way to write it.

But I expect the code:

<Text color="$text1">Text - 1</Text>
<Text color="$text2">Text - 2</Text>

We can specify the palette for all color modes at once under the colorMode (dark and light or more) node. Like MUI Color Shcemes

Problem Statement

My development mindset is used to mui. If the colorMode of the project is more than just dark and light, do we need to adapt more code:

<Text
  sx={{
    _dark: {
      color: 'textDark1',
    },
  _darkPro: {
      color: 'textDarkPro1',
    },
    _light: {
      color: 'textLight1',
    },
  _lightPro: {
      color: 'textPro1',
    },
  }}>
  Text - 1
</Text>

Proposed Solution or API

https://mui.com/material-ui/experimental-api/css-theme-variables/customization/#color-schemes

Alternatives

No response

Additional Information

No response

[Viraj-10]

Hey @usedlife, We are working on this feature. You will able to create different themes.

[usedlife]

Hey @usedlife, We are working on this feature. You will able to create different themes.

@Viraj-10 By the way, why the config data changes but the view is not updated. I can't find the answer in the source code.

// Be executed somewhere
export let setColorMode: React.Dispatch<React.SetStateAction<COLORMODES>>;

export const ThemeProvider = (props: PropsType): React.JSX.Element => {
  const [colorMode, _setColorMode] = useState<COLORMODES>('dark');
  setColorMode = _setColorMode;

// use dynamic colorMode returns different color configurations  
const config = useMemo(() => createUIConfig({ colorMode }), [colorMode]);

  return (
    <GluestackUIProvider
      colorMode={colorMode}
      config={{
        ...config,
        components: componentsConfig,
      }}>
      {props.children}
    </GluestackUIProvider>
  );
};

[xavier-villelegier]

Hey hey @Viraj-10 and @Gluant101, is there any way to do this now ? 👀

On my side, I would also expect to have a $background0 -> 900 token and a $foreground or $text0->900 that automatically takes the light or dark values (NextUI does it pretty well) so that we don't have to provide $dark-bgColor for every single component

Also, why backgroundDark/backgroundLight and textDark/textLight tokens have the exact same values here? I would expect them to be kind of inverted to at least be able to to $background${colorMode}100 or something like this

Is there any other way to achieve having one bgColor to rule them all? Are we forced to eject theme and explicitly provide a dark theme having opposite the values of light for background and text? Having a way to specify default props would also work as I could make the Text having color="$textLight100" $dark-color="$textDark800" by default for example.

The endgame would be to have something like this:

<Card bgColor="$background100">
  <Text color="$text100">Hey hey</Text>
</Card>

In light it would be black text on white card, and dark would be white text on black card