mantine에서 theme color를 생성해서 사용할 수 있음
0~9번의 번호로 각 color별 색 선택 가능
import { Badge, Button, MantineProvider } from '@mantine/core';
function Demo() {
return (
<MantineProvider
theme={{
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'],
},
}}
>
<Button color="ocean-blue">Ocean blue button</Button>
<Badge color="bright-pink" variant="filled">Bright pink badge</Badge>
</MantineProvider>
);
}
const colors = {
Netflix: [
'#ffe2e6',
'#ffb3b8',
'#fc8389',
'#f9525a',
'#D24E55',
'#f6222d',
'#DF2730',
'#E50914', // default
'#ad040e',
'#7c0109',
],
Watcha: [
'#ffe1ef',
'#ffb1cc',
'#ff7eaa',
'#DC5F88',
'#ff4c8e',
'#ff4c88',
'#E93571',
'#FF0558', // default
'#e6004c',
'#b4003b',
],
'Amazon Prime Video': [
'#d7fcff',
'#abedff',
'#7ae0ff',
'#48d2ff',
'#1ac5ff',
'#3CAED4',
'#19ADDF',
'#00abe6', // default
'#0085b4',
'#005f82',
],
'Disney Plus': [
'#e4eaff',
'#b2bfff',
'#8194fe',
'#4f69fd',
'#213efb',
'#0c26e2',
'#051db0',
'#01147e', // default
'#000c4e',
'#00041e',
],
'Apple TV Plus': [
'#f2f2f2', // 0 - default
'#d9d9d9',
'#bfbfbf',
'#a6a6a6',
'#8c8c8c',
'#737373',
'#595959',
'#404040',
'#262626',
'#0d0d0d',
],
Wavve: [
'#e1edff',
'#b1c8ff',
'#81a3ff',
'#8DA1D8',
'#6A88DB',
'#507ffc',
'#426EE5',
'#1f5af9', // default
'#0640e0',
'#0032af',
],
};