Changing color schemes based on URL

Technical Q&A
1

I’m trying to modify the Dawn theme to support changing the color scheme based on the URL.

In the .liquid file (experimenting with just the announcement bar at the moment), I add:

{% if request.path contains "aaaa" %}
{%   assign colour_scheme = color-scheme-2 %}
{% elsif request.path contains "bbbb" %}
{%   assign colour_scheme = color-scheme-3 %}
{% elsif request.path contains "cccc" %}
{%   assign colour_scheme = color-scheme-4 %}
{% else %}
{%   assign colour_scheme = color-scheme-1 %}
{% endif %}

These colour schemes are defined by the theme.liquid file.

I have tried both this assignment (which to my mind should reference the colour-scheme objects from the theme.liquid file) and I have tried string literals (ie. enclosing in quotes).

However, when the file goes to reference the color_scheme variable, it returns blank, despite there being an “else” that should assign something.

This means that further code, such as this:

class="utility-bar {{ color-scheme }} gradient

comes out in the produced HTML as:

class="utility-bar  gradient

So… it’s not even referencing that variable, that should be something.

Any ideas what “black magic” have I missed?

Regards,

Dion

2

It won’t let me edit, like it should, so just a quick addendum.
I’ve also tried the code in a “{% liquid” block, and tried it inline. These did not work either.
I also tried a different variable name, in case it was conflicting with anything pre-defined, but that didn’t work either.
If I manual edit the HTML with the dev tools in Chrome, adding the plain text of “color-scheme-1” etc., changes things as expected. So it’s something with this if/then and using the variable afterwards (in the same .liquid file as the variable is created).

3

You can update your code to this and check

class="utility-bar {{ colour_scheme }} gradient
4

Hi Dan. Thanks for picking up my spelling differences (US/everywhere else). Unfortunately, this was just in the description above. I double-checked - in the actual code it’s correct. the variable {{ colour_scheme }} comes out blank, as does {{ color_scheme }}. :frowning:

5

Did you correct aaa, bbb, or ccc in the code of the URL path?

6

Yep. I did that. I played with the location of the if/then in the file, and found that using string literals and putting the if/then just after the {% /style %} section seemed to have worked. No idea why it didn’t really work elsewhere. So the assigns are now assign color_scheme = “color-scheme-2” and it seems to work. I don’t have an exact solution, as I don’t know the exacdt cause… :frowning:

7

You added code in {%- style -%} {%- endstyle -%} where accept CSS code only.

8

It was never inside those code block. But works just under (not above, or anything else).