Accent Color Access

Code

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); /* âś… */
}

Showcase

Visit CodePen to see this example in action.

Update

I just learned that CSS system colors named AccentColor and AccentColorText have been added at some point, thanks to this toot by Miriam Suzanne. Another thing to keep in mind.