如何获得文本颜色以对比其容器？答案

【问题标题】：How do I get text color to contrast its container?如何获得文本颜色以对比其容器？
【发布时间】：2019-10-30 01:04:51
【问题描述】：

对于 Quasar，我试图将 q-breadcrumb-el 放入 q-toolbar 中。但是，面包屑文本是不可见的，因为它与工具栏的背景颜色相同（主题原色）。
用于工具栏的 Quasar 组件（例如q-toolbar-title）以正确对比的颜色呈现文本。我可以在模板中对颜色进行硬编码，但如果主题原色更改为浅色，则会失败。

在 Quasar（或 Vue 或 vanilla CSS）中是否有一个常见的习惯用法，比如“与背景颜色形成对比”或“与 xxx 元素中的文本颜色相同”？（即，所有酷孩子都知道的东西？）
如何确定q-toolbar-title 是如何做到的？

<q-toolbar>
  <q-toolbar-title>Wiki Page</q-toolbar-title>  <!-- <== white text on primary color background -->
  <q-breadcrumbs>
    <q-breadcrumbs-el
      v-for="section in sections"
      :key="section.label"
      :label="section.label"
      :to="section.path"
      class="text-white"    <!-- <== works, but is fragile -->
    ></q-breadcrumbs-el>
  </q-breadcrumbs>
</q-toolbar>

【问题讨论】：

标签： vue.js quasar

【解决方案1】：

如果我想要你的意思。

添加一个 CSS text-stroke 属性，颜色只能是黑色或白色。以便区分文本颜色和工具栏颜色。

<q-toolbar>
  <q-toolbar-title>Wiki Page</q-toolbar-title>  <!-- <== white text on primary color background -->
  <q-breadcrumbs style="font-size: 20px;-webkit-text-stroke: 0.4px black;">
    <q-breadcrumbs-el
      v-for="section in sections"
      :key="section.label"
      :label="section.label"
      :to="section.path"
      class="text-white"    <!-- <== works, but is fragile -->
    ></q-breadcrumbs-el>
  </q-breadcrumbs>
</q-toolbar>

【讨论】：

我很欣赏这个答案，但我希望有一种方法可以避免为文本笔划声明明确的颜色。我想要一些意思是“背景为白色时为黑色，但背景为黑色时为白色”，或者更一般地说，“当背景较亮时会变暗，而当背景变暗时会变亮”。