[Feature Request] Dark mode

[lonix1]

Would be nice to have this extension in dark mode. There is a way to change the UI with css.

Has anyone worked up a decent-looking dark mode stylsheet that can be shared here?

@mkloubert what are the css classes for background, swimlanes, etc.? They are not referenced in the default stylesheet.

[lonix1]

Okay I hacked something together... Put this into vscode-kanban.css:

/* background */
body {
  background-color: #232323;   /* this is vscode's main background color */
}

/* swimlanes */
#vsckb-card-todo,
#vsckb-card-in-progress,
#vsckb-card-testing,
#vsckb-card-done {
  border-color: #444;
}
#vsckb-card-todo .card-header,
#vsckb-card-in-progress .card-header,
#vsckb-card-testing .card-header,
#vsckb-card-done .card-header {
  background-color: #232323 !important;
  color: #fff !important;
  padding: 0.3em 1em !important;
}
#vsckb-card-todo .card-body,
#vsckb-card-in-progress .card-body,
#vsckb-card-testing .card-body,
#vsckb-card-done .card-body {
  background-color: #232323 !important;
  color: #fff !important;
}
#vsckb-card-todo .card-header,
#vsckb-card-in-progress .card-header,
#vsckb-card-testing .card-header,
#vsckb-card-done .card-header {
  padding: 0.3em 1em !important;
}

/* cards */
.vsckb-kanban-card {
  background-color: #444 !important;
  border-color: rgba(44, 143, 157, 0.25) !important;
}
.vsckb-kanban-card:hover {
  border-color: rgba(44, 143, 157, 1) !important;
}
.vsckb-kanban-card .vsckb-kanban-card-info {
  background-color: #333 !important;
  color: #fff !important;
}
.vsckb-kanban-card .vsckb-kanban-card-footer * {
  color: #fff !important;
}
.vsckb-kanban-card .vsckb-kanban-card-type {
  background-color: rgba(44, 143, 157, 0.75) !important;
}

Notes:

• this also makes some stuff smaller to create more space
• all cards are the same color, I couldn't find the css classes for bug/important/note... I like it though

I didn't have time to do dark mode for everything, but I did the main part:

• [x] main board
• [ ] view card
• [ ] edit card
• [ ] delete card

Someone else please finish the other items and post the css here.

[SheepDomination]

@lonix1 The new name for the CSS file is kanban.css therefore after looking at your style sheet, they are not identical of the old name to the new name. I hope soon to re-create a dark version of your style sheet 👍

[LiprikON2]

I pulled html file out of vscode and used Dark Reader chrome extension to generate dark mode styles. Then I extracted these styles using this script and the end result doesn't leave any white spots.

https://gist.github.com/LiprikON2/8c136f68b13b885fb32a21ba986a3663