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 — изменить радиус скругления ​

Радиус скругления задаёт, насколько скруглены углы (карточки, кнопки, поля ввода). Большее число делает их мягче и круглее; 0 — полностью прямые углы:

scss
// src/styles/tokens.scss
$radius: 12px;

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

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

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

TIP

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

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