使用 CSS 变量反转颜色

Question

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

我的目标是在不重新分配 CSS 选择器中的变量的情况下实现这一点。对于这个例子，这很容易，但实际的代码库很大，而且有很多选择器。因此，我只想更改 CSS Vars。此外，我希望保持原始 CSS 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>