Coloring Reference Blocks based on tagged keywords

Code Blocks to Copy

#main-container :not(.today-queries) .lazy-visibility .color-level > .flex.flex-col > .initial > div > .blocks-container > .lazy-visibility > div > .ls-block, .cp__right-sidebar .color-level .color-level > .flex.flex-col > .initial > div > .blocks-container > .lazy-visibility > div > .ls-block {
    background-color: hsl(var(--cl-background), 0.35);
    border: 0px solid hsl(var(--cl-background), 0.85);
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    padding-right: 5px;
}
.color-level {
  background-color: transparent !important;
}
/* replace the word "seed/question/project" in the lines below with whatever keyword you want to target */
/* You will also need to replace the hex-code for the color to whatever color you want */
:is(#main-container, .cp__right-sidebar .color-level) :not(.today-queries) .lazy-visibility .color-level > .flex.flex-col > .initial > div > .blocks-container > .lazy-visibility > div > .ls-block[data-refs-self*='"seed'] {
  background-color: #2e8b5735;
}
:is(#main-container, .cp__right-sidebar .color-level) :not(.today-queries) .lazy-visibility .color-level > .flex.flex-col > .initial > div > .blocks-container > .lazy-visibility > div > .ls-block[data-refs-self*='"question'] {
  background-color: #d2972a35;
}
:is(#main-container, .cp__right-sidebar .color-level) :not(.today-queries) .lazy-visibility .color-level > .flex.flex-col > .initial > div > .blocks-container > .lazy-visibility > div > .ls-block[data-refs-self*='"project'] {
  background-color: #d22a2a35;
}

Copy and add the code above to your custom.css file. If you do not want to change the overall look of your references section, then only copy the below section to your custom.css file.

:is(#main-container, .cp__right-sidebar .color-level) :not(.today-queries) .lazy-visibility .color-level > .flex.flex-col > .initial > div > .blocks-container > .lazy-visibility > div > .ls-block[data-refs-self*='"seed'] {
  background-color: #2e8b5735;
}
:is(#main-container, .cp__right-sidebar .color-level) :not(.today-queries) .lazy-visibility .color-level > .flex.flex-col > .initial > div > .blocks-container > .lazy-visibility > div > .ls-block[data-refs-self*='"question'] {
  background-color: #d2972a35;
}
:is(#main-container, .cp__right-sidebar .color-level) :not(.today-queries) .lazy-visibility .color-level > .flex.flex-col > .initial > div > .blocks-container > .lazy-visibility > div > .ls-block[data-refs-self*='"project'] {
  background-color: #d22a2a35;
}

Customizing the blocks

Below is an example how to change or target a different keyword for colorization:

.ls-block[data-refs-self*='"seed']

In this example you will replace the keyword “seed” with whatever keyword you want to target. You will need this modification to the code in the first comment. Then copy and paste it into your custom.css file.

Next you will want to modify the color of the block.

background-color: #2e8b5735;

I would recommend only modifying the first 6 characters of the color code, this will ensure the background-color you choose will be applied with a low opacity setting so that it’s not too over whelming on your current theme colors. To find a color hex code you can check the following site: #C3DE2B Color Info - Coolors

With some tweaks you can get this to work in a normal block as well.