Тёмная тема и цветовые варианты

Pico поставляется с двумя темами — светлой и тёмной — и по умолчанию выбирает между ними сам, по настройке системы посетителя. Тема здесь — набор цветов фона, текста, рамок и карточек. Кроме того, у Pico есть готовые сборки с разным основным цветом.

Автоматический выбор и data-theme

Без дополнительных настроек Pico следит за медиазапросом prefers-color-scheme из учебника: если в системе включён тёмный режим, страница тоже тёмная. Чтобы закрепить одну тему, поставьте атрибут data-theme на тег <html> в index.html:

<!DOCTYPE html>
<html lang="ru" data-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Блог Анны</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  </head>
  <body>
    <main class="container">
      <h1>Блог Анны</h1>
    </main>
  </body>
</html>

Откройте файл: страница тёмная при любой настройке системы. Значение light закрепляет светлую тему, а без атрибута снова работает автоматический выбор.

Переключатель темы

Тему можно менять из скрипта, переписывая data-theme у document.documentElement — это и есть тег <html>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<style>
  body { background: var(--pico-background-color); color: var(--pico-color); }
</style>
 
<button id="theme-toggle" class="contrast">Тёмная тема</button>
<article>
  <h4>Сетка без медиазапросов</h4>
  <p>Как auto-fit и minmax подбирают число колонок.</p>
</article>
 
<script>
  const root = document.documentElement;
  const toggle = document.querySelector('#theme-toggle');
  root.dataset.theme = 'light';
  toggle.addEventListener('click', () => {
    const isDark = root.dataset.theme === 'dark';
    root.dataset.theme = isDark ? 'light' : 'dark';
    toggle.textContent = isDark ? 'Тёмная тема' : 'Светлая тема';
    console.log('Тема:', root.dataset.theme);
  });
</script>

Нажмите кнопку: фон, текст, карточка и сама кнопка перекрасятся, а под примером появится название темы. Правило для body в <style> нужно только окну превью, которое само красит <body> в белый; в вашем файле его можно не писать. Чтобы выбор не сбрасывался при перезагрузке, сохраните его в localStorage и читайте при открытии страницы.

Цветовые варианты

Основной цвет — кнопки, ссылки, рамка фокуса — меняется подключением другой сборки. Имя файла: pico. + цвет + .min.css.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.violet.min.css">
 
<p>Свежая запись: <a href="#">Формы без боли</a></p>
<button>Подписаться</button>
<button class="outline">Архив</button>

Ссылка и кнопки стали фиолетовыми, остальное оформление не изменилось. Голубой цвет по умолчанию называется azure и живёт в обычном pico.min.css.

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

Подключить сразу две сборки — например, pico.min.css и pico.violet.min.css — в надежде добавить цвет к основной. Каждая сборка содержит Pico целиком, и вторая полностью перекрывает первую, удваивая объём CSS. Подключайте ровно один файл Pico.