finnlesueurgmailcom - 4 months ago

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.

Answer

william - 4 months ago

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>

william - 4 months ago

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>

finnlesueurgmailcom - 4 months 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

edster - 4 months 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

finnlesueurgmailcom - 4 months ago

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