1.0.10 • Published 8 months ago
@imwebme/imds-stylesheet v1.0.10
@imwebme/imds-stylesheet
설치
npm install @imwebme/imds-stylesheet
yarn add @imwebme/imds-stylesheet가이드
주요 렌더링 경로에 배치합니다.
SPA 의 경우 -> index.tsx Next.js의 경우 (page dir) -> _app.tsx Next.js의 경우 (app dir) -> app/layout.tsx
import "@imwebme/imds-stylesheet";루트 엘리먼트() 초기화
ImDS 에서 제공하는 속성은 사용하기 전에 명시적인 초기화가 필요합니다.
페이지 루트 요소에 data-imds-theme 어트리뷰트를 지정합니다.
예시 (HTML, SPA react)
<html lang="ko" data-imds-theme="light-only">
<head>
<meta name="color-scheme" content="light" />
</head>
<body>
<!-- your script -->
</body>
</html>예시 (Nextjs > page dir)
<Html lang="ko" data-imds-theme="light-only">
<Head>
<meta name="color-scheme" content="light" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>예시 (Nextjs > app dir)
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ko" data-imds-theme="light-only">
<head>
<meta name="color-scheme" content="light" />
</head>
<body>{children}</body>
</html>
);
}