Theme

Theming is controlled through CSS and is highly customizable.

Firstly, you should import dockview.css:

Provided themes

dockview comes with a number of themes which are all CSS classes and can be found here. To use a dockview theme the CSS must encapsulate the component. The current list of themes is:

Theme	Description
dockview-theme-dark
dockview-theme-light
dockview-theme-vs	Based on Visual Studio
dockview-theme-abyss	Based on Visual Studio Code abyss theme
dockview-theme-dracula	Based on Visual Studio Code dracula theme
dockview-theme-replit	Based on Replit

The source code for all themes can be found here.

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