How to set a CSS color variable with functional notation like rbg() or oklch()?

The MDN reference for CSS color values says, that I can specify an RGB color either as hexademical code (color: #ff0000;) or as a functional notation (color: rgb(255, 0, 0);).

Obsidian however seems to recognize only the former, but not the latter.

I have tested it with callouts. This works:

.callout {
    background-color: rgb(255,0,0);
}

This works also:

.callout {
    background-color: oklch(40.1% 0.123 21.57);
}

This doesn’t:

.callout {
    --callout-color: rgb(255,0,0);
}

Strangely enough, this does work:

.callout {
    --callout-color: 255, 0, 0;
}

But this notation is not valid CSS.

It seems that it is not possible to assign a color value to a color variable with a standard CSS
functional notation. Am I missing something?

--callout-color is a custom Obsidian variable/property. Looking at the app.css, --callout-color is defined here (the base default callout):

.callout {
  --callout-color: var(--callout-default);
  --callout-icon: lucide-pencil;
}

following along:

  --callout-default: var(--color-blue-rgb);

and again (for both light and dark color schemes):

  --color-blue-rgb: 8, 109, 221;

So --callout-color is expecting an input of three values only (R,G,B). That’s my understanding anyway.

--callout-color: var(--color-purple-rgb); (for example) also works fine here as

  --color-purple-rgb: 120, 82, 238;

If you want to use rgb(255,0,0);, oklch(40.1% 0.123 21.57);, etc., skip the --callout-color variable as use background-color as in your first two examples. :slightly_smiling_face:

Solution: This is an inconsistency in Obsidian’s variable naming scheme.

As @ariehen has pointed out, app.css sets default variables, eg for .theme-light:

--color-purple-rgb: 120, 82, 238;
--color-purple: #7852ee;

The second variable does define a valid css color. The first variable does not define a CSS color, but a triplet of three decimal values.

Variables ending with -rgb all seem to refer to such triplets. They are used in other parts of the style sheet to compute RGB colors, as described by @ariehen.

However not all variables storing such triplets have the suffix -rgb. I expected --callout-color to be a a color, not a triplet, because it lacks the -rgb. That’s why I expected any of these to work:

.callout {
    --callout-color: purple;
}

.callout {
    --callout-color: #7852ee;
}

.callout {
    --callout-color: var(--color-purple);
}

But because the variable stores a triplet of decimal values instead of a CSS color, it only recognizes such triplets, for example:

.callout {
    --callout-color: 120, 82, 238;
}

.callout {
    --callout-color: var(--color-purple-rgb);
}

Therefore it is not possible to set this variable with functional notation of colors. The variable doesn’t store a color, it stores a triplet of three decimal values.

I wish a variable with this odd data type would have been called --callout-color-rgb instead.

(Thanks to Kapirklaa on Discord)

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