如何在 VSCode/VSCodium 中显示 css 自定义属性/变量的颜色预览

Question

我花了很多时间在 VSCodium 中为自定义 WordPress 主题编写 css。我使用 wp-cli 创建了脚本来自动化许多过程，因此我使用了大量自定义属性/变量，特别是颜色：前景、背景和渐变。

有没有办法让 VSCode/VSCodium 显示如下代码的颜色预览，就像color: red;or等​​关键字一样color: #ff0000？

:root {
    --hue--1: 45;

    --color--saturation: 1%;
    --color--lightness: 1%;
    --color--opacity: 1;
    
    --color--dark: hsl(var(--hue--1)
    calc(22 * var(--color--saturation))
    calc(33 * var(--color--lightness))
    calc(1 * var(--color--opacity))
    );
    --c1: [color preview square here]var(--color--dark);
}

从一个主题跳到另一个主题，如果没有我已经习惯的颜色预览，很难保持 9 种颜色变体和 3 种渐变（这是深色的、浅色的、明亮饱和的还是柔和的？）

我尝试过各种扩展：CSS Variable Autocomplete、Colorize、TODO Hightlight 等。没有一个达到预期的效果。