Skip to content

Color-code cards by category #8

Description

@qapitall

What

Give each category a consistent accent color on its cards — e.g. a colored left border or a tinted category badge — so you can tell "work" from "personal" at a glance without reading.

Why

Categories exist and are filterable, but on the board every card looks identical. Color is the fastest visual grouping there is, and boards with mixed contexts (work + home + side project) benefit the most.

Suggested approach

No color picker needed: derive the color deterministically from the category name.

  • public/app.js — in renderCard(), hash the category (use catKey() so "Work" and "work" get the same color) into an index over a small fixed palette, and set it as a CSS custom property or class on the card.
  • public/style.css — a palette of 6–8 hues that read well in both the light and dark theme (the theme toggle is in the top-right; check both). Apply as a left border on .card and/or the badge background.

Cards without a category keep the current neutral look.

Acceptance criteria

  • All cards of the same category share the same color, stable across reloads.
  • "Work" and "work" get the same color.
  • Colors are legible in light and dark themes.
  • Uncategorized cards are unchanged.

Good first issue — frontend only, mostly CSS plus a small hash helper.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions