Theme

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

Firstly, you should import dockview.css:

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 you should pass the theme object to the theme property, for other components such as split, pane and grid views you should use set the themes associated CSS class to 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 associated CSS here.

Build your own theme

You can define your own DockviewTheme object and pass it to the theme property.

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 primarily through a long list of CSS variables which can be modified by the user either entirely for a new theme or partial for a modification to an existing theme.

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 extends existing themes or create new themes.

As an example if you wanted to extend the dockview-theme-abyss theme to dislay a within the tabs container you may try:

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