[Tailwind CSS] dark mode 적용

Program/Front-end

[Tailwind CSS] dark mode 적용

pishio 2022. 12. 26. 09:26

Tailwind css dark mode

Tailwind CSS에서 dark모드 적용은 너무나 매끄럽다.
기존에 디폴트 모드에서 다크모드 적용을 해보았다.

아래내용은 정석은 아니고, 머리속 생각으로 적용한
방법이다.

index.html

  <body class="bg-white dark:bg-neutral-800">
    <div id="root"></div>
  </body>

index.js (global settings)

if (localStorage.theme === 'dark') {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.remove('dark');
}

darkModeController.jsx

function handleChange() {
    const checked = !isChecked;
    if (checked) {
      document.documentElement.classList.add('dark');
      localStorage.theme = 'dark';
    } else {
      document.documentElement.classList.remove('dark');
      localStorage.removeItem('theme');
    }
    setIsChecked(checked);
}

class example

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

dark:class 의 규칙으로 다크 모드 클래스를 설정한다. 대부분 bg, text color을 설정하게 된다.

다크모드가 적용된 내용은 https://delog.io의 서브
메뉴에서 확인 해볼 수 있다.