Конфиг стиля

Около 2 минКонфигКонфиг темыСтиль

Вы можете изменить стили темы в .vuepress/styles, установив значения переменных в файлах config.scss и palette.scss.

Также вы можете добавить свои собственные стили в .vuepress/styles/index.scss.

config.scss

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

Отзывчивые контрольные точки:

  • $pc
  • $laptop
  • $pad
  • $tablet
  • $mobile

Блок кода:

  • $code-light-theme: тема блока кода в светлом режиме
  • $code-dark-theme: тема блока кода в темном режиме

Класс контента: $content-class

Список цветов: $colors

Демо
// modify code theme in lightmode
$code-light-theme: "coy";

// update pc breakpoint
$pc: 1920px;
Значение по умолчанию
File not found

palette.scss

palette.scss используется для вставки переменных CSS, ниже приведены поддерживаемые конфигурации и значения по умолчанию.

Инфо

Все переменные здесь (включая недавно добавленные переменные) будут преобразованы в формат kebab-case и введены как переменные CSS.

Например, $theme-color будет введено как --theme-color, а $backgroundColor будет введено как --$background-color.

Конфигурация цвета

Для всех цветов, если они одинаковы в светлом и темном режимах, вы можете установить их напрямую; в противном случае установите переменную Sass типа Map, чтобы задать значения цвета в светлом и темном режимах соответственно.

Доступные цветовые переменные:

  • $theme-color: цвет темы
  • $text-color: цвет текста
  • $bg-color: цвет фона
  • $bg-color-secondary: более светлый цвет фона
  • $bg-color-tertiary: более светлый цвет фона
  • $border-color: цвет границы
  • $box-shadow: использование цвета тени для элементов
  • $card-shadow: использование цвета тени на картах
Демо
// set theme color to red
$theme-color: red;

// setting border color with a darker value
$border-color: (
  light: #ddd,
  dark: #444,
);
Значение по умолчанию
File not found

Конфигурация макета

Доступные переменные макета:

Панель навигации:

  • $navbar-height: высота панели навигации
  • $navbar-horizontal-padding: горизонтальное заполнение навигационной панели
  • $navbar-vertical-padding: вертикальное заполнение навигационной панели
  • $navbar-mobile-height: высота панели навигации на мобильных устройствах
  • $navbar-mobile-horizontal-padding: горизонтальное заполнение панели навигации на мобильных устройствах
  • $navbar-mobile-vertical-padding: вертикальное заполнение панели навигации на мобильных устройствах

Боковая панель:

  • $sidebar-width: ширина боковой панели
  • $sidebar-mobile-width: ширина боковой панели на мобильных устройствах

Содержание:

  • $content-width: ширина основного содержимого
  • $home-page-width: ширина содержимого главной страницы

Шрифты:

  • $font-family: семейство шрифтов, используемое для обычного текста
  • $font-family-fancy: семейство шрифтов, используемое в причудливых элементах

Код:

  • $font-family-code: семейство шрифтов, используемое в коде
  • $line-numbers-width: ширина номера строки в кодовых блоках

Переход:

  • $color-transition: переход, используемый для цветов
  • $transform-transition: переход, используемый при анимации преобразования
Демо
// update navbar height on mobile
$navbar-mobile-height: 3.5rem;

// Override default font
$font-family: 'Georgia, -apple-system, "Nimbus Roman No9 L", "PingFang SC", "Hiragino Sans GB", sans-serif';
Значение по умолчанию
File not found

index.scss

Все, что заполняет это, будет проанализировано до стандартного CSS, а затем вставлено после стилей темы и плагинов.

Таким образом, вы можете добавить новые стили или переопределить стили здесь:

Демо
// make site name in navbar italic
.site-name {
  font-style: italic;
}