Изменение цветовой темы в Vuetify не работает
Я использую vuejs с vuetify, я поставил базовый шаблон vuetify и попытался изменить тему цвета, но цвет не переключается. У меня нет ошибок в консоли, и мой кеш также очищен.
Код main.js:
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import colors from 'vuetify/es5/util/colors';
Vue.use(Vuetify, {
theme: {
primary: colors.indigo.base, // #E53935
secondary: colors.indigo.base, // #FFCDD2
accent: colors.indigo.base // #3F51B5
}
});
const app = new Vue({
el: '#app',
// ...
});
А вот так выглядит мой шаблон.
<div id = "app">
<v-app light>
<v-navigation-drawer
fixed
v-model = "drawerRight"
right
clipped
app
>
</v-navigation-drawer>
<v-toolbar
dark
fixed
app
clipped-right
>
<v-toolbar-side-icon @click.stop = "drawer = !drawer"></v-toolbar-side-icon>
<v-spacer></v-spacer>
<v-toolbar-side-icon @click.stop = "drawerRight = !drawerRight"></v-toolbar-side-icon>
</v-toolbar>
<v-content>
<v-container fluid fill-height>
<v-layout justify-center align-center>
</v-layout>
</v-container>
</v-content>
</v-app>
</div>
@Traxo Версия 1.0.14
Вы импортируете уменьшенный CSS, вместо этого вам следует импортировать файлы стилуса. Попробуйте использовать @import '~vuetify/src/stylus/main'
@DigitalDrifter не работал, как тогда будет выглядеть файл app.js?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
@DigitalDrifter предложил @import '~vuetify/src/stylus/main'.
Однако это код стилуса.
Таким образом, вы можете создать, например, папку stylus и поместить в нее main.styl, что предлагается, чтобы вы могли легко изменить стиль по умолчанию.
Добавьте этот код в main.styl:
// main.styl
@import '~vuetify/src/stylus/main'
Затем включите main.styl в свой app.js
// app.js
import './stylus/main.styl'
Если позже вы захотите переопределить переменные стилуса по умолчанию внутри Vuetify (сделайте это в main.styl), тогда ваши переменные должны быть объявлены до @import, и тогда они автоматически переопределят переменные по умолчанию Vuetify.
the Color will not Switch
Цвет чего? У вас нет компонентов, использующих цвета темы. Если вы хотите изменить цвет фона панели инструментов, например, вам нужно сделать <v-toolbar color = "primary">
в моем случае мне пришлось обернуть все мои компоненты в v-app
<div id = "id">
<v-app>
// youre code here
</v-app>
</div>
Если вы этого не сделаете, ваше приложение будет использовать тему по умолчанию.
"In Vuetify, the v-app component and the app prop on components like v-navigation-drawer, v-app-bar, v-footer and more, help bootstrap your application with the proper sizing around component. This allows you to create truly unique interfaces without the hassle of managing your layout sizing. The v-app component is REQUIRED for all applications. This is the mount point for many of Vuetify's components and functionality and ensures that it propagates the default application variant (dark/light) to children components and also ensures proper cross-browser support for certain click events in browsers like Safari. v-app should only be used within your application ONCE."
Спасибо, человек, это сработало, но он все еще модифицировал контейнер v-app из-за размера и фона по умолчанию
Ваша версия
vuetify?