[Feature]: Change the Color of the different Kanban Lists

[big1tasty]

Goal or desired outcome of this feature

It would be a nice if it was possible to change the Color of each Kanban list.

Describe the feature

Option on the Heading to select any desired color.

Can you think of any alternatives or work-arounds?

Maby it could be done with CSS snippets. I tried that but i did not manage to achieve any desired result.

Screenshots, mockups, or videos

or

[Jokepp]

+1 from me.

OP's colors are a bit too strong for my taste however. I prefer pastel, like in this screenshot from Notion:

[imstevenxyz]

Until this is implemented you can try something like this in your snippets.css file.

snippets.css

```css /* Kanban-plugin column colors */ :root{ --kanban-ccolor-column-1: rgb(92, 95, 119); --kanban-ccolor-column-2: rgb(30, 102, 245); --kanban-ccolor-column-3: rgb(64, 160, 43); --kanban-ccolor-column-4: rgb(223, 142, 29); --kanban-ccolor-column-5: rgb(48, 52, 70); } .kanban-plugin__lane-wrapper:nth-of-type(1) .kanban-plugin__lane { border-color: var(--kanban-ccolor-column-1); } .kanban-plugin__lane-wrapper:nth-of-type(1) .kanban-plugin__lane-header-wrapper, .kanban-plugin__lane-wrapper:nth-of-type(1) .kanban-plugin__new-item-button:hover { background-color: var(--kanban-ccolor-column-1); } .kanban-plugin__lane-wrapper:nth-of-type(2) .kanban-plugin__lane { border-color: var(--kanban-ccolor-column-2); } .kanban-plugin__lane-wrapper:nth-of-type(2) .kanban-plugin__lane-header-wrapper, .kanban-plugin__lane-wrapper:nth-of-type(2) .kanban-plugin__new-item-button:hover { background-color: var(--kanban-ccolor-column-2); } .kanban-plugin__lane-wrapper:nth-of-type(3) .kanban-plugin__lane, .kanban-plugin__lane-wrapper:nth-of-type(3) .kanban-plugin__new-item-button:hover { border-color: var(--kanban-ccolor-column-3); } .kanban-plugin__lane-wrapper:nth-of-type(3) .kanban-plugin__lane-header-wrapper, .kanban-plugin__lane-wrapper:nth-of-type(3) .kanban-plugin__new-item-button:hover { background-color: var(--kanban-ccolor-column-3); } .kanban-plugin__lane-wrapper:nth-of-type(4) .kanban-plugin__lane { border-color: var(--kanban-ccolor-column-4); } .kanban-plugin__lane-wrapper:nth-of-type(4) .kanban-plugin__lane-header-wrapper, .kanban-plugin__lane-wrapper:nth-of-type(4) .kanban-plugin__new-item-button:hover { background-color: var(--kanban-ccolor-column-4); } .kanban-plugin__lane-wrapper:nth-of-type(5) .kanban-plugin__lane { border-color: var(--kanban-ccolor-column-5); } .kanban-plugin__lane-wrapper:nth-of-type(5) .kanban-plugin__lane-header-wrapper, .kanban-plugin__lane-wrapper:nth-of-type(5) .kanban-plugin__new-item-button:hover { background-color: var(--kanban-ccolor-column-5); } .kanban-plugin__lane { border: 2px solid; } .kanban-plugin__lane-grip, .kanban-plugin__lane-header-wrapper, .kanban-plugin__lane-title-count, .kanban-plugin__lane-settings-button { color: white !important; } /* Kanban-plugin UI improvements for new column colors */ .kanban-plugin__lane-header-wrapper, .kanban-plugin__item-button-wrapper, .kanban-plugin__item-form { border: none; } .kanban-plugin__item { border: none; } .kanban-plugin__new-item-button { box-shadow: none !important; } .kanban-plugin__new-item-button:hover { background-color: rgba(255,255,255,0.055); } .kanban-plugin__item-form .kanban-plugin__item-input { background-color: transparent; } ```

preview:

[Kaji01]

Nice workaround! Is there a way we can use the column title text as the trigger for a particular color rather than simply its position? Some boards I create have different sets of columns, but I'd like the Urgent column on all boards to be red, for example

[imstevenxyz]

Nice workaround! Is there a way we can use the column title text as the trigger for a particular color rather than simply its position? Some boards I create have different sets of columns, but I'd like the Urgent column on all boards to be red, for example

As a matter of fact, you can! The only thing is that you need to use a tag.

For example:

A column with the title "Some title #urgent" will contain an <a class="tag" href="#urgent"></a> element. We can use the href attribute to select the needed classes for styling. But since the required class is a parent of this \<a> element we need to use the has() selector. See the snippet below.

snippets.css

```css .kanban-plugin__lane-header-wrapper:has(a.tag[href="#urgent" i]), .kanban-plugin__lane:has(a.tag[href="#urgent" i]) .kanban-plugin__new-item-button:hover { background-color: rgb(210, 15, 57); } .kanban-plugin__lane:has(.kanban-plugin__lane-header-wrapper a.tag[href="#urgent" i]) { border-color: rgb(210, 15, 57); } ```

More information:

• Attribute-selectors
• has()