Finding colors within a custom theme

[a2jc4life]

Can anyone help me figure out where to find/how to identify the colors within a custom theme? I’m trying to create a custom callout, and I want the actual color to match the standard blockquote embed. But I can’t find that color in the theme css.

The theme has options to recolor most of the specific embed styles, and I can get any of those to work. But I haven’t been successful at locating what is the source of the main blockquote background color in the theme. (My CSS knowledge is rather sketchy.)

I can get this (see the top block - time):

(See how the background is basically “blank” – blends in with the main note background?)

Or this:

But I’m wanting the colors to match the block below it, and I can’t seem to figure out where that color is coming from.

(BTW, this note is a work-in-progress built on Nick Milo’s Ideaverse Home note.)

The theme I’m using is Dayspring (the Light version).

[ariehen]

Here’s an excellent guide to get you up to speed:

Obsidian CSS Quick Guide

Obsidian CSS Quick Guide Hi friends! CSS in Obsidian can be confusing to get into, so this is a guide to get you started with information on the tools, methods, and some background knowledge! Let’s get started by looking at how you can look behind the curtain of Obsidian’s visuals. The Developer Console Obsidian is technically like a website. As such, you can view the source like any other browser. While you are inside the Obsidian window, you can press ctrl+shift+i to bring up the develope…

---

@a2jc4life

source of the main blockquote background color in the theme

And in the theme.css, it looks like this here:

The coloring change may also be the block quote in the callout. Callouts tend to layer colors on top of each other so a plain block quote background, already on a colored background, could look different if inside a callout.

If you paste an example of what’s written in your note and any extra CSS (custom callouts, etc) you’ve added, someone can probably have a look.

Also, this theme is very pleasant to look at.

[a2jc4life]

Yes, I love this theme – it’s not flashy, but it’s gentle on the eyes.

I thought I was looking for that alpha-background, but when I use that, it seems to just be giving me essentially no background – it’s just blending in with the note.

This code:

.callout[data-callout="time"] {
    --callout-color: var(--alpha-background);
}

…produces this output:

Where “Time (Calendar)” is the header of the callout. (Ignore the nested one; I haven’t messed with that one yet.) As you can see, it’s just not displaying any kind of “box” at all.

This portion of the note looks like this:

>[!time] # Time *(Calendar)*
> > *What's on your mind?* 
> 
> - To journal, focus your day, or to capture a spark, hit `Ctrl-D`.
> - To view this month, go to [[Rachels October 2023]].
> - To broadly reflect, go to [[Rachels 2023]] or [[101 Things in 1001 Days]].

The overall code seems to be right, because if I change the color:

.callout[data-callout="time"] {
    --callout-color: var(--color-blue-rgb);
}

It does what I expect:

I just tried inspecting the element in the console and it’s telling me the background of the blockquote I’m trying to match is #B7B39F33, which is not particularly helpful because nothing in the CSS file is formatted that way.

[ariehen]

The help docs indicate you need a rgb (3-tuple?). Hex codes, etc., won’t work here.

• --callout-color defines the background color using numbers (0–255) for red, green, and blue.

On the train at the moment, but will have a look in a bit.

[ariehen]

Give this method a try instead:

.callout[data-callout="time"] {
    background-color: rgb(231,229,222);
}

You can use a site like https://www.colorhexa.com/e7e5de to tweak the rgb( ) colors to your liking.

[a2jc4life]

@ariehen

background-color: rgb(231,229,222);

That works; thank you!

[ariehen]

I haven’t looked through the theme, but if you squint --callout-color: 231,229,222; does have an effect; I think because of the theme background and callout blending it’s just barely noticeable.