Themes & Variants

Five layout presets covering the shapes most trees need, selected with a single prop.

default — plain indentation, no guide lines. The safest choice for dense UI.
connected — classic connector lines between siblings, like a file-explorer tree.
compact — smaller row height, font size, and indent, for data-dense panels.
spacious — taller rows and wider indent, for touch targets or marketing-page demos.
file-explorer — tuned indentation and row radius for file/folder UIs (pair with per-node icons).

Variants only change default CSS variable values (row height, indent, connector visibility) — they compose with every other customization on this page, and you can override any individual variable a variant sets.

Dark mode with a class-based toggle

TreeKit's stylesheet reacts to prefers-color-scheme automatically, with no configuration needed — great for an app with no theme switcher of its own. But if your app has an explicit light/dark toggle (as this site does, with next-themes setting a class on <html>), that choice should always win over whatever the visitor's OS happens to prefer. A bare @media (prefers-color-scheme: dark) query can't be scoped by a class, so it keeps applying regardless — override the same variables under both of your theme classes, with higher selector specificity than .tk-tree alone so your explicit choice takes priority in both directions:

.dark .tk-tree {
  --tk-fg: #e5e7eb;
  --tk-fg-muted: #9ca3af;
  --tk-bg-hover: rgba(255, 255, 255, 0.06);
  --tk-border: #2b2d33;
  --tk-accent: #818cf8;
}

.light .tk-tree {
  --tk-fg: #1e1e24;
  --tk-fg-muted: #6b7280;
  --tk-bg-hover: rgba(0, 0, 0, 0.045);
  --tk-border: #e5e7eb;
  --tk-accent: #6366f1;
}

This is exactly the set of overrides TreeKit's own @media block applies — copy it as a starting point and adjust colors to match your brand.

The bug this actually preventsSkip the light override and there's a real, easy-to-hit failure mode: a visitor whose OS is set to dark, on a page where your toggle is set to light, gets TreeKit's dark-mode text colors rendered on your light background — pale gray text that's nearly unreadable. This isn't hypothetical; it's exactly what happens without the .light .tk-tree block above. If you're using next-themes, make sure it's configured to actually emit a light class (it doesn't by default):

<ThemeProvider attribute="class" value={{ light: "light", dark: "dark" }}>

← PreviousStyling Next →Layout