귀찮은건 딱-질색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>;
};