如何在自定义组件中复用Vuetify配置的主题颜色

不需要硬编码色值，Vuetify本身提供了多套现成方案直接读取初始化时配置的主题色，后续修改主题配置、切换明暗模式时所有引用的地方都会自动同步，不用逐个改代码：

• 直接用自动生成的全局工具类（最省事）
  Vuetify启动时会根据你配置的所有主题色自动生成全局CSS类，零额外代码就能用：

  • 设置元素背景色直接加对应类名即可，比如类名primary就对应你配置的primary主色
  • 设置文字颜色用{色名}--text格式的类，比如primary--text就是主色文字
    你举的div背景色场景，直接改模板就行，连自定义style块都不需要：

  <template>
    <div id="container" class="primary"></div>
  </template>
  

• SCSS中直接读取内置主题变量
  如果你需要写复杂自定义样式，只要项目是通过Vite/Webpack等构建工具正常引入Vuetify（不是用CDN加载预编译的版本），Vuetify会自动把主题配置注入到SCSS环境里，直接通过内置的map取值就行：

  <style lang="scss" scoped>
  #container {
    // 读取亮色主题下的primary色值
    background-color: map-get($theme-light, primary);
  }
  </style>
  

• 逻辑/模板中动态读取主题实例
  如果需要动态绑定样式，或者在JS逻辑里用到主题色，可以直接通过全局挂载的$vuetify对象读取当前激活主题的色值，切换主题时取值会自动更新：

  <template>
    <div id="container" :style="{ backgroundColor: $vuetify.theme.currentTheme.primary }"></div>
  </template>
  <script>
  export default {
    mounted() {
      // 脚本里取当前主色
      const primary = this.$vuetify.theme.currentTheme.primary
      // 输出你配置的#3f51b5
    }
  }
  </script>
  

顺便提一句，你示例里写的background-color: '#3f51b5';是无效写法，CSS里的颜色值不需要加引号，加了浏览器识别不了。

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