Theme

Introduction

dockview requires some CSS to work correctly. The CSS is exported as one file under dockview/dict/styles/dockview.css and should be imported at some point in your application

Example import with .css file

@import './node_modules/dockview/dist/styles/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:

• dockview-theme-dark
• dockview-theme-light
• dockview-theme-vs
• dockview-theme-abyss
• dockview-theme-dracula
• dockview-theme-replit

Customizing Theme

dockview supports theming through the use of css properties. You can view the built-in themes at dockview/src/theme.scss and are free to build your own themes based on these css properties.

CSS Property	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

You can further customise the theme through adjusting class properties but this is up you. For example if you wanted to add a bottom border to the tab container for an active group in the DockviewReact component you could write:

Additional CSS to show a bottom border on active groups

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