다크모드 적용 (emotion)
Emotion으로 다크모드 적용해보았다.
theme 색상적용
먼저 styles 폴더 하위에 theme 전용 파일인 Theme.ts를 만들고 라이트 / 다크 모드에 대한 색상 값을 지정해줬다.
// styles/Theme.ts
import { 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,
borderColor: "rgba(17, 17, 17, 0.15)",
},
};
export const darkTheme: Theme = {
mode: {
text: "#D9D9D9",
background: "#32323D",
backgroundMain: "#3f3f4d",
borderColor: "#666565",
},
};
ThemeProvider
그 다음으로 theme 을 사용하기 위해 ThemeProvide r를 페이지에 적용해야 하는데 최 상단인 _app.tsx에서 <Component {...pageProps} />를 <Layout></Layout>로 감싸는 방식으로 진행했기 때문에 Layout compoenet에서 ThemeProvider를 적용했다.
Layout 전체를 ThemeProvider 로 감싸고 styles 폴더에서 라이트 / 다크 모드에 대한 색상 값을 지정한 lightTheme / darkTheme를 colorTheme 상태 값에 알맞게 지정해줬다.
theme={colorTheme === lightTheme ? lightTheme : darkTheme}
Header에서 라이트 / 다크 모드를 변경할 버튼을 배치 할 예정이기 때문에 Header component 에 colorTheme={colorTheme} setColorTheme={setColorTheme} 값을 넘겼다.
// components/Layout.tsx
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import { PropsWithChildren } from "react";
import Header from "./Header";
import Nav from "./Navbar";
import { ThemeProvider } from "@emotion/react";
import { darkTheme, lightTheme } from "@/styles/Theme";
import { useState } from "react";
export default function Layout({ children }: PropsWithChildren) {
const [colorTheme, setColorTheme] = useState(lightTheme);
return (
<ThemeProvider theme={colorTheme === lightTheme ? lightTheme : darkTheme}>
<div css={layout}>
<Header colorTheme={colorTheme} setColorTheme={setColorTheme} />
<section className="bottom-area">
<Nav />
<div className="right-area">
<section className="content-container">{children}</section>
</div>
</section>
</div>
</ThemeProvider>
);
}
라이트 / 다크 모드 버튼 & localStorage 저장
먼저 styles/Theme에서 darkTheme, lightTheme를 가지고 온 후 colorTheme이 darkTheme / lightTheme 일 경우의 버튼 스타일을 지정해준다.
<button
onClick={toggleColorTheme}
css={css`color: ${colorTheme === lightTheme ? "#202020" : "#D9D9D9"}`}
>
{colorTheme === lightTheme ? (
<BsSun css={{ fontSize: "2.4rem" }} />
) : (
<BsMoon css={{ fontSize: "2.4rem" }} />
)}
</button>
그리고 사용자가 라이트, 다크 모드 변경 시 브라우저를 나가더라도 다시 진입 시 해당 값이 유지되기 위해서 localStorage에 colorTheme값을 저장해야 된다. setMode 함수를 만들어 Key 명이 theme,
Value 값이 mode 에 따라 light / dark 로 저장되게 하였다.
const setMode = (mode: any) => {
mode === lightTheme
? window.localStorage.setItem("theme", "light")
: window.localStorage.setItem("theme", "dark");
setColorTheme(mode);
};
이제 onClick={toggleColorTheme} 통해 colorTheme 이 변할 수 있도록 toggleColorTheme 함수를 만들고 setMode에도 Theme을 보낸다.
const toggleColorTheme = () => {
colorTheme === lightTheme ? setMode(darkTheme) : setMode(lightTheme);
colorTheme === lightTheme ? setColorTheme(darkTheme): setColorTheme(lightTheme);
};
마지막으로 useLayoutEffect를 활용하여 페이지에 진입 시 localStorage에 theme이 있다면 해당 값을 colorTheme에 적용한다.
useLayoutEffect(() => {
const localTheme = window.localStorage.getItem("theme");
if (localTheme !== null) {
if (localTheme === "dark") {
setColorTheme(darkTheme);
} else {
setColorTheme(lightTheme);
}
}
}, [setColorTheme]);
useLayoutEffect 를 사용한 이유
새로 고침 시 화면 깜빡임 문제를 해결하기 위함이다.
useEffect와 useLayoutEffect의 차이점
- useEffect는 DOM이 화면에 그려진 이후에 호출됩니다.그렇기 때문에 useEffect를 이용해서 Layout을 변경할 경우, 새로 고침 시 화면이 깜빡이는 문제가 발생할 수 있습니다. 이전 상태가 그려진 이후에, Layout이 바뀐다.
- useLayoutEffect는 이러한 문제를 해결하기 위해 등장했습니다. useLayoutEffect는 DOM이 화면에 그려지기 전에 호출됩니다. 따라서, useLayoutEffect를 이용해 Layout을 변경할 경우, Layout이 변경된 이후에 DOM이 그려지기 때문에 새로 고침 시 깜빡임이 발생하지 않습니다.
전체 코드
// components/Header.tsx
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import { useLayoutEffect, useState } from "react";
import { darkTheme, lightTheme } from "@/styles/Theme";
import { BsSun, BsMoon } from "react-icons/bs";
export default function Header({ colorTheme, setColorTheme }: any) {
// darkmode save in localStorage
const setMode = (mode: any) => {
mode === lightTheme
? window.localStorage.setItem("theme", "light")
: window.localStorage.setItem("theme", "dark");
setColorTheme(mode);
};
const toggleColorTheme = () => {
colorTheme === lightTheme ? setMode(darkTheme) : setMode(lightTheme);
colorTheme === lightTheme
? setColorTheme(darkTheme)
: setColorTheme(lightTheme);
};
useLayoutEffect(() => {
const localTheme = window.localStorage.getItem("theme");
if (localTheme !== null) {
if (localTheme === "dark") {
setColorTheme(darkTheme);
} else {
setColorTheme(lightTheme);
}
}
}, [setColorTheme]);
return (
<header css={headerArea}>
<h3 css={{ fontSize: "1.8rem", minWidth: "22rem" }}>
사이트
</h3>
<div className="header-right">
<button
onClick={toggleColorTheme}
css={css`color: ${colorTheme === lightTheme ? "#202020" : "#D9D9D9"}`}
>
{colorTheme === lightTheme ? (
<BsSun css={{ fontSize: "2.4rem" }} />
) : (
<BsMoon css={{ fontSize: "2.4rem" }} />
)}
</button>
</div>
</header>
);
}
const headerArea = (theme: ThemeType) => css`
display: flex;
justify-content: space-between;
width: 100%;
height: 6rem;
align-items: center;
padding: 0 2rem;
border-bottom: 1px solid ${theme.mode.borderColor};
`;
css에서 theme 적용 방법
css 에서는 const reset = (theme: ThemeType) => css``` 이렇게 theme을 가지고 와서 theme 에 있는 mode에 따라 선언된 값을 가지고 오면 된다. background: ${theme.mode.background};` 이렇게 선언 시 라이트 모드에서 background 색상은 "#F5F7FC”, 다크 모드에서는 "#32323D”가 들어가진다.
import { css } from "@emotion/react";
import { colors } from "./Theme";
import { ThemeType } from "@/InterfaceGather";
export const reset = (theme: ThemeType) => css`
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Pretendard";
font-weight: 400;
}
html {
font-size: 62.5%;
}
body {
width: 100%;
height: 100%;
font-size: 1.4rem;
color: ${theme.mode.text};
background: ${theme.mode.background};
}
input,
select {
border: 1px solid ${theme.mode.borderColor};
color: ${theme.mode.text};
background: ${theme.mode.backgroundMain};
}
`;
Typescript 사용 시 theme 타입 지정
Typescript 사용 시 ****theme 타입 지정이 필요해 Interface 파일을 만들어 theme 색상에 대한 타입을 지정 한 후 Theme이라는 Emotion의 기본 테마에 대한 TypeScript 인터페이스를 확장했다.
//Interface.ts
// Theme
export interface ThemeType {
mode: {
text: string;
background: string;
backgroundMain: string;
borderColor: string;
};
}
// emotion.d.ts
declare module "@emotion/react" {
export interface Theme extends ThemeType {}
}