@seed-design/react-theming

> 리액트에서 다크모드를 사용할 수 있어요.

다크모드는 원래 두 가지 옵션이 아니라 세 가지 옵션이에요.
light, dark, 그리고 system.

Installation

``console
$ npm install @seed-design/react-theming
$ bun add @seed-design/react-theming
`

사용법

`ts
// Provider를 감싸줘야해요.
import {
type ColorMode,
ThemeContext,
useThemeBehavior,
} from "@seed-design/react-theming";

export type Options = {
mode: ColorMode; // "light-only" | "dark-only" | "auto",
};

export const Wrapper: React.FC> = ({
mode,
children,
}) => {
const theme = useThemeBehavior({ mode });
return (
{children}
);
};

// 변경하기
import { useTheme } from "@seed-design/react-theming";

const YourComponent = () => {
const { setColorTheme } = useTheme();

const handleSelectChange = (e: React.ChangeEvent) => {
const value = e.target.value as "light" | "dark" | "system";
setColorTheme(value);
};

return null;
};
``