Styling & Theming

Theme Options

Customize the widget through the theme prop on YakProvider:

<YakProvider
  theme={{
    position: "bottom-right",
    colorMode: "system",
    displayMode: "chatbox",
  }}
  {...props}
>
  <YakWidget />
</YakProvider>

Option	Type	Default	Description
`position`	`WidgetPosition`	`"bottom-right"`	Widget position on screen
`colorMode`	`"light"` \| `"dark"` \| `"system"`	`"system"`	Color mode preference
`displayMode`	`"chatbox"` \| `"drawer"`	`"chatbox"`	Floating panel or full-height side drawer
`light`	`ThemeColors`	—	Color customization for light mode
`dark`	`ThemeColors`	—	Color customization for dark mode

Position Options

Position	Description
`"top-left"`	Top-left corner
`"top-center"`	Top center
`"top-right"`	Top-right corner
`"left-center"`	Left side, vertically centered
`"right-center"`	Right side, vertically centered
`"bottom-left"`	Bottom-left corner
`"bottom-center"`	Bottom center
`"bottom-right"`	Bottom-right corner (default)

Custom Colors

Customize colors for light and dark modes separately:

<YakProvider
  theme={{
    light: {
      background: "#ffffff",
      border: "#e5e5e5",
      messageBackground: "#dcfce7",
      placeholderColor: "#a3a3a3",
      submitButtonColor: "#171717",
      submitButtonTextColor: "#ffffff",
      headerIconColor: "#737373",
    },
    dark: {
      background: "#0a0a0a",
      border: "#262626",
      messageBackground: "#166534",
      placeholderColor: "#737373",
      submitButtonColor: "#fafafa",
      submitButtonTextColor: "#171717",
      headerIconColor: "#a3a3a3",
    },
  }}
  {...props}
>
  <YakWidget
    lightButton={{ background: "#171717", color: "#ffffff", border: "#171717" }}
    darkButton={{ background: "#fafafa", color: "#171717", border: "#fafafa" }}
  />
</YakProvider>

ThemeColors Properties

Property	Type	Description
`background`	`string`	Main background color of the chat panel
`border`	`string`	Border color for the panel and elements
`messageBackground`	`string`	User message bubble background
`placeholderColor`	`string`	Input placeholder text color
`submitButtonColor`	`string`	Submit button background color
`submitButtonTextColor`	`string`	Submit button text/icon color
`headerIconColor`	`string`	Header icon color (restart, close buttons)

Display Modes

Chatbox (Default)

A floating panel that appears near the trigger button:

<YakProvider theme={{ displayMode: "chatbox" }} {...props}>
  <YakWidget />
</YakProvider>

Drawer

A full-height side panel that slides in from the edge of the screen:

<YakProvider theme={{ displayMode: "drawer", position: "right-center" }} {...props}>
  <YakWidget />
</YakProvider>

For drawer mode, the position prop controls which side:

Positions containing "left" → drawer slides in from the left
Positions containing "right" or center → drawer slides in from the right

The drawer becomes full-width on mobile screens (below 640px).

Customizing Drawer Width

Override the default 420px width with CSS:

.yak-widget-container.yak-widget-drawer {
  width: 500px !important;
}

@media (min-width: 768px) {
  .yak-widget-container.yak-widget-drawer {
    width: 600px !important;
  }
}

Trigger Button

Customize the trigger button appearance with lightButton and darkButton props:

<YakWidget
  triggerLabel="Chat with AI"
  lightButton={{ background: "#171717", color: "#ffffff", border: "#171717" }}
  darkButton={{ background: "#fafafa", color: "#171717", border: "#fafafa" }}
/>

Property	Type	Description
`background`	`string`	Button background color
`color`	`string`	Button text/icon color
`border`	`string`	Button border color

Or replace the trigger entirely with a custom button:

import { useYak } from "@yak-io/react";

function CustomTrigger() {
  const { open, isOpen } = useYak();

  if (isOpen) return null;

  return (
    <button
      onClick={() => open()}
      className="fixed bottom-4 right-4 bg-blue-500 text-white rounded-full p-4 shadow-lg"
    >
      Chat with AI
    </button>
  );
}

// In your layout — don't render YakWidget if using a custom trigger
<YakProvider {...props}>
  <CustomTrigger />
  {children}
</YakProvider>

Color Mode

// Force light mode
<YakProvider theme={{ colorMode: "light" }} {...props} />

// Force dark mode
<YakProvider theme={{ colorMode: "dark" }} {...props} />

// Follow system preference (default)
<YakProvider theme={{ colorMode: "system" }} {...props} />