custom blocks with background color depending on book color theme

Question

I'm using custom blocks like in this example

.rmdcomment {
  padding: 1em 1em 1em 4em;
  margin-bottom: 10px;
  background: #f5f5f5;
  position:relative;
}

.rmdcomment:before {
    content: "\f075";
    font-family: FontAwesome;
    left:10px;
    position:absolute;
    top:0px;
    font-size: 45px;
 }

My question is how to make the background color respond to the design chosen by the user which is either "White", "Sepia" or "Night.

I want to add the context to css, but unfortunately don't know how to do it. My guess is to add the color-scheme in one way or another resulting separate "Sepia-Theme-Block-background" and "Night-Theme-Block-background".

in the meantime I just use the default background, which has a switch build in — Pindar, Feb 10 '19 at 19:08

score 0 · Answer 1 · answered Feb 11 '19 at 20:35

I finally figures it out:

.book.color-theme-1 .book-body .page-wrapper .page-inner section.normal .rmdcomment {
background-color: #f3eacb; /*Sepia-Theme*/
}
.book.color-theme-2 .book-body .page-wrapper .page-inner section.normal .rmdcomment {
background-color: #1c1f2b; /*Night-Theme*/
}

The White-Theme-Block-Background is changed by adding the background-color to the standard .rmdcomment

custom blocks with background color depending on book color theme

1 Answers1