How to have css apply in both Reading and Editing modes?

Custom CSS & Theme Design
1

What I’m trying to do

I’m trying to apply header css, specifically css to headers, that applies to both the editing in reading views.

After looking around this is what I have.

.markdown-source-view.mod-cm6 .cm-header-1,
.markdown-rendered .cm-header-1 {
  color: black;
  text-shadow: var(--h1-color) 0 0 13px; 
}

As of now, this black color only shows up in editing mode, when I switch to reading mode it changes back to red (–h1-color) with no text-shadow.

Things I have tried

The above. I also tried using .header-1 after .markdown rendered as well as a couple more configurations. To no avail.

2

Give this a try. It’s good for Editing and Reading views.

.markdown-source-view.mod-cm6 .cm-header-1,
.markdown-rendered h1 {
  color: black;
  text-shadow: purple 0 0 13px; 
}

Screenshot 2023-11-18 at 14.50.09

I changed the text-shadow so I could see it better. :grinning:

In the default theme (where I tested), the value of --h1-color: is set to inherit, so the text-shadow: var(--h1-color) bit wasn’t doing anything for me. If it’s red for you, that’s coming from a theme or some other CSS you have.

Have a look at this topic when you get some time. There are lots of great tips on poking around in the inspector:

1 Like
3

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.