Настройка через CSS-переменные

Все размеры и цвета Pico хранит в CSS-переменных (пользовательских свойствах из учебника) с приставкой --pico-. Чтобы изменить вид сайта, не нужно править файл Pico: достаточно переопределить нужные переменные в своём файле стилей.

Где писать свои стили

Создайте файл css/custom.css рядом с index.html и подключите его после Pico:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<link rel="stylesheet" href="css/custom.css">

Порядок важен: при одинаковой специфичности побеждает правило, объявленное позже. В проекте на Vite то же самое делается двумя строками импорта в src/main.js: сначала Pico, затем свой файл.

Глобальные переменные

Переменные на :root действуют на всю страницу. Сделаем сайт Анны мягче — с крупным скруглением:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<style>
  :root {
    --pico-border-radius: 1rem;
  }
</style>
 
<input type="text" placeholder="Ваше имя">
<button>Подписаться</button>
<article>Карточка тоже стала круглее.</article>

Поле, кнопка и карточка получили скругление в 1rem. В превью правило стоит в <style>, а у вас — в css/custom.css.

Переменные для одного элемента

Переменную можно переопределить и в обычном селекторе — тогда она действует только на этот элемент и его потомков:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<style>
  .pill {
    --pico-border-radius: 2rem;
  }
</style>
 
<button class="pill">Подписаться</button>
<button>Обычная кнопка</button>

Первая кнопка стала овальной, вторая осталась прежней. Так удобно менять вид одного компонента, не задевая остальные.

Основной цвет

Цвета Pico задаёт отдельно для каждой темы, поэтому переопределять их нужно в том же селекторе, что использует Pico для светлой темы:

[data-theme=light],
:root:not([data-theme=dark]) {
  --pico-primary: #c2410c;
  --pico-primary-background: #c2410c;
  --pico-primary-hover: #9a3412;
  --pico-primary-hover-background: #9a3412;
}

Ссылки и кнопки в светлой теме станут тыквенно-оранжевыми. Для тёмной темы повторите блок с селектором [data-theme=dark] и более светлыми оттенками. Если подходит один из готовых цветов, проще подключить цветную сборку из прошлого урока.

Частая ошибка

Переопределить цвет кнопки свойством background-color в правиле button. Наведение, фокус и тёмная тема продолжат использовать переменные Pico, и кнопка будет менять цвет непредсказуемо. Меняйте переменные --pico-*, а не сами свойства — тогда все состояния останутся согласованными.