Theming and customization

<VideoStudioProvider theme="light">    {/* always light */}
<VideoStudioProvider theme="dark">     {/* always dark */}
<VideoStudioProvider theme="system">   {/* default — follow OS preference */}

<VideoStudioProvider logo={<img src="/brand.svg" className="h-5 w-auto" />}>
<VideoStudioProvider logo={<MyLogoComponent />}>
<VideoStudioProvider logo="Acme Studio">           {/* string — rendered as text */}
<VideoStudioProvider logo={null}>                  {/* default VideoIcon */}

import { LogOutIcon, SettingsIcon } from 'lucide-react'

const BUTTONS = [
  { id: 'settings',  label: 'Settings',  icon: SettingsIcon, onClick: () => openSettings() },
  { id: 'dashboard', label: 'Dashboard', icon: LogOutIcon,   onClick: () => router.push('/') },
]

<VideoStudioProvider sidebarButtons={BUTTONS}>

<VideoStudioProvider defaultActivePanel="stock">

  studio primitives  →  studio semantic tokens  →  shadcn semantic tokens  →  components
  (gray, accent)        (surface, border, text)    (background, primary)

<VideoStudioProvider
  themeOverrides={{
    primary:              '14 165 233',   // sky-500, raw RGB triple
    studioAccent:         '14 165 233',
    studioAccentHover:    '2 132 199',
    studioSelectionColor: '14 165 233',
  }}
>

<VideoStudioProvider
  themeOverrides={{
    light: {
      primary:      '14 116 144',
      studioAccent: '14 116 144',
      studioAppBg:  '248 250 252',
    },
    dark: {
      primary:      '56 189 248',
      studioAccent: '56 189 248',
      studioAppBg:  '8 11 19',
    },
  }}
>

<VideoStudioProvider
  theme="dark"
  themeOverrides={{
    // 1. Accent (4 tokens) — drives buttons, focus ring, selection
    primary:              '124 58 237',
    studioAccent:         '124 58 237',
    studioAccentHover:    '109 40 217',
    studioSelectionColor: '124 58 237',

    // 2. Surface stack (5 tokens) — outermost bg to floating popovers
    studioAppBg:          '12 10 24',
    studioSurfaceGround:  '20 18 36',
    studioSurfaceRaised:  '28 26 48',
    studioSurfaceOverlay: '38 36 62',
    studioSurfaceFloat:   '52 48 84',

    // 3. Border tokens (3 tokens)
    studioBorderSubtle:  '36 32 56',
    studioBorderDefault: '52 48 78',
    studioBorderStrong:  '78 72 110',

    // 4. Text tokens (4 tokens)
    studioTextPrimary:   '243 244 246',
    studioTextSecondary: '180 184 200',
    studioTextTertiary:  '130 136 160',
    studioTextDisabled:  '88 92 116',

    // 5. Timeline (6 tokens)
    studioTimelineBg:          '14 12 28',
    studioTimelineRulerBg:     '18 16 36',
    studioTimelineRulerText:   '160 168 200',
    studioTimelineTrackBorder: '36 32 56',
    studioTimelinePlayhead:    '244 63 94',     // red — leave as is unless you want pink/orange
    studioTimelineSnap:        '250 204 21',    // amber

    // 6. Track type colours (9 tokens — usually you only change a couple)
    studioTrackVideo:   '99 102 241',
    studioTrackAudio:   '139 92 246',
    studioTrackText:    '236 72 153',
    studioTrackImage:   '14 165 233',
    studioTrackOverlay: '20 184 166',
  }}
>

import { applyThemeTokensToElement, createThemeTokens } from '@studio-dev/vsdk'

function applyBrand(brand: 'sky' | 'violet') {
  const root = document.querySelector('.vsdk-root') as HTMLElement
  const tokens = createThemeTokens(
    brand === 'sky'
      ? { primary: '14 165 233', studioAccent: '14 165 233' }
      : { primary: '124 58 237', studioAccent: '124 58 237' }
  )
  applyThemeTokensToElement(root, tokens)
}

import { resolveThemeOverrides, type ThemeOverrides } from '@studio-dev/vsdk'

const overrides: ThemeOverrides = {
  light: { primary: '30 80 50' },
  dark:  { primary: '155 120 255' },
}
const tokens = resolveThemeOverrides(overrides, 'dark') // { primary: '155 120 255' }

import { Save } from 'lucide-react'

<VideoStudioProvider icons={{ save: Save }}>

import * as Lucide from 'lucide-react'

// Define OUTSIDE the component (or wrap in useMemo) — the SDK compares by identity.
const ICONS = {
  save:         Lucide.Save,
  play:         Lucide.Play,
  pause:        Lucide.Pause,
  undo:         Lucide.Undo2,
  redo:         Lucide.Redo2,
  delete:       Lucide.Trash2,
  add:          Lucide.Plus,
  // …continue for every key in StudioIconMap
}

<VideoStudioProvider icons={ICONS}>

defaults < plugin-registered icons (registerIcons) < user overrides (icons prop)

<div className="bg-studio-surface-raised text-studio-text-primary border border-studio-border-subtle rounded-lg p-4">
  <span className="text-studio-track-audio">Audio</span>
  <div className="bg-studio-accent/30">Soft accent surface</div>
</div>

<button className="bg-studio-accent text-white hover:bg-studio-accent/90 rounded-md px-3 py-1.5">
  Brand-matched button
</button>

.my-floating-panel {
  background: rgb(var(--studio-surface-float));
  color: rgb(var(--studio-text-primary));
  border: 1px solid rgb(var(--studio-border-default));
  box-shadow: var(--studio-shadow-lg);
  border-radius: var(--radius);
}

<VideoStudioProvider
  className="fixed inset-0"      // covers the whole viewport
  theme="dark"
>
  <StudioEditor className="h-full" />
</VideoStudioProvider>

<VideoStudioProvider
  theme="system"                         // user's OS preference for surface scale
  themeOverrides={{
    primary:      '124 58 237',          // brand stays constant
    studioAccent: '124 58 237',
  }}
>

<header className="flex items-center justify-between border-b border-studio-border-subtle bg-studio-surface-raised px-4 py-2">
  <h1 className="text-studio-text-primary">My App</h1>
  <button className="bg-studio-accent text-white hover:bg-studio-accent/90 rounded-md px-3 py-1.5">
    Sign out
  </button>
</header>

function tenantTheme(tenantId: string): ThemeOverrides {
  switch (tenantId) {
    case 'tenant-a': return { primary: '14 165 233', studioAccent: '14 165 233' }
    case 'tenant-b': return { primary: '236 72 153', studioAccent: '236 72 153' }
    default:         return {}
  }
}

<VideoStudioProvider themeOverrides={tenantTheme(currentTenant)}>

const overrides: ThemeOverrides = {
  light: tenantLightTokens[tenantId],
  dark:  tenantDarkTokens[tenantId],
}

<VideoStudioProvider
  themeOverrides={{
    primary:              '14 165 233',
    studioAccent:         '14 165 233',
    studioAccentHover:    '2 132 199',
    studioSelectionColor: '14 165 233',
  }}
>

.vsdk-root .my-extra-class {
  /* applies only inside the editor */
}