-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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.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
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)
})()
Wekan - OpenSource Kanban
- Deep Dive Into WeKan
- Meteor WeKan Roadmap - board at Wekan demo
- Multiverse WeKan Roadmap
- Docs/Manual
- Change Language
- Forgot Password
- About
- Test Edge
- WeKan Design Principles
- FAQ
- IRC FAQ - answers to questions asked at IRC
- Team
- Press
- Blog
- Wekan vs Trello vs Restyaboard
- Results of Survey 2020-01
- Allow private boards only: Disable Public Boards
- Security Disclosure and details of Security in Wekan
- Security issues
- Password Hashing
- Add more RAM to Node.js to prevent crash
- Clustering AWS etc
- Scaling
- Kubernetes
- Redis Oplog
- Meteor Scaling at Meteor Cloud
- Scaling at Meteor forums
- From Previous Export, paste big WeKan JSON
- Progress: Import/Export/Sync
- From CSV/TSV
- From Trello
- From Jira
- From Asana
- From Zenkit
- From old Wekan manually
- Converting Meteor Stylus to CSS
- Repair MongoDB
- Using Meteor MongoDB to repair files
- If board does not open and keeps loading
- Repair Docker
- Wekan Markdown
- Emoji
- Mermaid Diagram DOES NOT WORK ANYMORE
- Numbered text
- Automatic login
- Disable Password Login
- Forgot Password
- Admin: Impersonate user
- Adding Users
- Active users Presence
- Accounts Lockout: Brute force login protection
- LDAP
- LDAP AD Simple Auth
- Keycloak
- Google login
- Azure
- OAuth2, Auth0, GitLab, RocketChat
- Oracle OIM on premise using OAuth2
- ADFS 4.0 using OAuth2 and OpenID
- Azure AD B2C using OAuth2
- Nextcloud
- CAS Please test
- SAML Please test
- Zitadel
- Drag Drop on Mobile and Desktop
- Rclone: Store attachments to cloud storage like S3, MinIO, etc
- Python based features
- Burndown and Velocity Chart
- Wait Spinners
- Translations
- Default Language for All Users
- Roadmap
- Features
- Planning Poker
- Scaling
- Custom Logo
- Subtasks <== Has fix
- Templates
- Cover
- Archive and Delete
- Custom Fields
- Fix Export board menu not visible on some boards
- RAM usage
- Demo
- Swimlane Documentation
- Customize Translations
- Download Wekan for various Platforms: Supported by xet7, Operating Systems, NAS, Cloud
- Helm Chart for Kubernetes
- Caddy
- Nginx
- Apache
- OpenLiteSpeed
- Local self signed TLS
- Let's Encrypt and Google Auth
- TLS with Node.js
- Traefik and self-signed SSL certs
- Example: New card with Python3 and REST API
- Python client to REST API
- Go client to REST API
- Java
- Wekan Sandstorm cards to CSV using Python
- Excel and VBA
- Global Webhook
- Limiting Webhook data
- Receiving Webhooks
- Outgoing Webhook to Discord/Slack/RocketChat/Riot
- Outgoing Webhook to NodeRed
- Outgoing Webhook to PowerShell
- Security: Webhook and CA
- Outgoing Webhooks Data
- Outgoing Webhooks and Let's Encrypt
- Outgoing Webhooks Original Pull Request, multiple Webhooks, more parameters and response order