Colourpicker value in stylesheets

Created 6 years ago by finnito

I would like to make a few variables which are field type color picker. How can I use these variables in my theme stylesheets?

The aim would be so the client can change some core colours of the website at will.

william — 6 years ago Best Answer

I know some people will join this discussion and tell you to put twig into the stylesheet. I personally do not like that approach at all. Instead, i would simply add a style tag into your head, and then use twig to set those colors there instead.

Example:

<head>
    <style>
        .theme--blue 
        {
            background:{{colorValue}}
        }
    </style>
</head>
<body class="theme theme--blue">

</body>

Link

finnito — 6 years ago

Oh great! Thank you for giving those two approaches. I will likely use the approach you offered because that seems to be a little cleaner.

It would seem nice to have all the CSS in the one place though. I’ll have to sleep on it

Link

edster — 6 years ago

I typically would build out certain colour options, then have a picker for the colour they want to use, rather then a dynamic picker

Link

finnito — 6 years ago

That's probably fair @edster but in the name of flexibility I opted for @william's approach. Thanks all!

Link