CODEWITHSUNDEEP
reactjschakra-ui
Sami
Sami

Reputation: 486

How to change font color of unselected Chakra UI tabs?

I've been searching this for a while now and have no clue yet how to change the font color of the unselected Chakra UI tabs.

I've Light and dark mode. The tabs show fine on light mode as can see below

enter image description here

But, for dark mode the font color of unselected tab is barely visible as below enter image description here

So, I want to change the font color of this unselected tab in Chakra UI.

Upvotes: 2

Views: 1540

Answers (2)

CPatel
CPatel

Reputation: 1

Not sure if this was updated recently, but you can just use the color prop on the tab and that should do the trick.

Example:

    <Tab color='gray.200' >Hello</Tab>

Upvotes: 0

byoda
byoda

Reputation: 171

Option 1: Style props + custom component

const unselectedColor = useColorModeValue(unselectedColorLightTheme, unselectedColorDarkTheme);
const selectedColor = useColorModeValue(selectedColorLightTheme, selectedColorDarkTheme);

...

<Tab color={unselectedColor} _selected={{ color: selectedColor }}>

To make this more reusable you can create a custom Tab component

const CustomTab = React.forwardRef((props, ref) => {
    const tabProps = useTab({ ...props, ref })
    const styles = useMultiStyleConfig('Tabs', tabProps);

    const unselectedColor = useColorModeValue(unselectedColorLightTheme, unselectedColorDarkTheme);
    const selectedColor = useColorModeValue(selectedColorLightTheme, selectedColorDarkTheme);

    // If "__css" doesn't work, use "sx"
    return <Button {...tabProps} __css={styles.tab} color={unselectedColor} _selected={{ color: selectedColor }} />
}

Option 2: Customizing single components

const theme = extendTheme({
    components: {
        Tabs: {
            baseStyle: (props) => ({
                tab: {
                    color: mode(unselectedColorLightTheme, unselectedColorDarkTheme)(props);
                    _selected: {
                        color: mode(selectedColorLightTheme, selectedColorDarkTheme)(props);
                    }
                },
                // Apart from "tab", you can also customize "tabpanels", "tabpanel", and "tablist"
            }),
            ...
        }
    }
})

Then you can use this normally like this:

<Tabs>
  <TabList>
    <Tab>One</Tab>
    <Tab>Two</Tab>
  </TabList>
  <TabPanels>
    <TabPanel>1</TabPanel>
    <TabPanel>2</TabPanel>
  </TabPanels>
</Tabs>

useColorModeValue - change color based on color mode

_selected

mode - similar to useColorModeValue. Couldn't find the docs for this, but here's a usage example

Upvotes: 2

Related Questions