How to change font color of unselected Chakra UI tabs?

user_6900808 0
Viewed 213

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.

chakra-ui reactjs
1 Answers

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

user_193911140
Related