How do I refer to background color 2 in custom.css file?

Store Design
, ,

Topic summary

A user customizing the Dawn theme needs to reference “Background Color 2” in their custom.css file so it updates dynamically when changed in the Theme Editor.

Initial Problem:

  • Attempted using CSS variables like var(--color-base-background-2) and Liquid syntax {{ settings.colors_background_2 }} directly in custom.css, but neither approach worked.

Solution Provided:
Two methods were suggested:

  1. Rename the file to custom.css.liquid:

    • Use Liquid syntax: {{ settings.colors_background_2 }}
    • Link it in theme.liquid using: {{ 'custom.css' | asset_url | stylesheet_tag }}

  2. Add code directly in theme.liquid:

    • Place CSS with Liquid variables inside {% style %} tags in the theme.liquid file

Key Requirement:
The file must have a .liquid extension to process Liquid template variables that reference theme settings.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi!

I have customized the Dawn theme. I want to refer to the Background Color 2 in my custom.css file, and have it change accordingly whenever the user changes it from the Theme Editor. Any tips on how to do this?

I have tried the following, but it didn’t work…

.full-color {
background-color: var(–color-base-background-2);
}

.full-color {
background-color: {{ settings.colors_background_2 }} !important;
}

Thanks!!

Erika

2

@erikapruett

Hi,

When you make the custom.css file, make the file name to custom.css.liquid to let the code below working.

.full-color {
  background-color: {{ settings.colors_background_2 }} !important;
}

Don’t forget to add tag
{{ ‘custom.css’ | asset_url | stylesheet_tag }}

in theme.liquid file.

Or you can add the code in the theme.liquid file inside {% style %} tag as below.

{% style %}

.full-color {
  background-color: {{ settings.colors_background_2 }} !important;
}

{% endstyle %}

Hope it helps.