{{accent_color}} to "theme-color" meta tag

[m_assaleh]

Hello!

I was trying to find a way to make the theme-color meta tag matches accent_color
<meta name="theme-color" content="#{{accent_color}}"/>
the problem is that theme-color can’t accept css var so I should pass a " {{}}" idk how to call it but…

in the {{ghost_head}} helper was the var --ghost-accent-color defined

so how can I pass the that value to theme-color tag

Thank you

[vikaspotluri123]

Even though it’s not listed in the @site global variable docs, it should be possible to use {{@site.accent_color}}

[m_assaleh]

I will try it, thank you!

I spent the last couple of hours trying to figure out how to do it and found a way too :)

document.querySelector('meta[name="theme-color"]').setAttribute("content", window.getComputedStyle(document.documentElement).getPropertyValue('--ghost-accent-color'));

[RyanF]

Thanks for catching this!

I updated the docs to include a reference for the accent_color property:

Ghost Handlebars Theme Helpers: @site