Как изменить подсветку темы (по умолчанию) в Vuetify 2.x в режиме CDN?

Question

есть другая похожая тема здесь но я думаю, что ответ не обновляется, если вы видите, что кодовая ручка по этой ссылке больше не работает, я пытаюсь сменить тему без необходимости всегда добавлять цветную атрибутуна каждом компоненте я просто хочу определить цвет темы и продолжить кодирование дизайна, я сделал это, пытаясь изменить созданный метод на цвет темы, но он не работает.

я использую только 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>