색상

색상 (Colors)

Mantine은 기본 theme에서 몇 가지 추가 사항과 함께 open-color를 사용해요. 각 색상은 10개의 shade를 가져요.

색상은 theme 객체에 문자열 배열로 노출돼요. 색상 이름과 인덱스(0-9)로 색상 shade에 접근할 수 있어요; 인덱스가 클수록 색상이 더 어두워요:

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

function Demo() {
  const theme = useMantineTheme();

  return <div style={{ color: theme.colors.blue[6] }}>This is a blue theme</div>;
}

색상은 CSS variables로도 노출돼요:

.demo {
  color: var(--mantine-color-red-5);
  background: var(--mantine-color-grape-9);
  border: 1px solid var(--mantine-color-blue-1);
}

출처: 문서

본문

추가 색상 추가

theme.colors 객체에 원하는 만큼 추가 색상을 넣을 수 있어요. 그러면 color prop을 지원하는 모든 컴포넌트, 예를 들어 Button, Badge, Switch에서 이 색상들을 사용할 수 있어요.

import { Group, Button, MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  colors: {
    'ocean-blue': ['#7AD1DD', '#5FCCDB', '#44CADC', '#2AC9DE', '#1AC2D9', '#11B7CD', '#09ADC3', '#0E99AC', '#128797', '#147885'],
    'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Group>
        <Button color="ocean-blue">Ocean blue button</Button>
        <Button color="bright-pink">Bright pink button</Button>
      </Group>
    </MantineProvider>
  );
}

색상당 10개의 shade

색상 override는 색상당 최소 10개의 shade를 포함해야 해요. 그렇지 않으면 TypeScript 오류가 발생하고 일부 variants에 적절한 색상이 없을 거예요. 색상 값이 하나만 있다면 나머지 색상을 수동으로 고르거나 colors generator 도구를 사용할 수 있어요.

색상당 10개 이상의 shade를 추가할 수 있어요: 이 값들은 기본 색상 resolver로는 Mantine 컴포넌트에서 사용되지 않지만, 예를 들어 color="blue.11"처럼 인덱스로 참조할 수는 있어요.

Virtual 색상

Virtual 색상은 light와 dark 색상 체계에서 값이 달라야 하는 특별한 색상이에요. Virtual 색상을 정의하려면 다음 속성을 가진 객체를 단일 인자로 받는 virtualColor 함수를 사용해요:

• name – 색상 이름, theme.colors 객체의 키와 같아야 해요

• light – light 색상 체계를 위한 theme.colors 객체의 키

• dark – dark 색상 체계를 위한 theme.colors 객체의 키

데모를 보려면 light와 dark 색상 체계를 전환해 보세요(Ctrl + J):

import { createTheme, MantineProvider, virtualColor } from '@mantine/core';
import { Demo } from './Demo';

const theme = createTheme({
  colors: {
    primary: virtualColor({
      name: 'primary',
      dark: 'pink',
      light: 'cyan',
    }),
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      <Demo />
    </MantineProvider>
  );
}

Virtual 색상은 autoContrast를 지원해요: filled 컴포넌트의 텍스트 색상은 해석된 배경색에 따라 각 색상 체계에 대해 별도로 계산돼요. theme이나 컴포넌트에서 autoContrast를 활성화하고 light와 dark 색상 체계 사이를 전환(Ctrl + J)하면 텍스트 색상이 기본 virtual 색상에 맞게 조정되는 것을 볼 수 있어요:

import { Button, colorsTuple, createTheme, MantineProvider, virtualColor } from '@mantine/core';
import { Demo } from './Demo';

const theme = createTheme({
  colors: {
    white: colorsTuple('#FFFFFF'),
    black: colorsTuple('#000000'),
    adaptive: virtualColor({
      name: 'adaptive',
      dark: 'white',
      light: 'black',
    }),
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      <Demo />
    </MantineProvider>
  );
}

colorsTuple

colorsTuple 함수를 사용해:

• 하나의 색상을 모든 shade에 대해 같은 색상으로 사용하기

• 동적 문자열 배열을 Mantine 색상 튜플로 변환하기(배열은 여전히 10개의 값을 가져야 해요)

import { colorsTuple, createTheme } from '@mantine/core';

const theme = createTheme({
  colors: {
    custom: colorsTuple('#FFC0CB'),
    dynamic: colorsTuple(
      Array.from({ length: 10 }, (_, index) => '#FFC0CB')
    ),
  },
});

지원되는 색상 형식

theme.colors에서 다음 색상 형식을 사용할 수 있어요:

• HEX: #fff, #ffffff

• RGB: rgb(255, 255, 255), rgba(255, 255, 255, 0.5)

• HSL: hsl(0, 0%, 100%), hsla(0, 0%, 100%, 0.5)

• OKLCH: oklch(96.27% 0.0217 238.66), oklch(96.27% 0.0217 238.66 / 0.5)

theme에 oklch 색상을 추가하는 예시:

import { MantineProvider, createTheme, Group, Button } from '@mantine/core';

const theme = createTheme({
  colors: {
    'oklch-blue': [
      'oklch(96.27% 0.0217 238.66)',
      'oklch(92.66% 0.0429 240.01)',
      'oklch(86.02% 0.0827 241.66)',
      'oklch(78.2% 0.13 243.83)',
      'oklch(71.8% 0.1686 246.06)',
      'oklch(66.89% 0.1986 248.32)',
      'oklch(62.59% 0.2247 250.29)',
      'oklch(58.56% 0.2209 251.26)',
      'oklch(54.26% 0.2067 251.67)',
      'oklch(49.72% 0.1888 251.59)',
    ],
  }
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Group>
        <Button color="oklch-blue" variant="filled">Filled</Button>
        <Button color="oklch-blue" variant="outline">Outline</Button>
        <Button color="oklch-blue" variant="light">Light</Button>
      </Group>
    </MantineProvider>
  );
}

primaryColor

theme.primaryColor는 theme.colors의 키이며 다음에 사용돼요:

• color prop을 지원하는 대부분의 컴포넌트의 기본값으로

• 기본 focus ring outline 색상 설정에

import { Group, Button, MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  primaryColor: 'bright-pink',
  colors: {
    'bright-pink': ['#F0BBDD', '#ED9BCF', '#EC7CC3', '#ED5DB8', '#F13EAF', '#F71FA7', '#FF00A1', '#E00890', '#C50E82', '#AD1374'],
  },
});

function Demo() {
  return (
    <MantineProvider theme={theme}>
      <Group>
        <Button>Primary button</Button>
        <Button color="blue">Blue button</Button>
      </Group>
    </MantineProvider>
  );
}

theme.primaryColor의 CSS 색상 값

theme.primaryColor의 값은 theme.colors 객체의 키여야 해요. 예를 들어 blue, orange, green. CSS 색상 값을 할당할 수 없어요; 예를 들어 다음 코드는 theme 병합 중 오류를 던져요:

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

// ❌ Throws an error
const theme = { primaryColor: '#ff0000' };

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}

primaryShade

theme.primaryShade는 0부터 9까지의 숫자예요. color prop이 있는 컴포넌트에 어떤 shade가 사용될지 결정해요.

import { MantineProvider, Button, Group } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider theme={{ primaryShade: 6 }}>
      <Group>
        <Button variant="filled">Filled</Button>
        <Button variant="light">Light</Button>
        <Button variant="outline">Outline</Button>
      </Group>
    </MantineProvider>
  );
}

dark와 light 색상 체계에 대해 primary shade를 별도로 커스터마이즈할 수도 있어요:

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

function Demo() {
  return (
    <MantineProvider
      theme={{ primaryShade: { light: 7, dark: 3 } }}
    >
      {/* Your app here */}
    </MantineProvider>
  );
}

Color prop

색상을 바꿀 수 있는 컴포넌트는 color prop을 가져요. 이 prop은 다음 값을 지원해요:

• theme.colors의 키, 예를 들어 blue 또는 green

• 색상 인덱스가 있는 theme.colors의 키, 예를 들어 blue.5 또는 green.9

• CSS 색상 값, 예를 들어 #fff 또는 rgba(0, 0, 0, 0.5)

import { Group, Button, Text } from '@mantine/core';

function Demo() {
  return (
    <>
      <Text fw={700}>Filled variant</Text>
      <Group>
        <Button color="blue">Theme color</Button>
        <Button color="#FF00A1">Hex color</Button>
      </Group>

      <Text fw={700}>Light variant</Text>
      <Group>
        <Button color="blue" variant="light">Theme color</Button>
        <Button color="#FF00A1" variant="light">Hex color</Button>
      </Group>

      <Text fw={700}>Outline variant</Text>
      <Group>
        <Button color="blue" variant="outline">Theme color</Button>
        <Button color="#FF00A1" variant="outline">Hex color</Button>
      </Group>
    </>
  );
}

색상 인덱스 참조

color prop과 style props의 c prop처럼 색상을 인덱스로 참조할 수 있어요:

import { Button, Text } from '@mantine/core';

function Demo() {
  return (
    <>
      <Text c="blue.6">Text with blue.6 color</Text>
      <Button color="blue.6">Button</Button>
    </>
  );
}

color와 c props의 차이

color prop은 컴포넌트의 여러 CSS 속성을 제어하는 데 사용돼요. 이 속성들은 컴포넌트마다 다를 수 있지만, 보통 color prop은 background, color, border-color CSS 속성을 제어해요. 예를 들어 Button 컴포넌트에 color="#C3FF36"(variant="filled"와 함께)을 설정하면 다음 CSS 속성을 설정해요:

• background-color를 #C3FF36으로

• 버튼이 hover될 때 background-color를 #B0E631(#C3FF36을 10% 어둡게)로

• color를 var(--mantine-color-white)로

• border-color를 transparent로

c는 style prop이며 단일 CSS 속성 color(텍스트 색상)를 설정하는 데 담당해요. 두 props를 결합해 텍스트와 배경 사이의 대비를 더 좋게 만들 수 있어요. 다음 예시에서:

• color prop은 background: #C3FF36과 color: var(--mantine-color-white)를 설정해요

• c prop은 색상 스타일을 color: var(--mantine-color-black)로 재정의해요

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

function Demo() {
  return (
    <Button color="#C3FF36" c="#000000">
      Button with color and c props
    </Button>
  );
}

Variant 색상 resolver

theme.variantColorResolver는 Alert, Avatar, Button, Badge, ActionIcon 컴포넌트의 다른 variants에서 어떤 색상이 사용될지 결정하는 데 사용되는 함수예요.

다음 속성을 가진 객체 인자를 받아요:

interface VariantColorsResolverInput {
  /** `color` prop passed to component */
  color: MantineColor | undefined;

  /** `variant` prop passed to component */
  variant: string;

  /** `gradient` prop passed to component, used only for gradient variant by default */
  gradient?: MantineGradient;

  /** Theme object */
  theme: MantineTheme;
}

theme.variantColorResolver는 다음 속성을 가진 객체를 반환해야 해요:

interface VariantColorResolverResult {
  background: string;
  hover: string;
  color: string;
  border: string;
}

theme.variantColorResolver를 사용해 기본 variants의 색상 처리를 커스터마이즈하거나 새 variants에 대한 지원을 추가할 수 있어요:

import {
  Button,
  Group,
  MantineProvider,
  defaultVariantColorsResolver,
  VariantColorsResolver,
  parseThemeColor,
  rgba,
  darken,
} from '@mantine/core';

const variantColorResolver: VariantColorsResolver = (input) => {
  const defaultResolvedColors = defaultVariantColorsResolver(input);
  const parsedColor = parseThemeColor({
    color: input.color || input.theme.primaryColor,
    theme: input.theme,
  });

  // Override some properties for variant
  if (parsedColor.isThemeColor && parsedColor.color === 'lime' && input.variant === 'filled') {
    return {
      ...defaultResolvedColors,
      color: 'var(--mantine-color-black)',
      hoverColor: 'var(--mantine-color-black)',
    };
  }

  // Completely override variant
  if (input.variant === 'light') {
    return {
      background: rgba(parsedColor.value, 0.1),
      hover: rgba(parsedColor.value, 0.15),
      border: `1px solid ${parsedColor.value}`,
      color: darken(parsedColor.value, 0.1),
    };
  }

  // Add new variants support
  if (input.variant === 'danger') {
    return {
      background: 'var(--mantine-color-red-9)',
      hover: 'var(--mantine-color-red-8)',
      color: 'var(--mantine-color-white)',
      border: 'none',
    };
  }

  return defaultResolvedColors;
};

function Demo() {
  return (
    <MantineProvider theme={{ variantColorResolver }}>
      <Group>
        <Button color="lime" variant="filled">Lime filled button</Button>
        <Button color="orange" variant="light">Orange light button</Button>
        <Button variant="danger">Danger button</Button>
      </Group>
    </MantineProvider>
  );
}

색상 생성

colors generator를 사용해 단일 값에 기반한 10개의 색상 shade를 생성하거나, @mantine/colors-generator 패키지를 설치해 애플리케이션에서 동적 색상을 생성할 수 있어요:

yarn add chroma-js @mantine/colors-generator

이 패키지는 색상 값을 받아 10개 shade 배열을 반환하는 generateColors 함수를 내보내요. generateColors 함수는 더 어두운 색상(blue, violet, red)에서 가장 잘 동작하고 더 밝은 색상(yellow, teal, orange)에서는 대비가 낮은 색상을 만들 수 있다는 점에 주의하세요. 보통 대비 문제를 피하려면 색상을 미리 생성하는 것이 좋아요.

import { generateColors } from '@mantine/colors-generator';
import { MantineProvider } from '@mantine/core';

const theme = {
  colors: {
    'dynamic-color': generateColors('#FFC0CB'),
  },
};

function Demo() {
  return (
    <MantineProvider theme={theme}>
      {/* Your app here */}
    </MantineProvider>
  );
}

기본 색상

색상	shade	값
dark	6	#2e2e2e
gray	6	#868e96
red	6	#fa5252
pink	6	#e64980
grape	6	#be4bdb
violet	6	#7950f2
indigo	6	#4c6ef5
blue	6	#228be6
cyan	6	#15aabf
teal	6	#12b886
green	6	#40c057
lime	6	#82c91e
yellow	6	#fab005
orange	6	#fd7e14

커스텀 색상 타입 추가

TypeScript는 theme에 접근할 때 Mantine의 기본 색상만 자동 완성해요. 커스텀 색상을 MantineColor 타입에 추가하려면 TypeScript 모듈 선언을 사용할 수 있어요.

import {
  DefaultMantineColor,
  MantineColorsTuple,
} from '@mantine/core';

type ExtendedCustomColors =
  | 'primaryColorName'
  | 'secondaryColorName'
  | DefaultMantineColor;

declare module '@mantine/core' {
  export interface MantineThemeColorsOverride {
    colors: Record<ExtendedCustomColors, MantineColorsTuple>;
  }
}

더 알아보기 (Learn more)

• Theme object
• Color schemes