Accent Color Access


Yesterday Una Kravets mentioned that accent-color is now supported in all modern browsers. So now we have a simple and accessible way to make form controls feel more at home in our site theme.

I wondered if you could access its value to use it for things beyond its purpose. However, it is no custom property, indicated by the fact that it does not start with two hyphens.

Tl;dr, I could not find a way, but you can approach this the other way around, by using an actual custom property as an intermediary.

.does-not-work {
	accent-color: green;
	color: accent-color; /* 🚫 */
	color: var(accent-color); /* 🚫 */

.workaround {
	--actual-var: green;
	accent-color: var(--actual-var);
	color: var(--actual-var); /* ✅ */