Can't edit quote block colors

[JasonSummer]

What I’m trying to do

I don’t want my quote blocks to be the same color as my accent color. I want them to be completely untied from that dependency. I looked at several CSS tutorials and even copied code directly, but I can only ever get reading mode to do it, not edit mode.

Things I have tried

Changing coulour for the block around block-quote

I did some small changes to a code found here to change the block quote colour in edit mode. It can also be used to change font Block quote /* for editor */ .cm-quote { color: var(--text-normal) !important; } /* for preview */ .markdown-preview-view blockquote { background-color: #ece8f8; border: 0px solid; border-color: #baa7ec !important; border-left-width: 5px !important; border-radius: 0 8px 8px 0; font-family: ; color: black; font-size: 15px; …

Blockquotes with different border/background colors

Hi, How can I get the multiple blockquotes with different background/border color for different occasions like marking something as “info” or “warning”. Something similar to this [image] Or, if not blockquote then some other way to achieve this?

Quote Block CSS

I’m looking to restyle the CSS for quote blocks. For those of you who have changed it, how do your quote blocks look?

My css file currently:

/*Editor*/
.cm-quote {
    color: var(--text-normal) !important;
  }

/*Readmode*/
 .markdown-preview-view blockquote {
    background-color: #FDF6E3;
    border: 0px solid;
    border-color: #90241A !important;
    border-left-width: 2px !important;
    border-radius: 0 8px 8px 0;
    font-family: ;
    color: ; 
    font-size: ;
    line-height: ;
    margin: 10 10px;
    padding-top: 10px;
    padding-bottom: 10px;
} 

I’ve never even used reading mode, so it’s not useful to me this way. I only copied that part to see if I could get anything at all working. I just need to set the live preview editor to a custom appearance with those same options

[JasonSummer]

I’ve also tried

.cm-quote {
	color: #FDF6E3;
  }```

[JasonSummer]

The code I was looking for was apparently

.HyperMD-quote {
  background: #FDF6E3 !important;
  border-left: 2px solid #90241A !important;
}

I suspect cm-quote is for editing the text inside the block, not the block itself.
Additionally, color: only edits the text inside, while I was looking for the color of the container itself, which is border-color and background

[ariehen]

There are a few custom properties/variables for blockquotes you could play around with that cover both Live Preview and Reading views:

body {
    --blockquote-border-thickness: 2px;
    --blockquote-border-color: orange;
    --blockquote-font-style: normal; 
    --blockquote-color: hotpink;
    --blockquote-background-color: transparent;
}

If these don’t work out, there are other options.