Dockview
    Preparing search index...

    Interface DockviewTheme

    interface DockviewTheme {
        className: string;
        colorScheme?: "light" | "dark";
        dndOverlayBorder?: string;
        dndOverlayMounting?: "absolute" | "relative";
        dndPanelOverlay?: "group" | "content";
        dndTabIndicator?: "line" | "fill";
        edgeGroupCollapsedSize?: number;
        gap?: number;
        name: string;
        tabAnimation?: TabAnimation;
        tabGroupIndicator?: DockviewTabGroupIndicator;
    }
    Index

    Properties

    className colorScheme? dndOverlayBorder? dndOverlayMounting? dndPanelOverlay? dndTabIndicator? edgeGroupCollapsedSize? gap? name tabAnimation? tabGroupIndicator?

    Properties

    className: string

    The class name to apply to the theme containing the CSS variables settings.

    colorScheme?: "light" | "dark"

    Whether the theme is light or dark. Useful for adapting panel content colors.

    dndOverlayBorder?: string

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

    dndOverlayMounting?: "absolute" | "relative"

    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.

    dndPanelOverlay?: "group" | "content"

    When dragging a panel, the overlay can either encompass the panel contents or the entire group including the tab header space.

    dndTabIndicator?: "line" | "fill"

    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'.

    edgeGroupCollapsedSize?: number

    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.

    gap?: number

    The gap between the groups

    name: string

    The name of the theme

    tabAnimation?: 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".

    tabGroupIndicator?: DockviewTabGroupIndicator

    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.

    Settings

    Member Visibility

    On This Page

    Properties