Minimal Theme make side bars different background color from the note

[sanzharedu]

I am trying to make the center’s (note content) background different from both side panes. The Minimal Theme’s Style Settings plugin provides some control, but all the settings I tried make the center and right side’s background same color, while the left side-bar can be easily changed.

Ideally, I would want to specify exactly the colors of the three main backgrounds:

Left - Center - Right

Here is how it looks like in the default Minimal Theme Dark:

Here is what I want:

Ignore the text colors. I just used photoshop to paint over.

In Minimal Theme’s Style Plugin there are already a number of Interface color controls. Ideally, a CSS snippet solution would make it so the left and right side-bar use the same bg color, while letting another setting control the bg of the note.

Available interface colors:

• Base color
• Primary background
• Secondary background
• Active background
  etc

I am just starting to learn to use CSS snippets. If I understand correctly, the center and right side bars’ background color is tied to the same variable: background-primary. Is there a way to change this property for the right side bar via a CSS snippet?

[holroy]

I’ve not read your post thoroughly, but it reminds of an issue I saw which could be addressed by enabling/disabling the Settings > Minimal Theme Settings > Dark mode background contrast to another value.

Maybe this either solves, and/or could you guide you in the correct direction?

(Sorry, if I’m totally missing the target, but I’m in a little bit of a rush, but just wanted to leave this here in hope it helps)

[ZenMoto]

Maybe this is what you want:

/* LEFT COLUMN */
.mod-left-split .workspace-leaf-content {background-color: black;}

/* RIGHT COLUMN */
.mod-right-split .view-content, .mod-right-split .workspace-leaf-content {background-color: black;}

/* CENTER COLUMN */
.mod-vertical .view-header {background-color: midnightblue !important; border-bottom: 1px solid black;}
.mod-vertical .view-content {background-color: midnightblue !important;}

**

RESULT:

• works for “minimal theme” and “default theme”