0

Theming

PreviousNext

Fonts, oklch color tokens, and dark mode.

The @ondo-ui/theme registry item configures typography and color tokens, and @ondo-ui/theme-provider wires up dark mode.

Typography

The theme installs two font families from Fontsource:

  • Pretendard — --font-sans and --font-heading, with full Korean glyph coverage.
  • Monaspace Neon — --font-mono for code.

Color tokens

All colors are defined as CSS variables in the oklch color space, following the shadcn token convention (--background, --foreground, --primary, and so on). Light values live on :root, dark values on .dark. Browse them on the Colors page.

Dark mode

ThemeProvider wraps next-themes with class-based switching:

app/layout.tsx
import { ThemeProvider } from "@/components/theme-provider"
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

It also registers a keyboard shortcut: press d anywhere to toggle between light and dark mode.