Как мне получить цвет текста, чтобы контрастировать с его контейнером? - PullRequest
0 голосов
/ 16 июня 2019

С помощью Quasar я пытаюсь поместить q-breadcrumb-el в q-toolbar.Однако текст «хлебная крошка» невидим, поскольку он того же цвета, что и фон панели инструментов (основной цвет темы).
Компоненты Quasar, предназначенные для использования на панели инструментов (например, q-toolbar-title), отображают текст в контрастном цвете.правильно.Я могу жестко закодировать цвет в моем шаблоне, но это не удастся, если основной цвет темы изменится на светлый.

  1. Есть ли распространенная идиома, чтобы сказать что-то вроде "контрастирование с цветом фона" или "тот же цвет, что и текст в элементе xxx" в Quasar (или Vue, или ванильный CSS)?(То есть что-то, что просто знают все классные ребята?)
  2. Как я могу определить, как 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>
...