mirror of
https://github.com/mathuo/dockview
synced 2025-02-08 17:35:44 +00:00
86 lines
4.1 KiB
Plaintext
86 lines
4.1 KiB
Plaintext
---
|
|
sidebar_position: 1
|
|
description: Theming Dockview Components
|
|
---
|
|
|
|
# Theme
|
|
|
|
## Introduction
|
|
|
|
`dockview` requires some CSS to work correctly.
|
|
The CSS is exported as one file under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css)
|
|
and should be imported at some point in your application
|
|
|
|
```css title="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](https://github.com/mathuo/dockview/blob/master/packages/dockview-core/src/theme.scss).
|
|
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`](https://github.com/mathuo/dockview/blob/master/packages/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:
|
|
|
|
```css title="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);
|
|
}
|
|
}
|
|
}
|
|
```
|