ThemeProvider

Wraps a <TalentTree> (or any children) and sets CSS custom properties on the container <div>, allowing color customisation without touching the component internals.

Import

import { ThemeProvider } from '@real-life-talent-tree/ui'

Props

Prop	Type	Required	Description
theme	Partial<Theme>	No	Override any subset of theme tokens. Unset tokens fall back to defaults.
children	ReactNode	Yes	Content wrapped by the provider (typically <TalentTree>).
className	string	No	CSS class applied to the wrapper <div>.
style	CSSProperties	No	Inline styles merged onto the wrapper.

CSS custom properties

All tokens are set on the wrapper <div> as CSS custom properties. You can also set them directly in CSS on any ancestor element.

CSS Variable	Default	Description
--tt-level-1	#9d9d9d	Level 1 accent — gray (Aware)
--tt-level-2	#1eff00	Level 2 accent — green (Familiar)
--tt-level-3	#0070dd	Level 3 accent — blue (Proficient)
--tt-level-4	#a335ee	Level 4 accent — purple (Advanced)
--tt-level-5	#ff8000	Level 5 accent — orange (Expert)
--tt-node-bg	transparent	Talent node tile background
--tt-node-radius	8px	Talent node border radius
--tt-pip-empty	#555a6e	Empty pip border color
--tt-text-primary	#5c3317	Path titles and talent names
--tt-text-secondary	#3a2010	Popup body text
--tt-popup-bg	#fdf6ec	Popup background
--tt-overlay-bg	rgba(26,31,46,.6)	Mobile overlay backdrop

Example

import { TalentTree, ThemeProvider } from '@real-life-talent-tree/ui'
import '@real-life-talent-tree/ui/styles.css'

export default function DarkTree({ tree }) {
  return (
    <ThemeProvider
      theme={{
        nodeBg: '#1a1a2e',
        textPrimary: '#e0e0e0',
        textSecondary: '#b0b0b0',
        popupBg: '#16213e',
        overlayBg: 'rgba(0,0,0,0.7)',
      }}
    >
      <TalentTree tree={tree} />
    </ThemeProvider>
  )
}