使用 CSS 变量反转颜色

Question

我想创建一个本地倒置主题（现代浏览器）。使用 CSS Vars（CSS 自定义属性）设置颜色阴影。一些元素的对比度更高，而另一些元素的对比度低。现在倒置的容器有黑色背景。里面的一切，都应该颠倒过来。深灰色应该是浅灰色。浅灰色应该是深灰色。

我的目标是在不重新分配 CSS 选择器中的变量的情况下实现这一目标。对于这个例子来说，这很简单，但是实际的代码库很大并且有很多选择器。因此，我只想更改 CSS 变量。另外，我希望保持原始 CSS Vars 是可编辑的。

最终目标模型

很明显，对 Vars 的简单重新分配（亮 = 暗，暗 = 亮）不起作用。我试图将这些值转换为一个新的占位符 var，但这也没有奏效。 也许我做错了？有没有干净的方法？我不这么认为。

我知道使用 SASS 的解决方法，或使用混合混合模式的黑客。

游乐场：
https://codepen.io/esher/pen/WzRJBy

示例代码：

<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>

<div class="inverted">
  <p class="high-contrast">high contrast</p>
  <p class="low-contrast">low contrast</p>
</div>

<style>
  :root {
    --high-contrast: #222;
    --low-contrast:  #aaa;
  }

  .high-contrast { color: var(--high-contrast) }
  .low-contrast  { color: var(--low-contrast)  }

  .inverted {
    background-color: black;

    /* Switching vars does not work 
    --high-contrast: var(--low-contrast);
    --low-contrast:  var(--high-contrast);
    */

    /* Transposing Vars also doesn't work:
    --transposed-low-contrast: var(--low-contrast);
    --transposed-high-contrast: var(--high-contrast);
    --high-contrast: var(--transposed-low-contrast);
    --low-contrast: var(--transposed-high-contrast);
    */
  }

  /*

  I am aware of this solution (see description above):

  .inverted p.high-contrast { color: var(--low-contrast);   }
  .inverted p.low-contrast  { color:  var(--high-contrast); }

  */
<style>

Answer 1

这样的事情怎么样：

:root {
  --high-contrast: var(--high);
  --low-contrast: var(--low);
  --high: #222;
  --low: #aaa;
  /* Yes I can put them at the end and it will work, why?
     Because it's not C, C++ or a programming language, it's CSS
     And the order doesn't matter BUT we need to avoid 
     cyclic dependence between variables.
  */
}

.high-contrast {
  color: var(--high-contrast)
}

.low-contrast {
  color: var(--low-contrast)
}

.inverted {
  --high-contrast: var(--low);
  --low-contrast: var(--high);
}

<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>

<div class="inverted">
  <p class="high-contrast">high contrast</p>
  <p class="low-contrast">low contrast</p>
</div>