Vue.js 如何使文本颜色与其容器形成对比？

对于类星体，我试图将

q-breadcrumb-el

放在

q-toolbar

中。 但是，面包屑文本是不可见的，因为它与工具栏的背景颜色相同（主题主色）。
拟在工具栏中使用的类星体组件（例如

q-toolbar-title

）以正确对比的颜色渲染文本。 我可以在我的模板中硬编码颜色，但如果主题原色更改为浅色，则该操作将失败

在Quasar（或Vue，或vanilla CSS）中，是否有一个常见的成语来表示“与背景颜色对比”或“与xxx元素中的文本颜色相同”？（也就是说，所有酷孩子都知道的东西？）

如何确定

q-toolbar-title

是如何实现的

维基页面

如果我想要你的意思。

• 添加CSS文本笔划属性颜色应仅为黑色或白色。 以便区分文本颜色和工具栏颜色

维基页面

如果我想要你的意思。

• 添加CSS文本笔划属性颜色应仅为黑色或白色。 以便区分文本颜色和工具栏颜色

维基页面

我很感激你的回答，但我希望有一种方法可以避免为文本笔划声明明确的颜色。我喜欢“背景为白色时为黑色，背景为黑色时为白色”，或者更一般地说，“背景为浅时为深，背景为暗时为浅”。我很欣赏这个答案，但我希望有一种方法可以避免为文本笔划声明显式颜色。我想要的是“背景为白色时为黑色，背景为黑色时为白色”的意思，或者更一般地说，“背景为浅时为暗，背景为暗时为亮”。

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