Custom CSS themes

Also see: Dark Mode

All Wekan themes are directly integrated to Wekan. You can add pull request to master branch to add custom theme, you can see from from this commit required new color/theme name and changes to these files 3 files listed below. In that commit is also changes to other files, you don't need to change those files.

• wekan/client/components/boards/boardColors.styl
• wekan/models/boards.js
• wekan/server/migrations.js

Alternatives for sending new theme as pull request:

• If you would like to have some new theme, please add screenshot mockup to new Wekan issue.
• If possible, you can also try to create those CSS changes with Stylish browser extension and add those to new issue too.

There are currently board color modes/themes, and these full themes:

• Dark: modified from below by @lonix1 and more changes by xet7
• Relax: Light green background that helps Wekan users to relax in company of Wekan contributor that sent theme CSS.

Upcoming full themes that will be added by xet7:

• Corteza, that will be mostly-white theme, although different than example of white theme below
• Octopus, that will have different colors and some Wekan features hidden

Dark theme

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

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)
})()