Theming
Every colour, radius and spacing value in the explorer is a --de-* custom property. No component contains a hardcoded colour — one hex in a component is where a themeable library stops being themeable.
To restyle, override the tokens. You should never need to write a rule against a .de-* class.
.my-explorer {
--de-accent: #7c3aed;
--de-radius: 4px;
--de-row-height: 48px;
--de-font-size: 13px;
}<DocumentExplorer data={documents} className="my-explorer" />The tokens
/* Surfaces */
--de-background --de-surface --de-surface-raised
--de-hover --de-selected --de-selected-strong
/* Text */
--de-foreground --de-muted --de-subtle
/* Lines */
--de-border --de-border-strong
/* Accent — focus rings, selected state, links */
--de-accent --de-accent-contrast --de-accent-soft
/* Status */
--de-danger --de-warning
/* Shape and rhythm */
--de-radius --de-radius-sm --de-spacing --de-row-height
--de-shadow --de-shadow-overlay
/* Type */
--de-font-family --de-font-size --de-font-size-sm
--de-line-height --de-icon-size
/* File-type accents */
--de-type-folder --de-type-pdf --de-type-doc --de-type-sheet
--de-type-slides --de-type-image --de-type-video --de-type-audio
--de-type-archive --de-type-text --de-type-code --de-type-file
/* Motion — minimal on purpose, and zeroed under prefers-reduced-motion */
--de-transitionDark mode
Dark mode is the same token set with different values — never a second set of component rules.
It follows prefers-color-scheme automatically. For an in-app toggle, set data-de-theme on any ancestor:
<html data-de-theme="dark"> <!-- or "light" to pin light -->document.documentElement.setAttribute('data-de-theme', isDark ? 'dark' : 'light');Declare tokens on :root
Redeclaring the light palette lower in the tree — on the explorer element itself, say — overrides any dark-mode ancestor and pins the component to light. Override individual tokens as shown above; do not re-import the base token block into a scoped selector.
Design intent
Plain, neutral, quiet. No gradients, no heavy shadows, no oversized cards, no animation for its own sake — whitespace, subtle borders, small icons and clear typographic hierarchy.
The component should read as part of your application, not as an announcement of someone else's design system.