如何在 CDN 模式下更改 Vuetify 2.x 中的主题灯（默认）？

Question

还有另一个类似的主题here 但我认为答案没有更新，如果您看到该链接中的 codepen 不再工作，我试图更改主题而不必总是在每个组件上添加颜色属性，我只想定义主题颜色并继续对设计进行编码，我这样做是为了改变创建方法的主题颜色但不起作用。

我只使用 cdns 没有 vue-cli ，没有 Vue.use 像其他主题一样，我认为其他主题已解决，但在 vuetify 2.x 中该答案不适合。谢谢。

//JAVASCRIPT

var vuetify = new Vuetify ({
  theme: {
      primary: '#9e9e9e',
      secondary: '#000000',
      accent: '#8c9eff',
      error: '#ff00ff'   
  }
});

new Vue({
  el: '#app',
  vuetify : vuetify,
  data: () => ({    
  }),
  methods: {
  },
  created(){     this.$vuetify.theme.primary = '#ff00ff';
  }
});

<!-- HTML -->

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-btn class='rounded'>Default</v-btn>
        <v-btn class='rounded'>Primary</v-btn>
        <v-btn class='rounded'>Secondary</v-btn>
        <v-btn class='rounded'>Accent</v-btn>
        <v-btn class='rounded'>Error</v-btn>
      </v-container>         
     </v-content>
  </v-app>
</div>

Answer 1

你可以在你创建的方法中使用this.$vuetify.theme.dark = true;

如果要自定义主题，需要指定哪个主题（themes.theme.dark）

//JAVASCRIPT
const vuetify = new Vuetify({
  theme: {
    themes: {
      dark: {
        primary: '#9e9e9e',
        secondary: '#000000',
        accent: '#8c9eff',
        error: '#ff00ff'
      },
    },
  },
})

new Vue({
  el: '#app',
  vuetify : vuetify,
  data: () => ({    
  }),
  created(){
    this.$vuetify.theme.dark = true;
  }
});

<!-- HTML -->

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-btn class='rounded'>Default</v-btn>
        <v-btn class='rounded primary'>Primary</v-btn>
        <v-btn class='rounded secondary'>Secondary</v-btn>
        <v-btn class='rounded accent'>Accent</v-btn>
        <v-btn class='rounded error'>Error</v-btn>
      </v-container>         
     </v-content>
  </v-app>
</div>