Skip to content

Commit a668ffc

Browse files
junghyeonsujunghyeonsu
committed
document type guard, add use client keyword
1 parent e96efdf commit a668ffc

File tree

2 files changed

+65
-41
lines changed

2 files changed

+65
-41
lines changed

‎docs/content/react/getting-started/styling/theming.mdx‎

Lines changed: 37 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ SEED Design의 테마 시스템은 두 가지 `data-*` 속성을 사용합니다
2525
```html
2626
<!-- 시스템 설정 따르기 -->
2727
<html data-seed-color-mode="system">
28-
29-
<!-- 라이트 모드로 고정 -->
30-
<html data-seed-color-mode="light-only">
31-
32-
<!-- 다크 모드로 고정 -->
33-
<html data-seed-color-mode="dark-only">
28+
<!-- 라이트 모드로 고정 -->
29+
<html data-seed-color-mode="light-only">
30+
<!-- 다크 모드로 고정 -->
31+
<html data-seed-color-mode="dark-only"></html>
32+
</html>
33+
</html>
3434
```
3535

3636
### `data-seed-user-color-scheme`
@@ -44,10 +44,7 @@ SEED Design의 테마 시스템은 두 가지 `data-*` 속성을 사용합니다
4444

4545
```html
4646
<!-- 시스템 설정을 따르도록 설정했으며, 현재 사용자는 라이트 모드를 사용 중 -->
47-
<html
48-
data-seed-color-mode="system"
49-
data-seed-user-color-scheme="light"
50-
>
47+
<html data-seed-color-mode="system" data-seed-user-color-scheme="light"></html>
5148
```
5249

5350
### 작동 원리
@@ -103,6 +100,8 @@ SEED CSS는 두 속성의 조합을 통해 적절한 색상 토큰을 적용합
103100
다음은 커스텀 훅을 만들어 현재 테마 정보를 감지하는 예제입니다:
104101

105102
```tsx
103+
"use client";
104+
106105
import { useEffect, useState } from "react";
107106

108107
export type ColorMode = "system" | "light-only" | "dark-only";
@@ -113,26 +112,37 @@ export interface ThemeInfo {
113112
userColorScheme: UserColorScheme;
114113
}
115114

116-
export function useTheme(): ThemeInfo {
117-
const [themeInfo, setThemeInfo] = useState<ThemeInfo>(() => {
118-
const colorMode = document.documentElement.getAttribute("data-seed-color-mode") as ColorMode;
119-
const userColorScheme = document.documentElement.getAttribute("data-seed-user-color-scheme");
120-
115+
function readThemeInfo(): ThemeInfo {
116+
if (typeof document === "undefined") {
121117
return {
122-
colorMode: colorMode || "system",
123-
userColorScheme: userColorScheme === "dark" ? "dark" : "light",
118+
colorMode: "system",
119+
userColorScheme: "light",
124120
};
125-
});
121+
}
122+
123+
const colorMode = document.documentElement.getAttribute(
124+
"data-seed-color-mode"
125+
) as ColorMode;
126+
const userColorScheme = document.documentElement.getAttribute(
127+
"data-seed-user-color-scheme"
128+
);
129+
130+
return {
131+
colorMode: colorMode || "system",
132+
userColorScheme: userColorScheme === "dark" ? "dark" : "light",
133+
};
134+
}
135+
136+
export function useTheme(): ThemeInfo {
137+
const [themeInfo, setThemeInfo] = useState<ThemeInfo>(readThemeInfo);
126138

127139
useEffect(() => {
128-
const observer = new MutationObserver(() => {
129-
const colorMode = document.documentElement.getAttribute("data-seed-color-mode") as ColorMode;
130-
const userColorScheme = document.documentElement.getAttribute("data-seed-user-color-scheme");
140+
if (typeof document === "undefined") {
141+
return;
142+
}
131143

132-
setThemeInfo({
133-
colorMode: colorMode || "system",
134-
userColorScheme: userColorScheme === "dark" ? "dark" : "light",
135-
});
144+
const observer = new MutationObserver(() => {
145+
setThemeInfo(readThemeInfo());
136146
});
137147

138148
observer.observe(document.documentElement, {
@@ -150,6 +160,8 @@ export function useTheme(): ThemeInfo {
150160
이 훅은 다음과 같이 사용할 수 있습니다:
151161

152162
```tsx
163+
"use client";
164+
153165
function MyComponent() {
154166
const { colorMode, userColorScheme } = useTheme();
155167

@@ -173,4 +185,3 @@ function MyComponent() {
173185
- `colorMode`는 애플리케이션의 테마 정책(`system`, `light-only`, `dark-only`)을 나타냅니다.
174186
- `userColorScheme`는 현재 적용된 실제 컬러 스킴(`light` 또는 `dark`)을 나타냅니다.
175187
- 시스템 설정이 변경되거나 테마가 전환될 때 자동으로 상태가 업데이트됩니다.
176-

‎docs/hooks/useTheme.ts‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client";
2+
13
import { useEffect, useState } from "react";
24

35
export type ColorMode = "system" | "light-only" | "dark-only";
@@ -8,26 +10,37 @@ export interface ThemeInfo {
810
userColorScheme: UserColorScheme;
911
}
1012

11-
export function useTheme(): ThemeInfo {
12-
const [themeInfo, setThemeInfo] = useState<ThemeInfo>(() => {
13-
const colorMode = document.documentElement.getAttribute("data-seed-color-mode") as ColorMode;
14-
const userColorScheme = document.documentElement.getAttribute("data-seed-user-color-scheme");
15-
13+
function readThemeInfo(): ThemeInfo {
14+
if (typeof document === "undefined") {
1615
return {
17-
colorMode: colorMode || "system",
18-
userColorScheme: userColorScheme === "dark" ? "dark" : "light",
16+
colorMode: "system",
17+
userColorScheme: "light",
1918
};
20-
});
19+
}
20+
21+
const colorMode = document.documentElement.getAttribute(
22+
"data-seed-color-mode"
23+
) as ColorMode;
24+
const userColorScheme = document.documentElement.getAttribute(
25+
"data-seed-user-color-scheme"
26+
);
27+
28+
return {
29+
colorMode: colorMode || "system",
30+
userColorScheme: userColorScheme === "dark" ? "dark" : "light",
31+
};
32+
}
33+
34+
export function useTheme(): ThemeInfo {
35+
const [themeInfo, setThemeInfo] = useState<ThemeInfo>(readThemeInfo);
2136

2237
useEffect(() => {
23-
const observer = new MutationObserver(() => {
24-
const colorMode = document.documentElement.getAttribute("data-seed-color-mode") as ColorMode;
25-
const userColorScheme = document.documentElement.getAttribute("data-seed-user-color-scheme");
38+
if (typeof document === "undefined") {
39+
return;
40+
}
2641

27-
setThemeInfo({
28-
colorMode: colorMode || "system",
29-
userColorScheme: userColorScheme === "dark" ? "dark" : "light",
30-
});
42+
const observer = new MutationObserver(() => {
43+
setThemeInfo(readThemeInfo());
3144
});
3245

3346
observer.observe(document.documentElement, {

0 commit comments

Comments
 (0)