Skip to content

feat: add css classes for context colors#1458

Merged
callumalpass merged 1 commit intocallumalpass:mainfrom
phortx:feat/context-tag-color-classes
Feb 8, 2026
Merged

feat: add css classes for context colors#1458
callumalpass merged 1 commit intocallumalpass:mainfrom
phortx:feat/context-tag-color-classes

Conversation

@phortx
Copy link
Contributor

@phortx phortx commented Jan 9, 2026

Why

I'd love to give the context tags different colors via CSS. Unfortunately this is not possible currently as the elements are not distinguishable.

What

I extended the .context-tag elements with a BEM modifier class (context-tag--color-X) that enables CSS-based coloring based on the context name.

That allows users to style their context tag elements. Also it is the very first step to bring configurable colored context elements as a feature in TaskNotes in the future.

Changes

  • Added getContextColorClass() function in src/ui/renderers/tagRenderer.ts that generates consistent color classes using a djb2 hash algorithm
  • Context tags now receive a modifier class like context-tag--color-0 through context-tag--color-19 (so we get 20 distinct colors)
  • Same context name always produces the same color class (case-insensitive, with/without @ prefix)
  • Added unit tests

Usage

CSS can now target specific color variants:

.context-tag--color-0 { background-color: red; }
.context-tag--color-1 { background-color: blue; }
/* ... etc */

@callumalpass
Copy link
Owner

Thanks for this PR, @phortx. Sorry it has taken a while to review. I'm happy to merge it and it will be included in the next release.

@callumalpass callumalpass merged commit 40de156 into callumalpass:main Feb 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants