Глобальные стили

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

Подключение глобальных стилей

Vuetify поддерживает несколько подходов к подключению глобальных стилей:

  1. Через SCSS/Stylesheets Для настройки глобальных переменных и миксинов используется SCSS. В проекте Vue с Vuetify создается файл, например, variables.scss, где определяются основные параметры дизайна:

    // variables.scss
$btn-border-radius: 8px;
$primary-color: #1976D2;
$secondary-color: #424242;
$font-family-base: 'Roboto', sans-serif;

    После этого файл импортируется в основной файл стилей приложения:

    import '@/styles/variables.scss';

  2. Через Vuetify Theme С помощью объекта theme можно глобально задать цветовую палитру для всех компонентов:

    import { createVuetify } from 'vuetify'

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
          error: '#FF5252',
        },
      },
    },
  },
})

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

Использование глобальных классов

Vuetify предоставляет возможность создания и применения собственных глобальных CSS-классов для стандартных элементов интерфейса. Пример глобального класса для кнопок:

.btn-large {
  padding: 16px 32px;
  font-size: 18px;
  border-radius: 12px;
}

Класс подключается через глобальный файл стилей и может использоваться во всех компонентах:

<v-btn class="btn-large" color="primary">Кнопка</v-btn>

Стилизация через SASS Variables

Vuetify имеет обширный набор SCSS-переменных, позволяющих задавать глобальные параметры стилей компонентов:

  • $body-font-family — шрифт всего приложения.
  • $border-radius-root — радиус скругления для всех компонентов.
  • $btn-height и $btn-padding-x — высота и горизонтальные отступы для кнопок.
  • $input-height — высота текстовых полей.

Изменяя эти переменные в variables.scss, можно добиться глобальной стилистической согласованности:

$body-font-family: 'Roboto', sans-serif;
$border-radius-root: 10px;
$btn-height: 48px;
$btn-padding-x: 24px;

Темизация и динамическое переключение стиля

Vuetify позволяет менять глобальные темы динамически через theme.global.name:

vuetify.framework.theme.global.name.value = 'dark'

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

Глобальные миксины и утилиты

Для унификации отступов, размеров шрифтов и других повторяющихся стилей можно создавать глобальные SCSS-миксины:

@mixin text-title($size: 24px, $weight: 500) {
  font-size: $size;
  font-weight: $weight;
  line-height: 1.4;
}

Применение миксина:

h1 {
  @include text-title(32px, 700);
}

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

Глобальные настройки Typography

Vuetify 3 предоставляет мощную систему типографики, которую можно настраивать глобально через объект typography:

const vuetify = createVuetify({
  defaults: {
    global: {
      typography: {
        fontFamily: 'Roboto, sans-serif',
        h1: { fontWeight: 700, fontSize: '32px' },
        h2: { fontWeight: 600, fontSize: '28px' },
        body1: { fontWeight: 400, fontSize: '16px' },
      },
    },
  },
})

Эти настройки применяются ко всем компонентам с типографикой (<v-typography>), создавая единый визуальный стиль текста.

Важные рекомендации

  • Минимизировать локальные переопределения: глобальные стили должны быть источником истины, чтобы избежать конфликтов с компонентами.
  • Использовать переменные Vuetify: изменение стандартных переменных предпочтительнее, чем создание множества кастомных классов.
  • Динамическая тема: всегда планировать возможность переключения между светлой и тёмной темой, используя глобальные настройки.
  • Миксины и утилиты: хранить повторяющиеся стили в миксинах и функциях SCSS, чтобы снизить дублирование кода.

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

Оглавление