Forgot invoking mode func in content/docs/components/list/theming.mdx

[olci34]

Subject

Function

Description

In the example given under "Customizing the default theme" header in content/docs/components/list/theming.mdx below, mode('blue.500', 'blue.200') for list icon styling is not invoked, which makes the icon color configuration ineffective.

import {
  defineStyle,
  createMultiStyleConfigHelpers,
} from '@chakra-ui/styled-system'
import { listAnatomy as parts } from '@chakra-ui/anatomy'
import { mode } from '@chakra-ui/theme-tools'

const { definePartsStyle, defineMultiStyleConfig } =
  createMultiStyleConfigHelpers(parts.keys)

const baseStyle = definePartsStyle((props) => ({
  // define the part you're going to style
  container: {
    listStylePos: 'inside', // change listStylePos to inside
    boxShadow: 'md', // change boxShadow to md
  },
  item: {
    p: 2, // set padding to 2
    '&::marker': {
      // change color for marker
      color: mode('green.500', 'green.200')(props),
    },
  },
  icon: {
    //change color for icon
    color: mode('blue.500', 'blue.200'),
  },
}))

export const listTheme = defineMultiStyleConfig({ baseStyle })```