다크모드 적용 (next-themes)
·
Css
현재 개인 블로그를 만들면서 다크모드를 next-themes 라는 라이브러리를 사용해서 적용해보았다.개인 블로그 css를 tailwind로 적용했기 때문에 tailwind 방식으로 진행했다.tailwind.config.js 수정config중 darkMode를 ”class” 로 바꾼다.“class”로 수정해야 수동으로 어두운 모드 전환할 수 있다.기본형은 “media” 로 운영 체제 기본 설정에 의존한다.import type { Config } from "tailwindcss";const config: Config = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", ..
다크모드 적용 (emotion)
·
Css
Emotion으로 다크모드 적용해보았다. theme 색상적용먼저 styles 폴더 하위에 theme 전용 파일인 Theme.ts를 만들고 라이트 / 다크 모드에 대한 색상 값을 지정해줬다.// styles/Theme.tsimport { Theme } from "@emotion/react";interface VariantType { [key: string]: string;}export const colors: VariantType = { white: "#fff",};export const lightTheme: Theme = { mode: { text: "#202020", background: "#F5F7FC", backgroundMain: colors.white, borderCo..
minsun309
'다크모드' 태그의 글 목록