Trello custom theme

README.md

I'm using this Chrome Extension https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb

The part with [data-idmem="50d439c16f2647e533001ec7"] allows to color member avatars. Edit with your own (check Trello source code to get IDs).

Create a black tag with the name "Done" to mark task as done visually.

trello.css

body {
  -webkit-font-smoothing: antialiased;
}

body.body-board-view {
  background-color: #1b2b34 !important;
}

body.body-board-view #header, .board-header {
  opacity: .25;
}

body.body-board-view #header:hover, .board-header:hover {
  opacity: 1;
}

.list {
  background: none;
}

.list-header, .list-header textarea, .list-header .icon-sm {
  color: white;
}

.open-card-composer {
  opacity: .5;
  color: white;
  font-weight: 500;
}

.open-card-composer:hover {
  background: none;
  opacity: 1;
  color: white;
}

.list-card {
  box-shadow: none;
  border-bottom: none;
}

.list-card-title {
  font-weight: 500;
}

.list .member {
  margin-left: 7px;
  position: relative;
}

.list .member:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: .5;
}

.list .member,
.list .member img {
  border-radius: 100%;
  width: 15px;
  height: 15px;
}

.list .member-initials {
  font-size: 8px;
  height: 15px;
  line-height: 15px;
}

[title="Cette carte comporte une description."],
[title="Vous êtes inscrit à cette carte."] {
  display: none;
}

/* Lauriane */
[data-idmem="510a46c86ff392595700220f"]:after {
  background-color: #e74c3c;
}

/* Nico */
[data-idmem="50d439c16f2647e533001ec7"]:after {
  background-color: #3498db;
}

/* Dung */
[data-idmem="5437e057e515b5b408e180f4"]:after {
  background-color: #2ecc71;
}

/* Paly */
[data-idmem="529c4513d2685d0563000a22"]:after {
  background-color: #f1c40f;
}

.markeddown ul>li {
  margin-top: 0;
  margin-bottom: 0;
}

.checklist-progress {
  margin-right: -26px;
}

.checklist-progress-percentage { display: none; }

.checklist-progress-bar {
  height: 5px;
  margin: 5px 0 0 0 !important;
  width: auto !important;
  border-radius: 3px;
  background-color: rgba(255,255,255,.1);
}

.checklist-progress-bar-current {
  background-color: rgba(255,255,255,.25);
}

.list-card-labels {
  margin: -6px -6px 10px -8px;
  position: static;
}

.list-card-details .card-label.mod-card-front {
  width: 10%;
  height: 5px;
  margin: 2px 0 2px 2px;
}

.list-card-details .card-label {
  opacity: .75;
}

.list-card-details .card-label[title="Done"] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1b2b34;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  text-indent: -999px;
  overflow: hidden;
}

.card-detail-item-header,
.card-detail-item-header-edit,
.window-sidebar h3,
.js-attachments-section .window-module-title,
.add-comment-section .window-module-title { display: none; }

.markeddown > * {
  margin: 1em 0;
  font-size: 1.15em;
  line-height: 1.4;
}

/* Activité, commentaires uniquement */
.window-main-col .window-module:last-child .window-module-title {
  display: none;
}

.window-main-col .window-module .phenom {
  display: none;
}

.window-main-col .window-module .phenom.mod-comment-type {
  display: block;
}