Add in dynamic data for :root style

Hi all,

I haven’t used HUGO in a few years and going back to it now. It worked back then but I think using newer version of HUGO no longer works. But is there a way to get this working below? It works if I paste the {{ .Site.Data.appearance.colors_primary_button_background_color }} into the main index.html file, but once it goes into the :root style or head, it doesn’t work. Am I overlooking something simple? Thanks!

<style>
    :root {
        --primary-button-background: {{ .Site.Data.appearance.colors_primary_button_background_color }};
        --primary-button-text-color: {{ .Site.Data.appearance.colors.primary_button_text_color }};
        --primary-link-color: {{ .Site.Data.appearance.colors.links }};
        --primary-accent-color: {{ .Site.Data.appearance.colors.accent }};
        --idx-title-color: {{ .Site.Data.appearance.colors.idx_title_background_color }};
        --idx-title-text-color: {{ .Site.Data.appearance.colors.idx_title_text_color }};
    }
</style>

What or where is this?

Post a link to your repo and it will be mush easier to help you.

Thanks for your quick response! Here is the link to the head file:

When you call the partials in index.html you forgot to give the partial a context.

It should look like this

{{ partial "global/head" . }}
{{ partial "global/navbar" . }}

Notice the dot set as the second argument.

Read more at Partial templates | Hugo.

1 Like

I think that did it! Thank you!

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.