귀찮은건 딱-질색2(다크모드 변경 자동화)
다크모드도 일일이 dark 넣기 귀찮아
보통 다크모드를 사용할 때 dark:bg-main-3
이런식으로 다크모드인 처리를 해줬다. 하지만 그러면 다크모드가 들어가는 곳 마다 dark값을 넣어줘야하는 귀찮음이 있다. 그래서 우리는 우리가 정한 색상팔레트를 사용하고 dark일때 자동으로 변경되도록 해주었다.
@layer base {
:root {
...
--layer1: 0 0 100%;
--layer2: 0 0 96%;
--layer3: 0 0 93%;
--layer4: 0 0 88%;
--layer5: 0 0 74%;
--layer6: 0 0 46%;
--layer7: 0 0 38%;
--layer8: 0 0 26%;
--layer9: 0 0 13%;
--layer10: 0 0 0%;
}
.dark {
...
--layer10: 0 0 100%;
--layer9: 0 0 96%;
--layer8: 0 0 93%;
--layer7: 0 0 88%;
--layer6: 0 0 74%;
--layer5: 0 0 46%;
--layer4: 0 0 38%;
--layer3: 0 0 26%;
--layer2: 0 0 13%;
--layer1: 0 0 0%;
}
* {
transition: background-color 200ms ease;
}
}
차크라 UI처럼 색상을 반대로 해서 다크모드에 적용했다.
tailwind에 이를 알려주면
// tailwind.config.css
theme: {
extend: {
colors: {
...
'layer-1': 'hsl(var(--layer1))',
'layer-2': 'hsl(var(--layer2))',
'layer-3': 'hsl(var(--layer3))',
'layer-4': 'hsl(var(--layer4))',
'layer-5': 'hsl(var(--layer5))',
'layer-6': 'hsl(var(--layer6))',
'layer-7': 'hsl(var(--layer7))',
'layer-8': 'hsl(var(--layer8))',
'layer-9': 'hsl(var(--layer9))',
'layer-10': 'hsl(var(--layer10))',
'main-1': '#58C694',
'main-2': '#85D5B1',
'main-3': '#A4E0C5',
'main-4': '#C2EAD8',
'main-5': '#F0FAF5',
hover: '39A776',
},
우리는 사용할 때 한가지 값만 넣어놓고 해당 값이 theme따라 값이 변경된다.
const Navbar = () => {
return <div className="bg-layer-1 ...">...</div>;
};
댓글남기기