Блог

Главная - Вопросы по программированию - Как изменить цвета по умолчанию в Vuetify?

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

#vue.js #colors #nuxt.js #vuetify.js

Вопрос:

Возможно, мой вопрос был простым, но до сих пор я не мог найти никакого решения для этого. Я использую Vuetify в своем приложении Nuxt. Я использовал темную тему этого. в соответствии с конфигурацией темы официального веб-сайта мы можем изменить основной или дополнительный или другие цвета темы с нашими желаемыми цветами. Но когда мы устанавливаем, например, темную тему, цвета текста и фона по умолчанию устанавливаются на белый и черный. Я не мог найти никакого решения, чтобы изменить их. Я знаю, что мы можем установить, например class="primary" , для элемента, чтобы изменить его цвет фона. Но я хочу установить цвет по умолчанию для текста или фона, как это:

 body {
    color: var(--v-info-base);
}
/* or */
#app {
    color: var(--v-info-base);
}

Где цвета моего веб-сайта были определены в моем nuxt.config.js файл, подобный этому:

 vuetify: {
        customVariables: ['~/assets/variables.scss'],
        theme: {
            dark: true,
            options: { customProperties: true },
            themes: {
                dark: {
                    primary: {
                        base: "#099b63",
                        darken1: "#04c279"
                    },
                    accent: "#250032",
                    secondary: "#97812F",
                    info: {
                        base: "#1FFFF1",
                        darken1: "#450b5a",
                        darken2: "#1125c0",
                        darken3: "#40bfa4"
                    },
                    warning: colors.amber.base,
                    error: colors.deepOrange.accent4,
                    success: colors.green.accent3,
                    anchor: "#1FFFF1"
                }
            },
        }
    },

Но это не работает для меня!!!

Ответ №1:

для этого вам нужно переписать переменные sass vuetify, пример использования в документе

так, например, в вашем variables.scss вы можете иметь следующий код:

 $material-dark: (
  'background': #464994,
  'text': (
     'theme': #944646,
   )
);

это приведет к переписыванию цветов по умолчанию для фона и цвета текста в темном режиме.

Комментарии:

1. Я добавил ваш код в свой variables.scss файл, он изменил весь цвет фона, но текст по-прежнему белый. Я имею в виду, что, например, когда у нас v-text-field в приложении есть a и для этого не задан никакой css, их цветовой текст по умолчанию должен быть, например, #944646, а цвет фона по умолчанию должен быть #464994, который вы установили, но этого не происходит. Я не хочу устанавливать много переменных для каждого «компонента Vuetify» . потому что это похоже на установку css для каждого компонента.

2. насколько я знаю, правильный способ изменить стили по умолчанию во всем приложении vuetify-это использовать его API variabla. ( vuetifyjs.com/en/features/sass-variables/#variable-api ). перейдите по этой ссылке и в раскрывающемся списке выберите первый пункт ( $vuetify ), прокрутите вниз, чтобы найти $material-dark , затем найдите нужный раздел и измените их в соответствии с вашими потребностями. например, у вас есть $material-dark: ('text-fields': ('filled': '#someColor')) или $material-dark: ('inputs': ('box': '#someColor')) или . $material-dark: ('text-color': '#someColor')

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

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

Метки: