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

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

19.09.2019 08:23:03 Просмотров 74 Источник

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

я использую только cdns без vue-cli, без Vue.Используйте как другую тему, я думаю, что другая тема была решена, но в 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>

У вопроса есть решение - Посмотреть?

Ответы - Как изменить тему Света(по умолчанию) в Vuetify 2.x в режиме CDN? / How to change theme light(default) in Vuetify 2.x in CDN mode?

Daniel

19.09.2019 08:58:31

Вы можете использовать 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>

https://stackoverflow.com/questions/58016133/how-to-change-theme-lightdefault-in-vuetify-2-x-in-cdn-mode/58016628#comment102438740_58016628
я делал это раньше, но, как вы могли видеть, цвета, первичные, вторичные и другие не загружаются. я пытаюсь добавить --> это.$vuetify.тема.темный.primary = '#ff00ff'; но ничего, я не могу настроить цвет палитры по умолчанию . я не хочу добавлять "color=" primary "" к каждому компоненту . спасибо за ответ . вы знаете, как установить цвет темы по умолчанию (не легкая тема , мой собственный цвет палитры без добавления атрибутов к новым компонентам)?
https://stackoverflow.com/questions/58016133/how-to-change-theme-lightdefault-in-vuetify-2-x-in-cdn-mode/58016628#comment102439833_58016628
это работает, ваш шаблон использовал тот же тип кнопки, хотя. Я обновил свой код, чтобы передать тип кнопки
https://stackoverflow.com/questions/58016133/how-to-change-theme-lightdefault-in-vuetify-2-x-in-cdn-mode/58016628#comment102440320_58016628
может быть, я не ясно, поставить первичный на класс atributte отличается от того , что я хочу сделать , я не хочу добавлять atributtes или вставить класс, потому что это то же самое . я хочу настроить все темы. не по компонентам . что-то вроде создать свою собственную тему. или настроить светлую тему или темную тему, но только один раз . не каждый раз, когда я добавляю какой-то компонент в свой html. , v-btn без атрибутов-это defaut light, я думаю . другие компоненты имеют различные цветовые границы, потому что тема имеет эти цвета. это то ,что я хочу, а не настроить v-btn, v-ящик.. В-и т. д..
https://stackoverflow.com/questions/58016133/how-to-change-theme-lightdefault-in-vuetify-2-x-in-cdn-mode/58016628#comment102441424_58016628
Как вы ожидаете <v-btn class='rounded'>Default</v-btn> и <v-btn class='rounded'>Primary</v-btn> оказывать по-разному, если вы не предоставите какой-то способ различения?
https://stackoverflow.com/questions/58016133/how-to-change-theme-lightdefault-in-vuetify-2-x-in-cdn-mode/58016628#comment102441973_58016628
извините, я думаю, что это сбивает с толку, это моя ошибка . я этого не хочу . я просто хочу, чтобы v-btn по умолчанию получал цвет, который я указываю по умолчанию в теме . цвет ошибки по умолчанию в некоторых входных данных может быть зеленым, если я хочу, но по умолчанию не устанавливаю этот цвет в качестве атрибута. есть некоторые компоненты, которые по умолчанию имеют цвета из темы. я думаю, как угловой материал, но, возможно, это моя ошибка . я не знаю, возможно ли это .
https://stackoverflow.com/questions/58016133/how-to-change-theme-lightdefault-in-vuetify-2-x-in-cdn-mode/58016628#comment102467904_58016628
Хорошо, я неправильно понял, пример кода сбил меня с толку. Я не верю, что есть способ сделать это без изменения css напрямую или компиляции css (не из cdn). Вы можете использовать defaultили primaryкласс для всех элементов, которые, в зависимости от размера вашего проекта, все равно могут быть менее трудоемкими, чем работа с css напрямую или компиляция css.
https://stackoverflow.com/questions/58016133/how-to-change-theme-lightdefault-in-vuetify-2-x-in-cdn-mode/58016628#comment102472199_58016628
спасибо за ваши ответы , я апрексирую его . ну ладно . я думаю, что я оставлю этот вопрос, потому что, возможно, нет способа решить эту проблему без создания небольшого файла css .
Закрыть X