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.
Each column is given a CSS class containing the column name in param-case. You can use this to apply custom styles to specific columns.
For example, say we have a column called 'In Progress'. We can apply a custom border colour like so:
.kanbn-column-in-progress .kanbn-column-task-list {
border-color: #ff0;
}Similarly, each tag is given a CSS class containing the tag name in param-case.
For example, say we have tags called 'QA required' and 'Breaking Change'. We can apply custom styles like so:
.kanbn-task-tag-qa-required {
background-color: #418;
}
.kanbn-task-tag-breaking-change {
background-color: #900;
color: #eee;
font-size: 1.5em;
}The task cards that appear on the Kanbn board can be configured by showing or hiding different elements, or by applying alternative styles to them.
The following elements are hidden by default (but can be re-enabled by adding a custom board style):
- Updated date
- Started date
- Due date
- Completed date
- Number of comments
- Relations
Task fields are generally contained within a .kanbn-task-data element, most of which have display: inline-block by default. Additionally, the outer-container of a task card is given CSS classes containing the task's column name, completed status and overdue status.
Here's an example of a task card style using some of the above features:
.kanbn-task-data-relation {
display: block; /* this will display task relations, one per line */
}
.kanbn-task-data-relation-blocks {
color: #900;
font-weight: bold; /* this will highlight task relations of type 'blocks' */
}
.kanbn-task-completed .kanbn-task-data-completed {
display: inline-block; /* this will show the completed date only for tasks that have been completed */
}kanbn-headerkanbn-header-namekanbn-filterkanbn-filter-inputkanbn-header-buttonkanbn-header-button-filterkanbn-header-button-clear-filterkanbn-header-button-sprintkanbn-header-button-burndownkanbn-header-descriptionkanbn-boardkanbn-columnkanbn-column-{Column name in param-case}kanbn-column-namekanbn-column-countkanbn-column-buttonkanbn-create-task-buttonkanbn-sort-column-buttonkanbn-column-sortedkanbn-column-task-list-containerkanbn-column-task-listkanbn-column-task-list.drag-overkanbn-taskkanbn-task-{Column name in param-case}kanbn-task-overduekanbn-task-completeddragkanbn-task-datakanbn-task-data-labelkanbn-task-data-namekanbn-task-data-tagskanbn-task-tagkanbn-task-tag-{Tag name in param-case}kanbn-task-data-custom-fieldkanbn-task-data-{Custom field name in param-case}kanbn-task-data-assignedkanbn-task-data-createdkanbn-task-data-updatedkanbn-task-data-startedkanbn-task-data-duekanbn-task-data-completedkanbn-task-data-commentskanbn-task-data-sub-taskskanbn-task-data-relationkanbn-task-data-relation-{Relation type in param-case}kanbn-task-data-workloadkanbn-task-progress
kanbn-task-editorkanbn-task-editor-titlekanbn-task-editor-dirtykanbn-task-editor-dateskanbn-task-editor-formkanbn-task-editor-column-leftkanbn-task-editor-fieldkanbn-task-editor-field-namekanbn-task-editor-field-labelkanbn-task-editor-field-label-descriptionkanbn-task-editor-field-inputkanbn-task-editor-custom-fieldkanbn-task-editor-custom-field-{Custom field name in param-case}kanbn-task-editor-custom-checkboxkanbn-task-editor-idkanbn-task-editor-description-previewkanbn-task-editor-button-edit-descriptionkanbn-task-editor-field-descriptionkanbn-task-editor-field-textareakanbn-task-editor-field-subtaskskanbn-task-editor-rowkanbn-task-editor-row-subtaskkanbn-task-editor-columnkanbn-task-editor-field-subtask-completedkanbn-task-editor-field-checkboxkanbn-task-editor-field-subtask-textkanbn-task-editor-column-buttonskanbn-task-editor-buttonkanbn-task-editor-button-deletekanbn-task-editor-buttonskanbn-task-editor-main-buttonskanbn-task-editor-button-addkanbn-task-editor-button-editkanbn-task-editor-field-relationskanbn-task-editor-row-relationkanbn-task-editor-field-relation-typekanbn-task-editor-field-relation-taskkanbn-task-editor-field-selectkanbn-task-editor-field-commentskanbn-task-editor-row-commentkanbn-task-editor-field-comment-authorkanbn-task-editor-field-comment-author-valuekanbn-task-editor-field-comment-datekanbn-task-editor-field-comment-textkanbn-task-editor-comment-textkanbn-task-editor-column-rightkanbn-task-editor-button-submitkanbn-task-editor-button-archivekanbn-task-editor-field-columnkanbn-task-editor-field-assignedkanbn-task-editor-field-startedkanbn-task-editor-field-duekanbn-task-overduekanbn-task-editor-field-completedkanbn-task-editor-field-progresskanbn-task-progresskanbn-task-editor-field-tagskanbn-task-editor-row-tagkanbn-task-editor-field-tagkanbn-task-editor-tag-highlightkanbn-task-tag-{Tag name in param-case}
kanbn-burndownkanbn-burndown-settingskanbn-burndown-settings-sprint-selectkanbn-burndown-settings-inputkanbn-burndown-settings-start-datekanbn-burndown-settings-end-datekanbn-burndown-settings-sprint-modekanbn-burndown-settings-date-modekanbn-header-button-activekanbn-header-button-inactivekanbn-burndown-chartkanbn-burndown-linekanbn-burndown-pointkanbn-burndown-gridkanbn-burndown-tooltipkanbn-burndown-tooltip-datekanbn-burndown-tooltip-workloadkanbn-burndown-tooltip-countkanbn-burndown-tooltip-task
See index.css for built-in syntax highlighting styles and token class-names.