tailwindcss2 [tailwindcss] cookie darkmode with nextjs nextjs에서 cookie를 활용해서 darkmode를 적용 했다. 브라우저에서 먼가를 저장할수 있는 곳은 localstorage, sessionstorage, cookie, history를 활용 할 수 있다. 이중 쿠키를 사용한 이유는 다음과 같다. * localstorage를 사용할 경우 SSR에서는 localstorage에 접근 할 수 없다. client side로딩 시점에 localstorage를 로드해서 theme를 적용하면 로딩 딜레이가 있기 때문에, 화면이 깜빡이는 현상이 발생하게 된다. 화면이 깜빡임 없이 theme를 적용하기 위해 cookie는 좋은 방안이다. nextjs SSR에서 cookie에 접근이 가능하기 때문이다. import { cookies } from 'next/heade.. 2023. 1. 6. [Tailwind CSS] dark mode 적용 Tailwind css dark mode Tailwind CSS에서 dark모드 적용은 너무나 매끄럽다. 기존에 디폴트 모드에서 다크모드 적용을 해보았다. 아래내용은 정석은 아니고, 머리속 생각으로 적용한 방법이다. index.html 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) { .. 2022. 12. 26. 이전 1 다음
