테마
라이트 · 다크 · 시스템. next-themes 가 html 에 class 를 붙입니다.
토큰이 .dark 에서 재정의되므로 컴포넌트 대부분은 테마를 모릅니다. 유리 표면처럼 값이 아니라 조합이 바뀌는 곳만 .dark .glass-surface 규칙이 따로 있습니다. BrandLogo 는 라이트·다크 두 벌을 렌더하고 CSS 로 고르므로 테마가 확정되기 전에도 깜빡이지 않습니다.
ThemeProvider
import { ThemeProvider } from "@uyoolabs/uyooglass/theme";
// class 기반 다크모드. attribute="class" · defaultTheme="system" · enableSystem · disableTransitionOnChange.
// html 에 suppressHydrationWarning — next-themes 가 첫 렌더에서 class 를 바꾸기 때문.
<html lang="ko" suppressHydrationWarning>
<body><ThemeProvider>{children}</ThemeProvider></body>
</html>ThemeToggle
눌러 보세요. 사이트 헤더의 것과 같습니다.
useMounted
하이드레이션 불일치를 피하는 유일한 훅입니다.
"use client";
import { useMounted } from "@uyoolabs/uyooglass";
import { useTheme } from "next-themes";
// 테마처럼 클라이언트에서만 확정되는 값은 첫 렌더에서 그리지 않는다.
const mounted = useMounted();
const { theme } = useTheme();
if (!mounted) return null;
return <span>{theme}</span>;dark: variant
/* 토큰은 .dark 에서 재정의된다. Tailwind 의 dark: variant 도 같은 클래스를 본다. */
@custom-variant dark (&:is(.dark *));
<div className="bg-white/60 dark:bg-white/[0.07]">…</div>