Docs

Русский

English
Türkçe

Русский

English
Türkçe

Оформление

Цвета и стилизация ​

Это путь без написания кода к вашей собственной теме. Вы будете менять цвета, отступы и шрифты, редактируя два файла SCSS — Svelte, HTML или JavaScript не нужны. Если вы никогда не писали CSS, не переживайте: каждое изменение здесь сводится к «найти значение, изменить значение, обновить страницу».

TIP

Этот уровень вообще не требует Svelte или JavaScript. Даже одно изменение цвета уже даёт заметно другую тему — и поскольку вы задаёте лишь значения, которые движок уже понимает, обновления движка никогда не ломают вашу тему.

Два файла, которые вы редактируете ​

Всё на этой странице происходит в двух файлах внутри вашей темы:

ФайлДля чего он нужен
src/styles/tokens.scssМеню каждого цвета и шрифта, которые использует движок. Раскомментируйте строку и измените её значение.
src/styles/style.scssМесто для вашего собственного дополнительного CSS, после стилей движка.

tokens.scss — меню значений ​

Когда вы создаёте тему из шаблона, src/styles/tokens.scss поставляется как закомментированное меню каждой переменной движка — цвета вроде $primary и $secondary, радиус скругления, шрифты и именованные тёмные темы. Каждая строка начинается с //, что означает «выключено». Чтобы использовать одну из них:

  1. Найдите нужную переменную в файле.
  2. Уберите // в начале её строки (это называется раскомментировать).
  3. Измените значение на нужное.
  4. Сохраните файл и обновите страницу в браузере.

Каждая переменная движка объявлена с !default, что является замысловатым способом сказать: ваше значение всегда побеждает. Вам никогда не придётся бороться с движком.

Пример 1 — изменить основной цвет ​

Основной цвет — это главный акцент темы: кнопки, ссылки, выделения. Измените его, и весь сайт перекрасится:

scss
// src/styles/tokens.scss
$primary: #ff5722;

Пример 2 — изменить радиус скругления ​

Радиус скругления не является переменной tokens.scss. Задайте семейство --pano-radius в собственном CSS (src/styles/style.scss, ниже импортов); его читают все представления по умолчанию и собственные представления движка:

scss
// src/styles/style.scss — после импортов
:root {
  --pano-radius: 12px;
  --pano-radius-sm: 8px;
  --pano-radius-lg: 18px;
}

Большее число делает углы мягче; 0 — прямые. См. Токены --pano-* ниже.

Пример 3 — изменить шрифт ​

Задайте базовый шрифт, используемый на всём сайте. Используйте шрифт, в доступности которого вы уверены (веб-безопасный шрифт или тот, что вы подключаете сами):

scss
// src/styles/tokens.scss
$font-family-base: "Inter", sans-serif;

TIP

Вам не нужно раскомментировать каждую строку. Меняйте только те несколько значений, которые вам важны, а остальные оставьте закомментированными — движок подставит разумные значения по умолчанию для всего, чего вы не трогали.

Токены --pano-* ​

Помимо меню SCSS тема читает 34 CSS-переменные --pano-*: цвета (--pano-color-bg, --pano-color-text, --pano-color-primary, --pano-color-border...), радиусы (--pano-radius, -sm, -lg, -pill), --pano-border-width, тени (--pano-shadow-sm, --pano-shadow, --pano-shadow-lg), шрифты (--pano-font-body, --pano-font-heading, --pano-font-mono, --pano-font-size...) и --pano-space. В теме с Bootstrap они отражают соответствующую переменную Bootstrap. Плагины стилизуют свои представления по умолчанию теми же переменными, поэтому один набор значений перекрашивает и плагины:

css
:root { --pano-color-primary: #7c3aed; --pano-radius: 0.5rem; }

У каждого представления плагина есть и семантические классы (market-product-card__title). Ваш CSS не в слое, поэтому он перекрывает резервные стили плагина: .market-product-card__title { margin: 1rem } просто работает. Тема без Bootstrap описана на странице Представления.

style.scss — ваш собственный дополнительный CSS ​

tokens.scss охватывает значения, которые движок уже знает. Когда вы хотите добавить свой собственный CSS — то, для чего у движка нет переменной, — поместите его в src/styles/style.scss, после импортов в начале файла. Всё, что вы туда добавите, загружается последним, поэтому накладывается поверх стилей движка.

Например, чтобы сделать у карточек более сильную тень:

scss
// src/styles/style.scss — после импортов

.section-card {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

WARNING

Добавляйте свой CSS ниже существующих строк @use / @import, никогда не выше. Стили движка должны загрузиться первыми, чтобы ваши правила могли на них опираться.

Как увидеть изменения в реальном времени ​

SCSS компилируется в CSS отдельно от остальной сборки. За это отвечают две команды:

  • Отслеживание в реальном времени во время работы — перекомпилирует автоматически при каждом сохранении:

    sh
    bun run dev:ui

  • Разовая компиляция — соберите стили один раз (полезно перед полной сборкой):

    sh
    bun run build:ui

С запущенным bun run dev:ui цикл прост: измените значение, сохраните и наблюдайте, как обновляется браузер.

Что дальше? ​

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

Copyright © 2026 Pano