Custom CSS themes - jean/wekan GitHub Wiki

There will be upcoming Custom CSS feature with input box and Save button in Admin Panel / Layout.

Contents:

Dark theme
White theme

Dark theme

by @lonix1, could look a little like this screenshot mockup:

dark wekan

lonix1 created some css overrides with Stylish. It's not complete but I'm happy with it. I work in swimlanes mode, so that is what I changed (not list mode or calendar mode).

Colors:

adds dark mode, I used vscode as a reference

Other:

hides various useless icons and things
hides "add card", "add swimlane", "add list" links, until hovered (I find these very "noisy")

/* HIDE PERMANENTLY -------------------------------------------------- */

/* various */
.wekan-logo,
.close-card-details { display:none; }

/* header text */
#header-quick-access >ul >li:nth-child(1) >a { font-size:0; }
#header-quick-access >ul >li:nth-child(1) >a >.fa-home{ font-size:12px; margin:0; }

/* popup menu titles (boards, swimlanes, lists, cards, labels) */
.pop-over >.header { display:none; }

/* OPTIONAL 
   card fields: received, start, due, end, members, requested, assigned
   I rarely use these... uncomment if you want to hide them */
/*
.card-details-item.card-details-item-received,
.card-details-item.card-details-item-start,
.card-details-item.card-details-item-due,
.card-details-item.card-details-item-end,
.card-details-item.card-details-item-members,
.card-details-item.card-details-item-name { display:none; }
.card-details-items:empty { display:none; }
*/

/* HIDE UNTIL HOVER -------------------------------------------------- */

/* header "+" button */
#header-quick-access .fa-plus { display:none; }
#header-quick-access:hover .fa-plus { display:inherit; }

/* "add card" links (use visibility rather than display so items don't jump) */
                    .open-minicard-composer { visibility:hidden; }
.list.js-list:hover .open-minicard-composer { visibility:visible; }
                    .list-header-menu { visibility:hidden; }
.list.js-list:hover .list-header-menu { visibility:visible; }

/* "add list/swimlane" links (use visibility rather than display so items don't jump) */
.list.js-list-composer       >.list-header { visibility:hidden; }
.list.js-list-composer:hover >.list-header { visibility:visible; }

/* DARK MODE -------------------------------------------------- */

/* headers */
#header-quick-access, #header { background-color:rgba(0,0,0,.75) !important; }
#header .board-header-btn:hover { background-color:rgba(255,255,255,0.3) !important; }

/* backgrounds: swimlanes, lists */
.swimlane { background-color:rgba(0,0,0,1); }
.swimlane >.swimlane-header-wrap,
.swimlane >.list.js-list,
.swimlane >.list-composer.js-list-composer { background-color:rgba(0,0,0,.9); }

/* foregrounds: swimlanes, lists */
.list >.list-header, .swimlane-header { color:rgba(255,255,255,.7); }

/* minicards */
.minicard { background-color:rgba(255,255,255,.4); }
.minicard-wrapper.is-selected .minicard,
.minicard:hover,
.minicard-composer.js-composer,
.open-minicard-composer:hover { background-color:rgba(255,255,255,.8) !important; color:#000; }
.minicard, .minicard .badge { color:#fff; }
.minicard:hover .badge, .minicard-wrapper.is-selected .badge { color:#000; }

/* cards */
.card-details,
.card-details .card-details-header { background-color:#ccc; }

/* sidebar */
.sidebar-tongue, .sidebar-shadow { background-color:#666 !important; }
.sidebar-content h3, .sidebar-content .activity-desc { color:rgba(255,255,255,.7) !important; }

If anyone improves on this, please share here.

White theme

pravdomil has created small script for tampermonkey to redesign wekan board.

script for tampermonkey

// ==UserScript==
// @name         Kanban
// @namespace    https://pravdomil.com/
// @version      0.1
// @match        https://wekan.indie.host/*
// @grant        none
// ==/UserScript==

;(function() {
  const el = document.createElement("style")
  // language=CSS
  el.textContent = `
/* white background */
body { background-color: white; }

/* header bar next to top bar */
#header #header-main-bar {
    position: absolute;
    right: 70px;
    left: 300px;
    top: -3px;
    padding: 0;
    height: calc(28px + 3px);
}

/* swimlane white background, no borders, fix ellipsis */
.swimlane { background-color: white; }
.swimlane-header-wrap { border: 0 !important; }
.swimlane-header { text-overflow: initial !important; }

/* column header only for first row */
.swimlane .list-header { margin: 4px 12px 4px; }
.swimlane .list-header-name { display: none; }
div:nth-child(1 of .swimlane) .list-header { margin: 20px 12px 4px; }
div:nth-child(1 of .swimlane) .list-header-name { display: inline; }

/* cells no borders, fix height, less padding, no add new card */
.list { border: 0; background-color: white; flex: 300px 0 0; }
.list .list-body { height: 160px; padding: 0 2px; }
.list .open-minicard-composer { display: none; }
.list .open-list-composer { opacity: 0; transition: opacity .2s; }
.list .open-list-composer:hover { opacity: 1; }

/* card style */
.minicard-wrapper { margin-bottom: 2px !important; }
.minicard { box-shadow: 0 0 16px rgba(0,0,0,0.15) inset; }

/* card style for first and last column */
.swimlane .list:nth-child(2) .minicard { opacity: .5 !important; }
.swimlane .list:nth-last-child(2) .minicard { opacity: .1 !important; }

/* card details always center, menu items tweaks */
.card-details {
    position: absolute;
    z-index: 10000 !important;
    top: 0;
    bottom: 0;
    left: calc(50% - 510px / 2);
}
.pop-over-list .js-labels { display: none }
.pop-over-list .js-move-card-to-top { display: none }
.pop-over-list .js-move-card-to-bottom { display: none }
.pop-over-list .js-archive { color: darkred }

/* not needed */
.wekan-logo, .js-member, .attachments-galery { display: none; }

`

  document.body.appendChild(el)
})()