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";

// 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
Replit	Based on Replit
Light Spaced
Abyss 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
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'
gap	The gap between the groups gap?: number
name	The name of the theme name: string

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);
          }
      }
  }
}