Mantine colors generator
Mantine colors generator
맨틴 색상 생성기는 기본 색상을 입력하고 10단계 색상 배열(colors tuple)을 얻는 도구예요. 생성된 배열을 테마의 colors에 등록해 어떤 컴포넌트에서도 사용할 수 있어요.
출처: 문서
본문
기본 색상 입력
기본 색상(base color)을 입력하면 그 색을 기준으로 0–9까지 10단계의 색상 배열이 자동 생성돼요.
- 0Step
#ecf4ff - 1Step
#dce4f5 - 2Step
#b9c7e2 - 3Step
#94a8d0 - 4Step
#748dc0 - 5Step
#5f7cb7 - 6Step
#5474b4 - 7Step
#44639f - 8Step
#3a5890 - 9Step
#2c4b80
각 단계는 미리 보기에서 Filled/Light/Outline/Subtle 배리언트 버튼으로 확인할 수 있어요.
Colors array
생성된 색상 배열은 아래와 같이 사용할 수 있어요.
[
"#ecf4ff",
"#dce4f5",
"#b9c7e2",
"#94a8d0",
"#748dc0",
"#5f7cb7",
"#5474b4",
"#44639f",
"#3a5890",
"#2c4b80"
]
Usage with MantineProvider
생성된 배열을 MantineColorsTuple 타입으로 캐스팅해 테마의 colors와 primaryColor에 등록하면 앱 전체에서 사용할 수 있어요.
import { MantineProvider, createTheme, MantineColorsTuple } from '@mantine/core';
const myColor: MantineColorsTuple = [
'#ecf4ff',
'#dce4f5',
'#b9c7e2',
'#94a8d0',
'#748dc0',
'#5f7cb7',
'#5474b4',
'#44639f',
'#3a5890',
'#2c4b80'
];
const theme = createTheme({
colors: {
myColor,
},
primaryColor: 'myColor',
});
function Demo() {
return (
<MantineProvider theme={theme}>
{/* Your app here */}
</MantineProvider>
);
}