Headings Color on Reading View

[nicolasvillenamejia]

What I’m trying to do

Hello Everyone, I’m trying to put some color on my headings, but my problem is on Reading View, the color still as default, on live preview everything is ok

Things I have tried

    color: #00D0FF;
    font-size: 2.2em;
    font-weight: 1000;
 text-align: center;
}
.theme-dark {
	--color-base-00:#262622

}

.theme-light .inline-title {
    color: #00D0FF;
    font-size: 2.2em;
    font-weight: 1000;
 text-align: center;
}

:root body {
  --bold-color: #00D0FF;
  --italic-color: #00D0FF;
  --font-bold: 1000;
  --font-extrabold: 1000;
  --font-black: 1000;
  }

.cm-header-1 { color: #00D0FF;
font-weight: 800}
.cm-header-2 { color: #00D0FF;
font-weight: 800}
.cm-header-3 { color: #00D0FF;
font-weight: 800}
.cm-header-4 { color: #00D0FF;
font-weight: 800}
.cm-header-5 { color: #00D0FF;
font-weight: 800}
.cm-header-6 { color: #00D0FF;
font-weight: 
````Preformatted text`

[ariehen]

I suggest using the theme variables for headings here. They work with most themes as well in both the editor and Reading view.

 --h1-color: inherit;
 --h2-color: inherit;
 --h3-color: inherit;
 --h4-color: inherit;
 --h5-color: inherit;
 --h6-color: inherit;
 --h1-weight: 700;
 --h2-weight: 600;
 --h3-weight: 600;
 --h4-weight: 600;
 --h5-weight: 600;
 --h6-weight: 600;

---

Your original rearranged a bit.

:root body {
  --bold-color: #00D0FF;
  --italic-color: #00D0FF;
  --font-bold: 1000;
  --font-extrabold: 1000;
  --font-black: 1000;

  --h1-color: #00D0FF;
  --h2-color: #00D0FF;
  --h3-color: #00D0FF;
  --h4-color: #00D0FF;
  --h5-color: #00D0FF;
  --h6-color: #00D0FF;
  --h1-weight: 800;
  --h2-weight: 800;
  --h3-weight: 800;
  --h4-weight: 800;
  --h5-weight: 800;
  --h6-weight: 800;
}

.theme-dark {
  --color-base-00: #262622;
}

.inline-title {
    color: #00D0FF;
    font-size: 2.2em;
    font-weight: 1000;
    text-align: center;
}

I wasn’t sure what this bit at the beginning was for, so left it out. Inline title, it looks like. If you want the same for both dark and light color schemes, you can get away with only .inline-title

    color: #00D0FF;
    font-size: 2.2em;
    font-weight: 1000;
 text-align: center;
}

---

If you didn’t want to use the variables, typically heading rules for Reading view are handled with:

h1, .markdown-rendered h1 {
    /* style rules for h1 headings here */
} 

or

.markdown-rendered :is(h1, h2 , h3, h4, h5, h6) {
    /* style rules for all headings here */
}

[nicolasvillenamejia]

@ariehen

:root body {
  --bold-color: #00D0FF;
  --italic-color: #00D0FF;
  --font-bold: 1000;
  --font-extrabold: 1000;
  --font-black: 1000;

  --h1-color: #00D0FF;
  --h2-color: #00D0FF;
  --h3-color: #00D0FF;
  --h4-color: #00D0FF;
  --h5-color: #00D0FF;
  --h6-color: #00D0FF;
  --h1-weight: 800;
  --h2-weight: 800;
  --h3-weight: 800;
  --h4-weight: 800;
  --h5-weight: 800;
  --h6-weight: 800;
}

.theme-dark {
  --color-base-00: #262622;
}

.inline-title {
    color: #00D0FF;
    font-size: 2.2em;
    font-weight: 1000;
    text-align: center;
}

Thank U, a lot.