Vue3组合式API/Vuetify中如何在CSS中使用动态主题颜色？

问题背景 #

项目基于Vue3组合式API+Vuetify构建，希望在CSS中复用Vuetify主题已定义的颜色（类似JS中vuetify.theme.current.value.colors.secondary的使用方式），尝试CSS var()但未生效。相关代码如下：

模板代码 #

<template>
  <div class="container">
    <div class="mx-auto">
      <div class="demo-app-sidebar-section">
        <b>Évènements totaux ({{ calendarEvents?.length }})</b>
        <!-- faire un petit cube coloré -->
        <ul>
          <li>
            <b
              >Évènements inscrits
              <span class="legende inscrit"></span> <!-- problem here -->
            </b>
          </li>
          <li>
            <b
              >Évènements non inscrits <span class="legende nonInscrit"></span> <!-- problem here -->
            </b>
          </li>
        </ul>
      </div>
    </div>

    <div class="mx-auto">
      <FullCalendar class="demo-app-calendar" :options="calendarOptions">
        <template #eventContent="arg">
          <b>{{ arg.timeText }}</b>
          <i>{{ arg.event.title }}</i>
        </template>
      </FullCalendar>
    </div>
  </div>
</template>

CSS代码 #

.legende {
  width: 1em;
  height: 1em;
  display: inline-block;
  margin-left: 0.5em;
}

.legende.inscrit {
  background-color: #03dac6; /*problem here*/
}
.legende.nonInscrit {
  background-color: #e95196; /*problem here*/
}

主题配置代码 #

const themeLight: ThemeDefinition = {
  dark: false,
  colors: {
    background: "#F2F0F1",
    surface: "#FFFFFF",
    primary: "#E95196",
    "primary-darken-1": "#3700B3",
    secondary: "#03DAC6",
    "secondary-darken-1": "#018786",
    error: "#B00020",
    info: "#2196F3",
    success: "#4CAF50",
    warning: "#FDBB37",
  },
};

// Définition du thème sombre
const themeDark: ThemeDefinition = {
  dark: true,
  colors: {
    background: "#121212",
    surface: "#212121",
    primary: "#6B89C9",
    "primary-darken-1": "#3700B3",
    secondary: "#03DAC6",
    "secondary-darken-1": "#018786",
    error: "#B00020",
    info: "#2196F3",
    success: "#4CAF50",
    warning: "#FDBB37",
  },
};

JS中使用主题色示例 #

const calendarEvents = eventResult.map((event) => {
  let isInscrit = ref(
    event.users?.find((userV) => userV.email === user?.value?.email) !==
      undefined
  );

  if (isInscrit.value) {
    return {
      id: event.id,
      title: event.name,
      start: event.date,
      backgroundColor: vuetify.theme.current.value.colors.secondary, // Set green background for registered users
    };
  } else {
    return {
      id: event.id,
      title: event.name,
      start: event.date,
      backgroundColor: vuetify.theme.current.value.colors.primary, // Set pink background for non-registered users
    };
  }
});

解决方案 #

方法1：使用Vuetify自动生成的全局CSS变量 #

Vuetify会自动将主题颜色注入为全局CSS变量，命名规则为--v-{color-name}-base（基础色）、--v-{color-name}-darken-1（加深变体）等。直接修改CSS代码即可：

.legende.inscrit {
  background-color: var(--v-secondary-base);
}
.legende.nonInscrit {
  background-color: var(--v-primary-base);
}

深色模式切换时，Vuetify会自动替换变量对应的颜色值，无需额外处理。

注：之前var()未生效大概率是因为变量名错误，务必遵循Vuetify的变量命名规则。

方法2：通过组合式API动态绑定内联样式 #

如果需要实时跟随主题切换更新样式，可以直接在模板中用:style绑定主题颜色：

<li>
  <b>Évènements inscrits
    <span class="legende" :style="{ backgroundColor: $vuetify.theme.current.colors.secondary }"></span>
  </b>
</li>
<li>
  <b>Évènements non inscrits
    <span class="legende" :style="{ backgroundColor: $vuetify.theme.current.colors.primary }"></span>
  </b>
</li>

这种方式完全复用JS层面的主题颜色值，主题切换时样式会自动同步更新。

方法3：自定义全局CSS变量（可选） #

若想自定义变量名，可在全局样式中手动注入主题变量，并监听主题变化更新：

<script setup>
import { useVuetify, watch } from 'vuetify'

const vuetify = useVuetify()
const updateThemeVars = () => {
  const theme = vuetify.theme.current.value
  document.documentElement.style.setProperty('--custom-primary', theme.colors.primary)
  document.documentElement.style.setProperty('--custom-secondary', theme.colors.secondary)
}

// 初始化变量
updateThemeVars()
// 监听主题变化更新变量
watch(() => vuetify.theme.current.value, updateThemeVars, { deep: true })
</script>

<style>
.legende.inscrit {
  background-color: var(--custom-secondary);
}
.legende.nonInscrit {
  background-color: var(--custom-primary);
}
</style>

内容的提问来源于stack exchange，提问作者Alexvolkihar