Need help w/ a color change snippet

[romebot]

Things I have tried

reading posts, trying css

What I’m trying to do

I’m a bit lost on this at this point, new to css. I love the theme I’m using, except would like to play around with changing a few things.

Using the articles I’ve read, I’ve figured out that it’s the secondary background color (see screenshot), but I’m not sure how to write the snippet.

I also would like to change the color of the tags in edit and preview moded:

And, but not so important, I’d like to try a non-monospaced font in the note body if someone is inclined to help with that.

Really appreciate all the help!

R

[mnvwvnm]

Hi. My suggestion is: «step by step».

First, please clarify your first question. You want to change the color of what?
What is your target that is using the secondary background color?

Be aware of this: many things can use the same color and things becomes more complex when the same color ID has different values for light and dark themes.

[romebot]

ok, thanks. first step is to change the secondary color which as far as I can tell is the background color of the left and right panes and the title bar of the notes.

[alltagsverstand]

Which theme are you using?

[mnvwvnm]

Ok. The code below works for both themes: light and dark. Create a css file and replace the color code for the wanted one.

```css

/* choose your color for light theme */
.theme-light {
  --background-secondary: #f5f6f8; 
}

/* choose your color for dark theme */
.theme-dark {
  --background-secondary: #ef4343;
}
```

If you are using a community theme, have you checked if there’s any way to change the background color directly in settings?

[romebot]

@mnvwvnm

/* choose your color for light theme */
.theme-light {
  --background-secondary: #f5f6f8; 
}

/* choose your color for dark theme */
.theme-dark {
  --background-secondary: #ef4343;
}

amazing!!! thanks so much…
ok, now how about the tag color in edit and preview?

[mnvwvnm]

About tags…
What you want to change? Background-color? Text-color?
Besides, by “preview” you mean the old preview, not the new live preview (insider build), right? (because I’m not an insider…).

```css

/* for default theme - it's possible there are incompatibilities with your theme */

/* edit mode */
.cm-s-obsidian span.cm-hashtag {
    color: #f5f6f8; /* text-color */
    background-color: #ef4343;  /* tag-background */
}

/* preview mode */
a.tag {
    color: #f5f6f8; /* text-color */
    background-color: #ef4343;  /* tag-background */
}


```

[romebot]

great. I’ll try this… I was meaning the background color in preview mode as in the theme I’m using it’s an oval shaped tag, but in the editor view, it’s just text.

really appreciate the help!