Nuxt搭配Vuetify开发时如何获取当前明暗主题对应的文本颜色

• 核心逻辑：Vuetify 2/3版本在启用明暗主题切换功能时，会自动将当前激活主题的所有色值挂载为全局原生CSS自定义属性，无需在Vue组件中手动通过JS读取主题状态，仅写纯CSS即可实现颜色随主题自动匹配的效果。
• 你遇到的默认链接蓝色、带下划线的样式，是浏览器给原生a标签的默认渲染样式，不属于Vuetify组件本身的样式，所以必须通过全局CSS规则覆盖才能彻底消除。
• 直接在你之前的全局CSS规则基础上调整，即可实现颜色自动适配主题：

a {
  text-decoration: none;
  /* 自动匹配当前主题的正文文本颜色 */
  color: rgb(var(--v-theme-on-surface));
}

• 内置变量说明：
  • --v-theme-on-surface 是Vuetify内置的「与页面背景对比度合规的前景文本色」，和Vuetify组件内置的正文文本颜色完全一致，自动适配明暗模式切换，满足WCAG文本对比度要求，不会出现亮色模式下文本太浅、暗色模式下过于刺眼的问题。
• 如果需要链接使用Vuetify的主色风格，可直接替换为对应主题变量：

a {
  text-decoration: none;
  /* 自动匹配当前主题定义的主色值 */
  color: rgb(var(--v-theme-primary));
}

• 常见问题排查：
  • 若全局a标签样式不生效，可调整样式优先级，确保自定义全局样式的引入顺序在Vuetify基础样式之后，或适当提高选择器权重：

  :root a {
    text-decoration: none;
    color: rgb(var(--v-theme-on-surface));
  }
  

  • 若你在项目中自定义过Vuetify明暗主题的色值，自定义值会自动同步到上述CSS变量中，无需额外修改原有CSS规则，主题切换时链接颜色会自动跟随自定义配置变化。

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