HUA Docs - The Syntax of Emotion

Light

Dark

tsx

1// app/layout.tsx
2import { ThemeProvider } from "@hua-labs/ui";
3 
4export default function RootLayout({ children }) {
5  return (
6    <html lang="en" suppressHydrationWarning>
7      <body>
8        <ThemeProvider
9          defaultTheme="system"
10          enableSystem
11          enableTransition
12        >
13          {children}
14        </ThemeProvider>
15      </body>
16    </html>
17  );
18}

tsx

1'use client';
2 
3import { useTheme } from "@hua-labs/ui";
4import { Moon, Sun } from "@phosphor-icons/react";
5 
6export function ThemeToggle() {
7  const { theme, setTheme, resolvedTheme } = useTheme();
8 
9  return (
10    <button
11      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
12      className="p-2 rounded-lg hover:bg-secondary"
13    >
14      {resolvedTheme === "dark" ? (
15        <Sun className="h-5 w-5" />
16      ) : (
17        <Moon className="h-5 w-5" />
18      )}
19    </button>
20  );
21}

css

1/* globals.css */
2@import "tailwindcss";
3@import "@hua-labs/ui/styles/base.css";
4 
5/* @theme: Tailwind v4 유틸리티 (bg-primary, text-foreground 등) */
6@theme {
7  --color-primary: hsl(166 78% 30%);      /* 앱별 프라이머리 */
8  --color-primary-foreground: hsl(0 0% 100%);
9  --color-background: hsl(210 20% 98%);
10  --color-foreground: hsl(210 10% 10%);
11  --color-border: hsl(210 15% 88%);
12  /* ... 나머지 색상 */
13}
14 
15/* 다크 모드 — class 기반 (next-themes) */
16.dark {
17  --color-primary: hsl(166 70% 45%);
18  --color-background: hsl(210 15% 6%);
19  --color-foreground: hsl(210 10% 95%);
20  --color-border: hsl(210 15% 18%);
21  /* ... 나머지 색상 */
22}
23 
24/* @layer base: 레거시 CSS vars (hsl(var(--primary)) 패턴) */
25@layer base {
26  :root {
27    --primary: 166 78% 30%;
28    --background: 210 20% 98%;
29    --foreground: 210 10% 10%;
30    --border: 210 15% 88%;
31    /* ... */
32  }
33  .dark {
34    --primary: 166 70% 45%;
35    --background: 210 15% 6%;
36    --foreground: 210 10% 95%;
37    --border: 210 15% 18%;
38    /* ... */
39  }
40}

tsx

1// hua.config.ts
2import { defineConfig } from '@hua-labs/hua/framework/config';
3 
4export default defineConfig({
5  branding: {
6    name: 'My App',
7    colors: {
8      primary: 'hsl(220 90% 56%)',    // 메인 브랜드 색상
9      secondary: 'hsl(280 80% 60%)',  // 보조 색상
10      accent: 'hsl(340 80% 60%)',     // 강조 색상
11    },
12  },
13});