Per ardua ad astra.

테마 토글 기능 설정하기 (with shadcn/ui)들어가며Next.js를 이용하여 테마 토글 기능을 설정하는 방법을 정리해본다.이 게시글의 내용은 타입스크립트(TypeScript)와 shadcn UI 컴포넌트 라이브러리를 바탕으로 작성되었다. 방법① 색상 템플릿 코드를 전역 스타일시트 파일(@globals.css@)에 넣기아래의 사이트에서 자신에게 맞는 라이트/다크 모드 색상 템플릿을 선택한 후, 색상 코드를 복사한다. shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com 그리고 전역 스타일시트 파일(@/app/..

daisyUI 테마 설정하기 들어가며테일윈드 CSS의 확장 라이브러리인 daisyUI를 이용하여 페이지에 테마(Theme)를 적용하는 방법을 정리해본다. 방법테마 고르기dasiyUI의 공식 문서에서 원하는 테마를 선택한다. daisyUI themes — Tailwind CSS Components ( version 4 update is here )How to use daisyUI themes?daisyui.com 이 페이지에서는 드라큘라 테마(@dracula@)를 선택했다고 가정한다. 테일윈드 CSS 설정 파일에 추가하기테일윈드 CSS 설정 파일인 @tailwind.config.js@ 파일에 아래의 테마 속성을 추가해준다../tailwind.config.js/** @type {import('tailwind..