Mantine UI – Using theme colors

How to use theme colors in mantine UI for styling in css, custom styles

          borderColor: theme.colors.yellow[6],

Full Example

import { createStyles } from '@mantine/core';

export const useStyles = createStyles((theme) => ({

    inputBox: {
        width: '90vw',
        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
        borderRadius: theme.radius.md,
        transition: 'background-color 100ms ease',
        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[8] : theme.white,
        padding: `6px ${theme.spacing.sm}`,
        borderColor: theme.colors.blue[9],
        borderWidth: '1px',
        borderStyle: 'solid',
  
        '&:focus-within': {
          borderColor: theme.colors.yellow[6],
        },
      },


}))

Using Mantine UI theme colors inside mantine components

color="dark.0"

Full example

    <Box w={120}>
          <Button
            color={response === LDResponse.Like ? "yellow" : "dark.0"}
            size="lg"
            px="md"
            fullWidth 
            radius="md"
            leftIcon={<IconThumbUpFilled /> }
            onClick={() => updateResponse(LDResponse.Like)}
          >
            Like
          </Button>
      </Box>