Change default Heading 1 - Theme

I would like my heading (H1) to be a different color than the normal text on the page, but still auto-change based on the background. 

In the Theme Designer, I can go under Colors -> Page and modify the foreground, but this changes both the heading text and the body text. 

I have also tried adding css (example css below) to change the color of H1. This works, but it is stuck this color. In other words it doesn't change based on the background anymore and also I can't choose another option under the Style section. Is there any way to have it all? 

h1.dki-element-content  {
color: #005288
}