Skip to Content
🌐 Frontend SDKTheming

Theming

Customize the look and feel of EmbarkAI UI components with light/dark mode support and CSS variables.

All EmbarkAI components use a CSS variable system for colors and spacing. You can switch between light and dark mode programmatically, set a default via the Provider, or let the user toggle it with the ThemeToggle component.

Setting the Default Color Mode

Use the preferedColorMode option in the Provider to set the initial theme:

import { Provider } from '@embarkai/ui-kit'
 
function App() {
  return (
    <Provider
      projectId="your-project-id"
      initialConfig={{
        preferedColorMode: 'dark',
      }}
    >
      {/* Your app */}
    </Provider>
  )
}
ValueBehavior
'light'Force light mode on mount.
'dark'Force dark mode on mount.
(omitted)Follow the user’s system preference.

useColorMode Hook

Read and update the color mode at runtime:

import { useColorMode } from '@embarkai/ui-kit'
 
function ThemeSwitch() {
  const { colorMode, setColorMode } = useColorMode()
 
  return (
    <div>
      <p>Current: {colorMode}</p>
      <button onClick={() => setColorMode('light')}>Light</button>
      <button onClick={() => setColorMode('dark')}>Dark</button>
    </div>
  )
}
PropertyTypeDescription
colorMode'light' | 'dark'The current active color mode.
setColorMode(mode: 'light' | 'dark') => voidUpdate the color mode. Persisted to localStorage.

ThemeToggle Component

A ready-made toggle button that switches between light and dark mode with a single click:

import { ThemeToggle } from '@embarkai/ui-kit'
 
function Navbar() {
  return (
    <nav>
      <ThemeToggle />
    </nav>
  )
}

CSS Variables

EmbarkAI components are styled using CSS custom properties. Override these in your global stylesheet to match your brand:

:root {
  --ui-kit-bg: #ffffff;
  --ui-kit-fg: #111111;
  --ui-kit-bg-secondary: #f5f5f5;
  --ui-kit-fg-secondary: #666666;
  --ui-kit-border: #e0e0e0;
  --ui-kit-accent: #6366f1;
  --ui-kit-accent-fg: #ffffff;
  --ui-kit-radius: 12px;
}
 
[data-theme='dark'] {
  --ui-kit-bg: #0a0a0a;
  --ui-kit-fg: #f5f5f5;
  --ui-kit-bg-secondary: #1a1a1a;
  --ui-kit-fg-secondary: #999999;
  --ui-kit-border: #2a2a2a;
  --ui-kit-accent: #818cf8;
  --ui-kit-accent-fg: #000000;
}

Custom Styling with className

Every component accepts a className prop. Use it to apply additional styles without overriding the theme variables:

import { ConnectWalletButton, TransactionsList } from '@embarkai/ui-kit'
 
<ConnectWalletButton className="rounded-full px-6 shadow-md" />
<TransactionsList className="border border-gray-200 rounded-lg" />

Combining with Tailwind CSS

If your project uses Tailwind CSS, the CSS variable overrides work alongside utility classes. Set the variables in your globals.css and use className for layout and spacing:

/* globals.css */
@layer base {
  :root {
    --ui-kit-accent: theme('colors.indigo.500');
    --ui-kit-radius: theme('borderRadius.xl');
  }
}

Next Steps

Last updated on
ComponentsInternationalization