Как изменить тему Vuetify по умолчанию?

Question

Другими словами, мой вопрос: что на самом деле означает <v-toolbar light> s lightприменить атрибут color к каждому элементу, например <v-btn color="primary">primary</v-btn>.

После того, как я определю цвет, ключевое слово dark будет влиять только на цвет шрифта.Например, <v-toolbar color="primary" dark> покажет основной цвет и белый шрифт.

Это не то, что я хочу, как заменить стандартные dark и light полностью настраиваемыми цветами темы. пример темы

Answer 1

Вы можете редактировать темные и светлые темы CSS, зайдя в код vuetify и отредактировав их файлы стилей.Они используют стилус, и любые изменения должны быть отражены немедленно.Чтобы найти код стиля, перейдите по адресу:

yourproject/node_modules/vuetify/src/stylus/settings/_theme.styl

и там вы найдете

$material-light := {
...
}

и

$material-dark := {
...
}

, которыеиметь стиль для фона, шрифтов, карточек и т. д.

Вы должны иметь возможность редактировать его по своему усмотрению.

В противном случае , чтобы сохранить редактирование папки модулей вашего узлаВы можете сделать следующее:

1. создать папку с именем stylus в папке src

2. создать файл с именем main.styl

3. добавьте это в этот файл: @import '~vuetify/src/stylus/main'

4. Затем в вашем main.js добавьте это import './stylus/main.styl

5. Если вы затем перезапустите свое приложение, стили должны теперь работать из вашего импорта.

6. Отредактируйте файл src / main.styl до оператора импорта и всеизменения заменит значение по умолчанию

например:

//src/stylus/main.styl
$material-light.background = #36EF45
$body-font-family = 'Raleway'
$alert-font-size = 18px

@import '~vuetify/src/stylus/main'

Все, что вы не измените, останется со значением по умолчанию.