From my blog post: Creating dynamic layouts with Jekyll

themes.html

<style>
  .hero {
    background-color: {{ page.style.color.primary }};
    color:{{ page.hero.color }};
    background-image: url({{ site.assets.imgPath }}{{ page.hero.bg }}?w=500&{{ site.assets.params }});
  }
  .hero-title {
    color: {{ page.hero.color }};
  }
  .hero-link {
    color: {{ page.hero.color }};
  }
  .section--quote {
    background-color: {{ page.style.color.primary }};
    color: {{ page.style.color.text }};
  }
</style>

themes.yml

# ----------------------- #
# Styling & Colour scheme #
# ----------------------- #
style:
  color:
    primary: "#db030f"
    secondary: "#000"
    text: "#fff"