Skip to content

Instantly share code, notes, and snippets.

@FreshlyBrewedCode
Last active May 6, 2021 01:31
Show Gist options
  • Save FreshlyBrewedCode/d493cf89ad1ce6b4041a2cf2e31eab1f to your computer and use it in GitHub Desktop.
Save FreshlyBrewedCode/d493cf89ad1ce6b4041a2cf2e31eab1f to your computer and use it in GitHub Desktop.
Dark theme for the VSCode Kanba extension (https://github.com/mkloubert/vscode-kanban). Screenshot in comments. The commandbar.json can be used with the vscode-commandbar extension (https://github.com/ppatotski/vscode-commandbar) to add a shortcut for the Kanban board to the status bar.
{
"skipTerminateQuickPick": true,
"skipSwitchToOutput": false,
"skipErrorMessage": true,
"commands": [
{
"text": "$(project) Kanban",
"tooltip": "Open Kanban Board",
"color": "white",
"command": "extension.kanban.openBoard",
"commandType": "palette",
"alignment": "left",
"skipTerminateQuickPick": false,
"priority": 0
}
]
}
body {
background-color: inherit;
}
.border-dark {
border-color: transparent !important;
}
.border {
border: none !important;
}
.text-dark {
color: #e0e0e0 !important;
}
.text-white {
color: #e0e0e0 !important;
}
.bg-light {
background-color: transparent !important;
}
.modal-header .bg-secondary {
background-color: #272727 !important;
}
.card {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: transparent !important;
background-clip: border-box;
border: none;
border-radius: 0;
}
.card-header {
background-color: #ffffff27 !important;
border-radius: 6px;
padding: 6px !important;
justify-content: center;
border-left: 5px solid #ffffff5b;
}
.card-header span {
display: inline-block;
height: 100%;
margin-left: 1em;
margin-top: 3px;
}
.card-body {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 0 !important;
padding-top: 6px !important;
}
body main .row .col {
padding-bottom: 10px;
padding-left: 8px;
padding-right: 8px;
}
.bg-primary .card-header {
border-left: 5px solid var(--primary) !important;
}
.bg-warning .card-header {
border-left: 5px solid var(--warning) !important;
}
.bg-success .card-header {
border-left: 5px solid var(--success) !important;
}
.vsckb-kanban-card {
clear: both;
display: table;
margin-bottom: 8px;
width: 100%;
border-radius: 5px;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.13) !important;
}
.vsckb-kanban-card .vsckb-kanban-card-info .vsckb-kanban-card-body {
margin-top: 0;
min-height: 0;
overflow-x: hidden;
padding: 2px 8px;
word-wrap: break-word;
}
.vsckb-kanban-card .bg-white {
background-color: transparent !important;
}
.vsckb-kanban-card .bg-info {
background-color: rgba(255,255,255,0.2) !important;
}
.vsckb-kanban-card .bg-dark {
background-color: var(--warning) !important;
}
.vsckb-kanban-card .vsckb-kanban-card-info .vsckb-kanban-card-category {
clear: both;
margin-left: 0.5em;
display: block;
width: min-content;
font-size: 0.75em;
font-style: normal;
padding: 0 6px 2px 6px;
border-radius: 4px;
background-color: rgba(255,255,255,0.2);
}
.vsckb-kanban-card .vsckb-kanban-card-info .vsckb-kanban-card-progress {
clear: both;
display: block;
height: auto !important;
overflow: hidden;
padding: 0;
width: 100%;
margin: 5px 0;
background-color: rgba(255,255,255,0.1);
}
.vsckb-kanban-card .vsckb-kanban-card-info .vsckb-kanban-card-progress .bg-danger {
background-color: var(--primary) !important;
}
#vsckb-card-done .vsckb-kanban-card .bg-info, #vsckb-card-done .vsckb-kanban-card .bg-dark, #vsckb-card-done .vsckb-kanban-card .bg-danger {
background-color: var(--success) !important;
}
@FreshlyBrewedCode
Copy link
Author

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment