7onicDESIGN SYSTEM

Theming

7onic은 CSS 변수 기반 테마 시스템을 사용합니다. Light / Dark 자동 전환과 브랜드 컬러 커스터마이즈를 지원합니다.

How It Works

세 가지 레이어로 디자인 일관성을 보장합니다.

1
2
3
tokens.css
--color-primary-600:#15A0AC
--color-primary-500:#1AC6D5
--color-secondary-600:#475569
--color-gray-900:#1B1B1C
--color-gray-500:#78787C
--color-gray-200:#E4E4E7
--color-gray-100:#F4F4F6
--color-red-500:#EF4444
theme.css
Light
Dark
--color-text:
var(--color-gray-900)/var(--color-gray-100)
--color-background:
var(--color-white)/var(--color-gray-900)
--color-primary:
var(--color-primary-600)/var(--color-primary-600)
--color-border:
var(--color-gray-200)/var(--color-gray-600)
--color-text-muted:
var(--color-gray-500)/var(--color-gray-400)
components
Button
Outline
Ghost
Enter text...
Toggle
Badge
Progress67%
+3
Tab 1
Tab 2
Tab 3
토큰을 한 곳만 변경하면 참조하는 모든 컴포넌트에 자동 반영됩니다.

Dark Mode

테마를 전환하면 모든 컴포넌트가 자동으로 연동됩니다.

AI AssistantOnline
How do I switch to dark mode?
Add the dark class to your HTML element. All CSS variables update automatically.
<html class="dark">
Ask anything...
AI AssistantOnline
How do I switch to dark mode?
Add the dark class to your HTML element. All CSS variables update automatically.
<html class="dark">
Ask anything...
코드 보기

<html>에 dark 클래스를 전환하면 모든 CSS 변수가 자동으로 연동됩니다.

// layout.tsx — Wrap with ThemeProvider
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

// theme-toggle.tsx — Theme toggle button
function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  return (
    <button onClick={() =>
      setTheme(theme === 'dark' ? 'light' : 'dark')
    }>
      {theme === 'dark' ? 'Light' : 'Dark'}
    </button>
  )
}

Customizing

프라이머리 컬러를 변경하면 모든 컴포넌트에 자동 반영됩니다.

Team Meeting4 members
12:34
DS
Design System
Speaking
TK
AH
Muted
YS
MP
Muted
CSS 변수 오버라이드 또는 Token Sync로 일괄 커스터마이즈할 수 있습니다.Token Sync

Color Reference

시맨틱 컬러 변수 목록. Light / Dark 테마에 따라 참조 대상이 자동으로 전환됩니다.

Background
--color-backgroundbg-backgroundwhitegray-900
--color-background-paperbg-background-paperwhitegray-800
--color-background-elevatedbg-background-elevatedwhitegray-600
--color-background-mutedbg-background-mutedgray-100gray-700
Text
--color-texttext-foregroundgray-900gray-100
--color-text-mutedtext-text-mutedgray-500gray-400
--color-text-subtletext-text-subtlegray-400gray-500
--color-text-linktext-text-linkblue-600blue-400
--color-text-primarytext-text-primaryprimary-600primary-500
--color-text-infotext-text-infoblue-600blue-500
--color-text-successtext-text-successgreen-600green-500
--color-text-errortext-text-errorred-600red-500
--color-text-warningtext-text-warningyellow-600yellow-500
Primary
--color-primarybg-primaryprimary-600primary-600
--color-primary-tintbg-primary-tintprimary-50primary-900
--color-primary-texttext-primary-foregroundwhitewhite
Secondary
--color-secondarybg-secondarysecondary-600secondary-400
--color-secondary-tintbg-secondary-tintgray-100gray-800
--color-secondary-texttext-secondary-foregroundwhitesecondary-900
Border
--color-borderborder-bordergray-200gray-600
--color-border-subtleborder-border-subtlegray-100gray-800
--color-border-strongborder-border-stronggray-300gray-500
Status
--color-successbg-successgreen-600green-500
--color-success-tintbg-success-tintgreen-50green-900
--color-success-texttext-success-foregroundwhitewhite
--color-warningbg-warningyellow-500yellow-500
--color-warning-tintbg-warning-tintyellow-50yellow-900
--color-warning-texttext-warning-foregroundgray-900gray-900
--color-errorbg-errorred-600red-500
--color-error-tintbg-error-tintred-50red-900
--color-error-texttext-error-foregroundwhitewhite
--color-infobg-infoblue-600blue-500
--color-info-tintbg-info-tintblue-50blue-900
--color-info-texttext-info-foregroundwhitewhite
Disabled
--color-disabledbg-disabledgray-300gray-700
--color-disabled-texttext-disabled-foregroundgray-400gray-500
Focus
--color-focus-ringfocus-ringprimary 20%primary 50%
--color-focus-ring-errorring-errorerror 15%error 15%
Chart
--color-chart-1bg-chart-1chart-blue-lightchart-blue-dark
--color-chart-2bg-chart-2chart-pink-lightchart-pink-dark
--color-chart-3bg-chart-3chart-lavender-lightchart-lavender-dark
--color-chart-4bg-chart-4chart-sky-lightchart-sky-dark
--color-chart-5bg-chart-5chart-rose-lightchart-rose-dark

※ 각 카테고리에 hover, active variant도 사용할 수 있습니다.