Фирменные цвета и CSS

Docusite автоматически генерирует все необходимые CSS-переменные VitePress из заданного бренда-цвета. Вам не нужно вручную прописывать десятки переменных — достаточно указать один цвет или градиент из трёх.

Один цвет

Укажите один hex-цвет, и docusite автоматически выведет все оттенки:

import { defineConfig } from 'docusite'

export default defineConfig({
  colors: {
    light: '#646cff',
    dark: '#535bf2',
  },
})

Из базового цвета автоматически генерируются:

Переменная	Значение	Описание
--vp-c-brand-1	базовый цвет	Основной цвет бренда (ссылки, активные элементы)
--vp-c-brand-2	базовый + 10% светлее	Hover
--vp-c-brand-3	базовый + 20% светлее	Active
--vp-button-brand-bg	= brand-1	Фон brand-кнопки
--vp-button-brand-hover-bg	= brand-2	Hover кнопки
--vp-button-brand-active-bg	= brand-3	Active кнопки
--vp-c-brand-soft	базовый @ 14% прозрачности	Мягкий фон
--vp-c-brand-dark	базовый — 10% темнее	Тёмный оттенок
--vp-c-brand-dimm	базовый @ 8% прозрачности	Очень мягкий фон

Градиент из трёх цветов

Для анимированного градиента укажите массив из трёх цветов:

import { defineConfig } from 'docusite'

export default defineConfig({
  colors: {
    light: ['#646cff', '#ff6466', '#21ffc7'],
    dark: ['#535bf2', '#ff6466', '#21ffc7'],
  },
})

В этом режиме:

• --vp-c-brand-1/2/3 и состояния кнопок считаются из первого цвета (color[0] → +10% → +20% ярче)
• --docusite-c-gradient-1/2/3 берутся напрямую из указанных цветов (для анимированного градиента)
• --vp-c-brand-soft, --vp-c-brand-dark, --vp-c-brand-dimm вычисляются из первого цвета

Градиент применяется к заголовку на главной, фону логотипа и мягкому свечению за h1 на страницах документации. Кнопки и остальные интерактивные элементы используют color[0] с осветлением на hover/active.

Тёмная и светлая тема

Цвета задаются отдельно для каждой темы:

colors: {
  light: '#646cff',   // применяется в :root
  dark: '#535bf2',    // применяется в .dark
}

Если указать только light или только dark, CSS будет сгенерирован только для этой темы.

Базовый CSS

Помимо брендовых цветов, docusite всегда внедряет базовый CSS, который включает:

• Навигация — убирает стандартную тень и границу VitePress
• Заголовок героя — градиентный текст с эффектом свечения
• Заголовок страницы — лёгкий размытый градиент из брендовых цветов за h1
• Фон логотипа — анимированный градиент (keyframe docusite-logo-bg, 7с цикл)
• Плавающий логотип — лёгкая анимация масштабирования (keyframe docusite-logo-float, 10с цикл)
• Кнопка бренда — эффект свечения (box-shadow)
• Карточки фич — стеклянный эффект (glassmorphism) с backdrop-filter: blur(10px) и стили для Iconify-иконок
• Макет — флексбокс для заполнения страницы, центрирование контента без сайдбара
• ReactMark / SolidMark / VueMark — стили для инлайн-иконок React, Solid и Vue