How can I display actual color codes in Dawn theme headers?

Technical Q&A
1

In Dawn theme I am trying to add an option to select the border opacity in the header and other sections.

The Dawn theme has various theme setting color options, for example for color base text

--color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};

which results in

--color-base-text: 18, 18, 18;

I have added more options for colors in my edited copy of dawn, being 6 color choice in addition to what Dawn specifically has.

This works as I can see the values in the source code, e.g.

--color-1: 0, 85, 187;
        --color-2: 255, 255, 255;
        --color-3: 0, 109, 238;
        --color-4: 255, 0, 0;
        --color-5: 42, 42, 42;
        --color-6: 0, 0, 0;

Then when I use that in a section like in the header, I add something like this in the header.liquid file to select the color that is to be used,

{
      "type": "select",
      "id": "color_text",
      "options": [
        {
          "value": "color-1",
          "label": "t:settings_schema.colors.settings.color_1.label"
        },
        {
          "value": "color-2",
          "label": "t:settings_schema.colors.settings.color_2.label"
        },
        {
          "value": "color-3",
          "label": "t:settings_schema.colors.settings.color_3.label"
        },
        {
          "value": "color-4",
          "label": "t:settings_schema.colors.settings.color_4.label"
        },
        {
          "value": "color-5",
          "label": "t:settings_schema.colors.settings.color_5.label"
        },
        {
          "value": "color-6",
          "label": "t:settings_schema.colors.settings.color_6.label"
        }
      ],
      "default": "color-1",
      "label": "t:settings_schema.colors.settings.color_text.label"
    },

When I select that color and call it n the header.liquid file it correctly uses the selection I made, e.g.

{{ section.settings.border_color }}

Will display color-1, e.g.

Some content

It will display as

some content

Is there a way to have it display the actual color in the header? e.g 0, 85, 187; so I can use it as an inline style?

For example instead of the above; show it as ;

Some content

where the RGB color is the color-1 selection.

Cheers

2

Hi @Sneaky ,

Please change code:

Some content

Hope it helps!

1 Like