Every note card adapts to the theme without a single conditional className

The NoteCard component renders each blog entry on the notes page and the homepage feed. It reads the current theme through the useTheme hook — the same mutation observer that watches the html element's data-theme attribute — and passes it to a single function called pickColor. That function takes a colour pair object with a dark value and a light value and returns the right one based on the theme. The type badge at the top of each card — thought, update, building, or tip — gets its text colour from noteTypeColorPairs. The tag pills at the bottom get theirs from tagColorPairs. Both are plain objects mapping a key to a dark and light hex value. Purple for software. Fuchsia for accessibility. Cyan for audio. Emerald for production. The badge background is the text colour with 20 in hex appended for twelve percent opacity. The tag pill background uses 15 in hex for eight percent opacity. That subtle difference gives badges more visual weight than tags without maintaining two separate colour systems. The card itself is a Next.js Link wrapped in a glass container with a blurred border. On hover, the border tints toward the service accent using a fifty percent opacity modifier, and the title text shifts from white to the accent colour. The body text is line-clamped to three lines so every card in the grid has a consistent height regardless of how long the note is. One hook, one function, two colour maps, and every accent on every card adapts to both themes automatically.