@@ -36,7 +34,7 @@ const Example = () => {
```
export const Example = () => {
- const { isMatch } = useMediaQuery('(min-width: 768px)');
+ const isMatch = useMediaQuery('(min-width: 768px)');
return (
브라우저 너비를 수정해보세요!
diff --git a/docs/docs/react/hooks/usePreferredColorScheme.mdx b/docs/docs/react/hooks/usePreferredColorScheme.mdx
new file mode 100644
index 000000000..d06d68a58
--- /dev/null
+++ b/docs/docs/react/hooks/usePreferredColorScheme.mdx
@@ -0,0 +1,66 @@
+import { usePreferredColorScheme } from '@modern-kit/react';
+
+# usePreferredColorScheme
+
+사용자의 색상 스킴 선호도(**[prefers-coloc-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)**) 에 따라 `dark`, `light`, 또는 `no-preference`를 반환합니다.
+
+- ligth: 사용자가 시스템에 `ligth` 테마를 사용하는 것을 선호하거나 선호하는 테마를 알리지 않았을 때 반환합니다.
+- dark: 사용자가 시스템에 `dark` 테마를 사용하는 것을 선호한다고 알렸을 때 반환합니다.
+
+사용자는 `운영체제 설정`이나 `사용자 에이전트 설정`에서 선호하는 테마를 지정 할 수 있습니다.
+
+
+
+## Code
+[🔗 실제 구현 코드 확인](https://github.com/modern-agile-team/modern-kit/blob/main/packages/react/src/hooks/usePreferredColorScheme/index.ts)
+
+## Interface
+
+```ts title="typescript"
+const usePreferredColorScheme: () => "dark" | "light"
+```
+
+## Usage
+```tsx title="typescript"
+import { usePreferredColorScheme } from '@modern-kit/react';
+
+const Example = () => {
+ const colorScheme = usePreferredColorScheme();
+
+ return (
+
+
OS 시스템 설정에서 테마를 변경해보세요.
+
ColorScheme: {colorScheme}
+
+ );
+};
+```
+
+## Example
+
+export const Example = () => {
+ const colorScheme = usePreferredColorScheme();
+
+ return (
+
+
OS 시스템 설정에서 테마를 변경해보세요.
+
ColorScheme: {colorScheme}
+
+ );
+};
+
+
+
+
+
+## Image
+### 1. Light Theme
+
+
+
+
+### 2. Dark Theme
+
+
+## Note
+- [Prefers Color Scheme - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
\ No newline at end of file
diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts
index 5e72b0318..7320c16c1 100644
--- a/packages/react/src/hooks/index.ts
+++ b/packages/react/src/hooks/index.ts
@@ -19,6 +19,7 @@ export * from './useMergeRefs';
export * from './useMouse';
export * from './useNetwork';
export * from './useOnClickOutside';
+export * from './usePreferredColorScheme';
export * from './usePreservedCallback';
export * from './usePreservedState';
export * from './usePrevious';
diff --git a/packages/react/src/hooks/useMediaQuery/index.ts b/packages/react/src/hooks/useMediaQuery/index.ts
index ffd885203..680cbd0dc 100644
--- a/packages/react/src/hooks/useMediaQuery/index.ts
+++ b/packages/react/src/hooks/useMediaQuery/index.ts
@@ -1,15 +1,17 @@
import { isClient } from '@modern-kit/utils';
import { useCallback, useEffect, useState } from 'react';
-const getMatchMedia = (query: string) => {
+const getMatchMedia = (query: string, defaultValue?: boolean) => {
+ if (defaultValue != null) return defaultValue;
+
if (isClient()) {
return window.matchMedia(query).matches;
}
return false;
};
-export const useMediaQuery = (query: string) => {
- const [isMatch, setIsMatch] = useState(getMatchMedia(query));
+export const useMediaQuery = (query: string, defaultValue?: boolean) => {
+ const [isMatch, setIsMatch] = useState(getMatchMedia(query, defaultValue));
const handleChange = useCallback(() => {
setIsMatch(getMatchMedia(query));
@@ -23,5 +25,5 @@ export const useMediaQuery = (query: string) => {
return () => matchMedia.removeEventListener('change', handleChange);
}, [query, handleChange]);
- return { isMatch };
+ return isMatch;
};
diff --git a/packages/react/src/hooks/useMediaQuery/useMediaQuery.spec.ts b/packages/react/src/hooks/useMediaQuery/useMediaQuery.spec.ts
index c538f0eed..8f528cb88 100644
--- a/packages/react/src/hooks/useMediaQuery/useMediaQuery.spec.ts
+++ b/packages/react/src/hooks/useMediaQuery/useMediaQuery.spec.ts
@@ -21,13 +21,13 @@ describe('useMediaQuery', () => {
it('should return true for matches when query matches', () => {
const { result } = renderHook(() => useMediaQuery('(min-width: 600px)'));
- expect(result.current.isMatch).toBe(true);
+ expect(result.current).toBe(true);
});
it('should return false when query does not match', () => {
const { result } = renderHook(() => useMediaQuery('(min-width: 599px)'));
- expect(result.current.isMatch).toBe(false);
+ expect(result.current).toBe(false);
});
it('should return false for isMatch when not in a client environment', () => {
@@ -35,6 +35,6 @@ describe('useMediaQuery', () => {
const { result } = renderHook(() => useMediaQuery('(min-width: 600px)'));
- expect(result.current.isMatch).toBe(false);
+ expect(result.current).toBe(false);
});
});
diff --git a/packages/react/src/hooks/usePreferredColorScheme/index.ts b/packages/react/src/hooks/usePreferredColorScheme/index.ts
new file mode 100644
index 000000000..713c1a677
--- /dev/null
+++ b/packages/react/src/hooks/usePreferredColorScheme/index.ts
@@ -0,0 +1,7 @@
+import { useMediaQuery } from '../useMediaQuery';
+
+export const usePreferredColorScheme = () => {
+ const isDark = useMediaQuery('(prefers-color-scheme: dark)');
+
+ return isDark ? 'dark' : 'light';
+};
diff --git a/packages/react/src/hooks/usePreferredColorScheme/usePreferredColorScheme.spec.ts b/packages/react/src/hooks/usePreferredColorScheme/usePreferredColorScheme.spec.ts
new file mode 100644
index 000000000..5529afecf
--- /dev/null
+++ b/packages/react/src/hooks/usePreferredColorScheme/usePreferredColorScheme.spec.ts
@@ -0,0 +1,28 @@
+import { renderHook } from '@testing-library/react';
+import { usePreferredColorScheme } from '.';
+import { useMediaQuery } from '../useMediaQuery';
+import { Mock } from 'vitest';
+
+vi.mock('../useMediaQuery', () => ({
+ useMediaQuery: vi.fn(),
+}));
+
+describe('usePreferredColorScheme', () => {
+ it('should return "dark" when prefers-color-scheme is dark', () => {
+ (useMediaQuery as Mock).mockImplementation((query: string) => {
+ return query === '(prefers-color-scheme: dark)';
+ });
+
+ const { result } = renderHook(() => usePreferredColorScheme());
+ expect(result.current).toBe('dark');
+ });
+
+ it('should return "light" when prefers-color-scheme is light', () => {
+ (useMediaQuery as Mock).mockImplementation((query: string) => {
+ return query === '(prefers-color-scheme: light)';
+ });
+
+ const { result } = renderHook(() => usePreferredColorScheme());
+ expect(result.current).toBe('light');
+ });
+});