Finding colors within a custom theme

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).

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

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. :sunrise:

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

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.

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.

1 Like

Give this method a try instead:

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

Screenshot 2023-10-11 084831

You can use a site like to tweak the rgb( ) colors to your liking.

That works; thank you!

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.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.