Change header colors in "Wasp" theme

[SantiPetri]

What I’m trying to do

Hi friends. I’m using the Wasp theme and I’m trying to change the header colors, but it doesn’t work with that theme. It does work with other themes. Any suggestions?
Thanks in advance.

.cm-header-1 { color: #f37b84; }
.cm-header-2 { color: #ffd98c; }
.cm-header-3 { color: #9ff369; }
.cm-header-4 { color: #59d5c4; }
.cm-header-5 { color: #2a8aff; }
.cm-header-6 { color: #b99aff; }

Wasp CSS headers

[ariehen]

The Wasp theme defines the heading colors with custom variables and lots of !importants, so those are overriding your snippet. (for some reason under .theme-light there’s no --text-title-h6 defined – see second pic).

---

There are a few ways of going about this, but you can redefine what they have set for the custom variables… e.g.

.theme-dark {
    --text-title-h1:              #f37b84;
    --text-title-h2:              #ffd98c;
    --text-title-h3:              #9ff369;
    --text-title-h4:              #59d5c4;
    --text-title-h5:              #2a8aff;
    --text-title-h6:              #b99aff;
}

.theme-light {
    --text-title-h1:              #D49335;
    --text-title-h2:              #D49335;
    --text-title-h3:              #D49335;
    --text-title-h4:              #D49335;
    --text-title-h5:              #D49335;
    --h6-color:                   salmon;
}

That seems the easiest approach.

[SantiPetri]

@ariehen

.theme-dark {
    --text-title-h1:              #f37b84;
    --text-title-h2:              #ffd98c;
    --text-title-h3:              #9ff369;
    --text-title-h4:              #59d5c4;
    --text-title-h5:              #2a8aff;
    --text-title-h6:              #b99aff;
}

.theme-light {
    --text-title-h1:              #D49335;
    --text-title-h2:              #D49335;
    --text-title-h3:              #D49335;
    --text-title-h4:              #D49335;
    --text-title-h5:              #D49335;
    --h6-color:                   salmon;
}

Thank you so much for your help. It works perfectly.