7onicDESIGN SYSTEM

Theming

7onic uses a CSS variable-based theme system. Automatic Light / Dark switching and full brand color customization.

How It Works

Three layers ensure design consistency.

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
Change a token in one place, and all referencing components update automatically.

Dark Mode

Switch themes and all components respond automatically.

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...
View code

Simply toggle the dark class on <html> and all CSS variables switch automatically.

// 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

Change the primary color and all components update automatically.

Team Meeting4 members
12:34
DS
Design System
Speaking
TK
AH
Muted
YS
MP
Muted
Customize by overriding CSS variables or using Token Sync for batch changes.Token Sync

Color Reference

Semantic color variable reference. References switch automatically between Light / Dark themes.

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

* Each category also has hover and active variants available.