7onicDESIGN SYSTEM

Theming

7onic はCSS変数ベースのテーマシステムを採用。Light / Dark の自動切替と、ブランドカラーのカスタマイズに対応しています。

How It Works

3つのレイヤーがデザインの一貫性を保証します。

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
トークンを1箇所変更するだけで、参照するすべてのコンポーネントに自動反映されます。

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 バリアントも利用可能です。