Custom CSS themes
Here is how to build wekan code and add your new theme with code changes and send as pull request: https://github.com/wekan/wekan/wiki/Emoji#how-you-could-add-another-plugin
Here is how some have sent previous themes to Wekan, what code changes they made: https://github.com/wekan/wekan/pulls?q=is%3Apr+is%3Aclosed+theme
After you have sent new theme as pull request, you see it as open pull request: https://github.com/wekan/wekan/pulls?q=is%3Apr+theme+is%3Aopen
And when I have merged it to Wekan, that theme will be in next Wekan release, listed at ChangeLog: https://github.com/wekan/wekan/blob/main/CHANGELOG.md
At Wekan Snap page you see with webpage reload, when new version has been released: https://snapcraft.io/wekan
Wekan Snap version gets updates automatically soon after new Wekan version has been released, or you can update manually immediately: https://github.com/wekan/wekan-snap/wiki/Automatic-update-schedule
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.stylwekan/models/boards.jswekan/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
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.
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)
})()