Custom theme text color ignored by Text component

[obasille]

Description

Using a theme with a custom text color doesn't change the color the Text component

CodeSandbox/Snack link

https://snack.expo.dev/@zilhk/native-base-theme-custom-text-color

Steps to reproduce

See snack example.

If I understand correctly this is a limitation of how the theme system works (as the default color of the Text component is statically in its default theme) but that seems to defeat the purpose of being able to customize the theme text colors.

NativeBase Version

3.4.18

Platform

• Android
• CRA
• Expo
• iOS
• Next

Other Platform

No response

Additional Information

No response

[Viraj-10]

Hi @obasille, please refer following code for Changing the Text component default color with a theme.

const theme = extendTheme({
  components: {
    Text: {
      baseStyle: {
        color: 'red.100',
      },
    },
  },
});

for better understanding please refer this doc.

[Viraj-10]

Also, use the latest version of native-base. In the snack, you have added color palette named text. refer to this doc to know more.

[obasille]

Hi @Viraj-10, thank you for reply.

I should have been more specific, I was looking to update the theme colors without having to override the component themes. For example changing the primary colors in the theme will change the default colors of a button. I wanted to do the same with the text (and the text color of a button as well actually).

The text component default theme is using text.900 / text.50 colors.
https://github.com/GeekyAnts/NativeBase/blob/master/src/theme/components/text.ts

I did a bit more tests and realized that the issue with my example was that using named colors in my custom theme such as red.100 doesn't work. May be that's worth filing out a new issue about this?

I've updated my example code by replacing the colors with hex values like '#fdf2f8' and got the text color to change :)

See here:
https://snack.expo.dev/@zilhk/native-base-theme-custom-text-color

I don't understand your last comment about using the latest version of native-base though. The snack was using 3.4.11which I updated to 3.4.18 but I suppose there isn't much of difference.

However the documentation doesn't mention this "text" color which is may be what your pointing out. But it does exist and is used by the Native Base default theme. And it can be changed as shown by my updated example :)