color-mix()

Tints rows, pills and the seek line from the theme's own text colour.

A post with its tracks listed, and the player bar along the bottom of the screen — The faint highlight on the current track row, mixed from the theme's own text colour.

How Riff uses it

Track rows in a post have no colours of their own. The hover and current-row tint, the artwork placeholder, the buffered band and the quality pill are all currentcolor mixed with transparent at a low percentage. They sit right on a light or a dark theme. Now Playing darkens the cover's tint by mixing in black for the bottom of its gradient.

Why

A fixed rgba() tint would vanish on one theme and look heavy on another, and the Now Playing tint is only known at runtime from the artwork.

Without it

Rows get no hover tint, and Now Playing shows its plain background.

Where

plugins/riff/assets/riff.css, line 77

background: color-mix(in srgb, currentcolor 8%, transparent);

plugins/riff/assets/riff.css, line 812

background: linear-gradient(var(--riff-tint), color-mix(in srgb, var(--riff-tint) 70%, #000));

Links open the source at the commit this page was published from.

Reference: color-mix() on MDN.