Custom hex colors specified in YAML data aren't rendering in the AgencyWeb Theme's hero partial unless the template's CSS file is copied to the project

Using Themes
1

I’m using the AgencyWeb Theme and have encountered an issue with custom colors not rendering properly.

In home.html, I’m using the hero partial and providing content via data/home.yml. I can specify colors in hex format (e.g., #5FC300), but these colors don’t render in the browser—though they do appear in the HTML source code.

Even when I hardcode colors directly in the template, they don’t render unless the color is already being used elsewhere by the template.

The only workaround I’ve found is to copy the theme’s assets/css/styles.css file to my own website’s assets/css/styles.css.
Without a styles.css, nothing is rendered, an empty styles.css is overwriting the templates styles.css

I don’t understand why this is happening and can’t find documentation explaining this behavior. I’ve checked the Hugo templates and Tailwind CSS documentation, but haven’t found answers.

Could someone explain why this occurs or point me to the relevant documentation?

2

Files in the project’s component directories override files in the theme’s component directories. So if your project has an empty file with the same path as a theme file, the project file wins.