Styles

The Kanbn board has a default style which is based on the current vscode theme, however you can override this by creating a CSS file called board.css inside the Kanbn directory (by default this is .kanbn/). A reference of class names is provided below.

You can view the default stylesheet here.

Visual Studio Code will add vscode-light, vscode-dark and vscode-high-contrast class names to the body tag, depending on the current theme.

Various Codicon icons have been used in this extension. Check here for a listing of available icons.

CSS classes

Kanbn board

kanbn-header
kanbn-header-name
kanbn-filter
kanbn-filter-input
kanbn-header-button
kanbn-header-button-filter
kanbn-header-button-clear-filter
kanbn-header-button-sprint
kanbn-header-button-burndown
kanbn-header-description
kanbn-board
kanbn-column
kanbn-column-{Column name in snake-case}
kanbn-column-name
kanbn-column-count
kanbn-create-task-button
kanbn-column-task-list-container
kanbn-column-task-list
kanbn-column-task-list.drag-over
kanbn-task
kanbn-task-row
kanbn-task-name
kanbn-task-data
kanbn-task-tags
kanbn-task-tag
kanbn-task-tag-{Tag name in snake-case}
kanbn-task-assigned
kanbn-task-date
kanbn-task-workload
kanbn-task-progress
kanbn-task-overdue
kanbn-task-comments
kanbn-task-sub-tasks

Task editor

kanbn-task-editor
kanbn-task-editor-title
kanbn-task-editor-dirty
kanbn-task-editor-dates
kanbn-task-editor-form
kanbn-task-editor-column-left
kanbn-task-editor-field
kanbn-task-editor-field-name
kanbn-task-editor-field-label
kanbn-task-editor-field-label-description
kanbn-task-editor-field-input
kanbn-task-editor-id
kanbn-task-editor-description-preview
kanbn-task-editor-button-edit-description
kanbn-task-editor-field-description
kanbn-task-editor-field-textarea
kanbn-task-editor-field-subtasks
kanbn-task-editor-row
kanbn-task-editor-row-subtask
kanbn-task-editor-column
kanbn-task-editor-field-subtask-completed
kanbn-task-editor-field-checkbox
kanbn-task-editor-field-subtask-text
kanbn-task-editor-column-buttons
kanbn-task-editor-button
kanbn-task-editor-button-delete
kanbn-task-editor-buttons
kanbn-task-editor-button-add
kanbn-task-editor-button-edit
kanbn-task-editor-field-relations
kanbn-task-editor-row-relation
kanbn-task-editor-field-relation-type
kanbn-task-editor-field-relation-task
kanbn-task-editor-field-select
kanbn-task-editor-field-comments
kanbn-task-editor-row-comment
kanbn-task-editor-field-comment-author
kanbn-task-editor-field-comment-author-value
kanbn-task-editor-field-comment-date
kanbn-task-editor-field-comment-text
kanbn-task-editor-comment-text
kanbn-task-editor-column-right
kanbn-task-editor-button-submit
kanbn-task-editor-button-archive
kanbn-task-editor-field-column
kanbn-task-editor-field-assigned
kanbn-task-editor-field-started
kanbn-task-editor-field-due
kanbn-task-overdue
kanbn-task-editor-field-completed
kanbn-task-editor-field-progress
kanbn-task-progress
kanbn-task-editor-field-tags
kanbn-task-editor-row-tag
kanbn-task-editor-field-tag
kanbn-task-editor-tag-highlight
kanbn-task-tag-{Tag name in snake-case}

Burndown chart

kanbn-burndown
kanbn-burndown-settings
kanbn-burndown-settings-sprint-select
kanbn-burndown-settings-input
kanbn-burndown-settings-start-date
kanbn-burndown-settings-end-date
kanbn-burndown-settings-sprint-mode
kanbn-burndown-settings-date-mode
kanbn-header-button-active
kanbn-header-button-inactive
kanbn-burndown-chart
kanbn-burndown-line
kanbn-burndown-point
kanbn-burndown-grid
kanbn-burndown-tooltip
kanbn-burndown-tooltip-date
kanbn-burndown-tooltip-workload
kanbn-burndown-tooltip-count
kanbn-burndown-tooltip-task

Syntax highlighting

See index.css for built-in syntax highlighting styles and token class-names.

4.3 KiB Raw Blame History