Theming

Dockview components accept a theme property which is highly customizable. Theming is largely controlled through CSS variables, however some properties can only be adjusted by editing the theme object directly.

Make sure you have imported dockview.css as described in Installation.

Hiding Borders

The hideBorders option removes the borders rendered between groups in the grid. This is a layout option rather than a CSS variable, useful when your theme already provides sufficient visual separation between groups.

Provided themes

dockview comes with a number of built-in themes. Each theme is represented as an object that can be imported.

For dock components pass the theme object to the theme property. For other components such as split, pane, and grid views, set the theme's associated CSS class on the className property.

import { themeAbyss } from "dockview-react";

// For dock components
theme={themeAbyss}

// For other components
const {className} = themeAbyss;

Theme	Description
Dark
Light
Visual Studio	Based on Visual Studio
Abyss	Based on Visual Studio Code abyss theme
Dracula	Based on Visual Studio Code dracula theme
Light Spaced
Abyss Spaced
Nord	Based on the Nord color palette
Nord Spaced
Catppuccin Mocha	Based on the Catppuccin Mocha flavour
Catppuccin Mocha Spaced
Monokai	Based on the Monokai color scheme
Solarized Light	Based on the Solarized light palette
Solarized Light Spaced
GitHub Dark	Based on the GitHub dark color scheme
GitHub Dark Spaced
GitHub Light	Based on the GitHub light color scheme
GitHub Light Spaced

The source code for all themes can be found here and the compiled CSS here.

Build your own theme

You can define your own DockviewTheme object and pass it to the theme property. At minimum you need to provide a name and a className. The class name should match a CSS class where you define your theme variables.

className	The class name to apply to the theme containing the CSS variables settings. className: string
colorScheme	Whether the theme is light or dark. Useful for adapting panel content colors. colorScheme?: 'dark' | 'light'
dndOverlayBorder	The CSS value applied to --dv-drag-over-border when this theme is active. For example '2px solid var(--dv-active-sash-color)'. When unset the CSS variable is left to the stylesheet default (none). dndOverlayBorder?: string
dndOverlayMounting	The mouting position of the overlay shown when dragging a panel. absolute will mount the overlay to root of the dockview component whereas relative will mount the overlay to the group container. dndOverlayMounting?: 'relative' | 'absolute'
dndPanelOverlay	When dragging a panel, the overlay can either encompass the panel contents or the entire group including the tab header space. dndPanelOverlay?: 'content' | 'group'
dndTabIndicator	The style of the drop indicator shown when dragging a tab over another tab. 'line' renders a thin 4px insertion strip at the tab edge (suited to bordered/spaced themes). 'fill' renders a half-width highlighted area (suited to themes that use a background fill). Defaults to 'fill'. dndTabIndicator?: 'fill' | 'line'
edgeGroupCollapsedSize	The collapsed size (in px) for edge groups when using this theme. When set, this overrides the default 35px collapsed size so that collapsed edge groups match the theme's tab strip height. edgeGroupCollapsedSize?: number
gap	The gap between the groups gap?: number
name	The name of the theme name: string
tabAnimation	Controls tab drag-and-drop reorder animation style. - "smooth": tabs animate smoothly during drag-and-drop reorder — tabs slide apart to reveal the insertion gap, then animate to their final positions on drop (Chrome-like behavior). - "default": standard tab reorder behavior without animation. Defaults to "default". tabAnimation?: TabAnimation
tabGroupIndicator	Controls how tab groups are visually indicated in the tab bar. - 'wrap' (default): Chrome-style SVG underline that wraps around the active tab with rounded corners. Requires JavaScript for positioning and path computation. - 'none': Flat continuous colored bar spanning the full tab group width. Unlike 'wrap', the bar does not curve around the active tab. tabGroupIndicator?: DockviewTabGroupIndicator

Theme properties

The DockviewTheme object accepts a number of optional properties beyond name / className that change layout behaviour rather than CSS-variable values. The most commonly used ones are listed below.

tabAnimation

Controls how tabs animate when they are reordered or moved across groups.

• 'none' (default) — no animation, tabs snap to their new position.
• 'smooth' — animated FLIP transition between positions, including for vertical tab strips and cross-group moves.

import { themeAbyss } from 'dockview-react';

const theme = { ...themeAbyss, tabAnimation: 'smooth' as const };

tabGroupIndicator

Controls how the indicator under a tab group's tabs is rendered.

• 'wrap' (default) — a continuous coloured bar wraps the group's tabs.
• 'none' — no indicator is drawn.

dndOverlayBorder

Controls whether drop-target overlays (the highlight that appears when dragging a panel over a group) render an outline border. Themes can opt out for a flatter look. Boolean, default depends on the theme.

dndTabIndicator

Controls how the drop position indicator within a tab strip is drawn while dragging a tab.

• 'line' — a thin coloured line marks the insertion point.
• 'fill' — the target slot is filled with the active accent colour.

edgeGroupCollapsedSize

Per-theme override for the pixel size of an edge group when it is collapsed. The default differs between compact and spaced themes; override this when you need an exact rail size.

colorScheme

Hint passed to the browser via the color-scheme CSS property — 'light' or 'dark'. Native form controls and scrollbars adapt accordingly.

Interactive theme builder

The live demo includes an interactive theme builder that lets you tweak any CSS variable and the theme properties above, then copy the resulting theme object and CSS. This is the fastest way to author a custom theme without writing CSS by hand.

Customizing Theme

The provided themes are controlled through CSS variables which can be overridden entirely for a new theme, or partially to tweak an existing one.

Variable	Description
--dv-paneview-active-outline-color
--dv-tabs-and-actions-container-font-size
--dv-tabs-and-actions-container-height
--dv-tab-close-icon
--dv-drag-over-background-color
--dv-drag-over-border-color
--dv-tabs-container-scrollbar-color
--dv-group-view-background-color
--dv-tabs-and-actions-container-background-color
--dv-activegroup-visiblepanel-tab-background-color
--dv-activegroup-hiddenpanel-tab-background-color
--dv-inactivegroup-visiblepanel-tab-background-color
--dv-inactivegroup-hiddenpanel-tab-background-color
--dv-tab-divider-color
--dv-activegroup-visiblepanel-tab-color
--dv-activegroup-hiddenpanel-tab-color
--dv-inactivegroup-visiblepanel-tab-color
--dv-inactivegroup-hiddenpanel-tab-color
--dv-separator-border
--dv-paneview-header-border-color
--dv-icon-hover-background-color
--dv-floating-box-shadow
--dv-active-sash-color
--dv-background-color

Extending Theme

You can extend existing themes or create new ones.

As an example, if you wanted to extend the dockview-theme-abyss theme to display a border below the tabs container you may try:

.dockview-theme-abyss {
  .dv-groupview {
      &.dv-active-group {
          > .dv-tabs-and-actions-container {
              border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
          }
      }
      &.dv-inactive-group {
          > .dv-tabs-and-actions-container {
              border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
          }
      }
  }
}