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

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

[Feature Request] Dark mode about vscode-kanban HOT 3 OPEN

mkloubert commented on May 25, 2024 3

[Feature Request] Dark mode

from vscode-kanban.

Comments (3)

lonix1 commented on May 25, 2024 2

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:

main board
view card
edit card
delete card

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

from vscode-kanban.

SheepDomination commented on May 25, 2024 2

@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 👍

from vscode-kanban.

LiprikON2 commented on May 25, 2024

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