使用CSS变量反转颜色 [英] Inverting colors with CSS Variables

问题描述

我想创建一个本地的反向主题(现代浏览器).使用CSS Vars(CSS自定义属性)设置阴影.一些元素具有更高的对比度，另一些元素则具有较低的对比度.现在，倒置的容器具有黑色背景.里面的所有东西都应该颠倒.深灰色应该是浅灰色.浅灰色应该是深灰色.

I want to create a local inverted theme (modern browsers). Color shades are set using CSS Vars (CSS custom properties). Some elements have more contrast, others are low contrast. Now the inverted container has a black background. Everything within there, should be reversed. Dark grey should be light grey. Light grey should be dark grey.

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

My goal is to achieve this without reassigning the vars in CSS selectors. For this example it would be easy, but the actual code base is big and there are many selectors. So instead of that I just want change the CSS Vars. Also, I want keep the original CSS Vars to be editable.

最终目标模型

很明显，简单地重新分配Vars(亮=暗，暗=亮)是行不通的.我试图将值转换为新的占位符var，但这也没有用.也许我做错了吗?有没有一种干净的方法?我不这么认为.

Simple reassignment of the Vars (light = dark, dark = light) does not work, obviously. I tried to transpose the values to a new placeholder var, but that also didn't worked. Maybe I was doing it wrong? Is there a clean way? I don't think so.

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

I am aware of workarounds using SASS, or hacks using mix-blend-mode.

游乐场:
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>

推荐答案

类似这样的事情:

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

这篇关于使用CSS变量反转颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！