Как изменить цвета темы в Vuetify в автономном режиме / режиме CDN?

Question

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

VuetifyДокументы по теме говорят об изменении цвета темы:

Это можно легко изменить.Просто передайте свойство темы в функцию Vue.use.Вы можете изменить все или только некоторые свойства темы, оставшиеся наследуются от значений по умолчанию.

Однако я не вижу этой работы на практике в автономном режиме / режиме CDN с версией v1.3.12.

Обратите внимание , что vue-cli не используется, когда вы загружаете Vue.js из CDN, и мы очень рады работать таким образом, поскольку сейчас мы сосредоточены на быстромразработка микро-интерфейса.

Эта кодовая ручка показывает код, как в примере с документами Vuetify, но цвета кнопок не меняются, и они остаются цветами по умолчанию.Я даже изменил цвет ошибки на Пурпурный (#ff00ff), чтобы сделать это очень очевидным, когда он работает:

JavaScript:

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#ff00ff'
  }
});

new Vue({
  el: '#app',
  data: () => ({
    //
  })
});

HTML:

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

Чтобы показать, что эта проблема не ограничивается CodePen, вот мой локальный проект, в котором есть v-navigation-ящик с классом ошибок, а цвет пользовательской темы установлен в Magenta:

v-navigation-drawer.error(app fixed mini-variant='true')

Я понимаю, что этот тип вопроса задавался ранее, но этот вопрос использовал vue-cli и nuxt (то есть не автономно) и этоВопрос был Vuetify версии до 1.0.Что отличает этот вопрос, так это отдельный аспект / CDN.

Answer 1

Видимо издатель уже звонит Vue.use(Vuetify).Поэтому вам нужно переопределить переменные перед инициализацией Vue:

Vue.prototype.$vuetify.theme = {
  primary: '#3f51b5',
  secondary: '#b0bec5',
  accent: '#8c9eff',
  error: '#ff00ff'
};


new Vue({ ...

или переопределить их в созданном хуке:

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