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',
      }}
    >
      <main>Your app</main>
    </Provider>
  )
}

Value	Behavior
`'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>
  )
}

Property	Type	Description
`colorMode`	`'light' \| 'dark'`	The current active color mode.
`setColorMode`	`(mode: 'light' \| 'dark') => void`	Update 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. The kit reads --embark-ui-* variables with built-in fallbacks, so set them in your global stylesheet to match your brand. The widget root carries .embarkai-ui-scope and a data-current-theme-mode attribute, which you can use for dark-mode overrides:


:root {
  --embark-ui-primary: #6366f1;
  --embark-ui-bg: #ffffff;
  --embark-ui-fg: #111111;
  --embark-ui-bd: #e0e0e0;
  --embark-ui-bdrs: 12px;
  --embark-ui-element-bdrs: 8px;
}
 
.embarkai-ui-scope[data-current-theme-mode='dark'] {
  --embark-ui-bg: #0a0a0a;
  --embark-ui-fg: #f5f5f5;
  --embark-ui-bd: #2a2a2a;
  --embark-ui-primary: #818cf8;
}

Variables

Variable	Light default	Dark default	Purpose
`--embark-ui-bg`	`#fff`	`#1a1a1a`	Surface background
`--embark-ui-fg`	`#000`	`#fff`	Text
`--embark-ui-fg-inverted`	`#fff`	`#000`	Text on primary surfaces
`--embark-ui-fg-muted`	`rgba(0,0,0,.6)`	`hsla(0,0%,100%,.6)`	Secondary text
`--embark-ui-primary`	`#000`	`#fff`	Primary buttons and accents
`--embark-ui-secondary`	`#e4e4e4`	`#2a2a2a`	Secondary surfaces
`--embark-ui-bd`	`#ebebeb`	`#3a3a3a`	Borders
`--embark-ui-bd-intense`	`#a9a9a9`	`#4a4a4a`	Strong borders
`--embark-ui-overlay`	`hsla(0,0%,100%,.8)`	`rgba(0,0,0,.8)`	Modal overlay
`--embark-ui-shadow` / `--embark-ui-shadow-c`	`0 0 0 0 transparent` / `rgba(0,0,0,.1)`	same	Shadow / shadow color
`--embark-ui-info` / `--embark-ui-bg-info`	text / secondary	same	Info state
`--embark-ui-success` / `--embark-ui-bg-success`	`#000` / `#21ff51`	same	Success state
`--embark-ui-warning` / `--embark-ui-bg-warning`	`#000` / `#e9fa00`	same	Warning state
`--embark-ui-error` / `--embark-ui-bg-error`	`#fff` / `#d6204e`	same	Error state
`--embark-ui-ff`	system font stack	same	Font family
`--embark-ui-maw`	`384px`	same	Widget max width
`--embark-ui-pd` / `--embark-ui-gap`	`12px` / `10px`	same	Padding / gap
`--embark-ui-bdrs` / `--embark-ui-element-bdrs`	`20px` / `10px`	same	Container / element border radius
`--embark-ui-backdrop-blur`	`10px`	same	Backdrop blur

Custom Styling with className

Most components accept a className prop. Use it to apply additional styles without overriding the theme variables:


import { ConnectWalletButton, Address } from '@embarkai/ui-kit'
 
function Header() {
  return (
    <header>
      <ConnectWalletButton className="rounded-full px-6 shadow-md" />
      <Address address="0x742d35Cc6634C0532925a3b844Bc454e4438f44e" className="font-mono" />
    </header>
  )
}

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 {
    --embark-ui-primary: theme('colors.indigo.500');
    --embark-ui-bdrs: theme('borderRadius.xl');
  }
}

Next Steps

Components — all available UI components
Internationalization — add multi-language support
Provider Setup — configure theme and other options at the root