Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

Turn value of colorpicker field into RGB values

Started by Anna 4 years ago · 1 replies · 613 views
4 years ago

I would love to be able to set some colours in the theme settings and use them in my CSS. Since I'm using Tailwind, it would be best to have them in RGB format, but the colorpicker field outputs the hexcode. I would also like to be able to generate lighter and darker versions of a picked color, either in the CSS (which needs HSL format apparently) or with PHP somehow, somewhere. And since it seems to me that I'll need PHP to convert the hexcodes anyway, that would be my choice of poison.

So ideally, whenever the theme settings area saved or changed, I fire up my theme.php, do some magic calculations, and output some colour values somewhere (I'd probably put them into my :root declarations in base.html.twig as CSS variables). However! – how do I do that? How does my theme.php know when there's been a change? Can I maybe create a new twig filter that is used in the colorpicker field…? Hmmm I shall experiment with that, but I would love to hear your ideas!

4 years ago

The colorpicker-field's format is set by its input. Ie., if you input #ff0000 , then changing it in the field will return a hex. However, input rgba(255, 21, 0, 1.00), and a change will return a RGBA. Note, though, that RGB input and output is not supported, for reasons unclear.

The alpha, or transparency, value serves as a pseudo-value for actual lightness or darkness - given that the colors background is as such. You could do conversion and manipulation with PHP, though I'd really opt for CSS filters instead. You won't have the same choice of options, but it'll require a lot less work.

It really comes down to: How much manipulability are you after?

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 193 2 months ago
Themes & Styling · by Ian, 2 months ago
3 91 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 451 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 45 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 125 3 months ago