使用CSS变量反转颜色

Question

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

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

这样的事情：

＆＃13;

＆＃13;

: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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;