Customizing with CSS variables

Pico keeps all its sizes and colors in CSS variables (the custom properties from the tutorial) prefixed with --pico-. To change the site's look you do not edit Pico's file: you redefine the variables you need in your own stylesheet.

Where your styles go

Create a css/custom.css file next to index.html and link it after Pico:

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

Order matters: with equal specificity the rule declared later wins. In a Vite project you do the same with two import lines in src/main.js: Pico first, then your file.

Global variables

Variables on :root apply to the whole page. Let us make Anna's site softer, with a large corner radius:

<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="Your name">
<button>Subscribe</button>
<article>The card got rounder too.</article>

The field, the button and the card got a 1rem radius. In the preview the rule sits in <style>; in your project it goes into css/custom.css.

Variables for one element

You can redefine a variable in a regular selector too — then it applies only to that element and its descendants:

<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">Subscribe</button>
<button>Regular button</button>

The first button became pill-shaped, the second stayed the same. This is a handy way to restyle one component without touching the others.

The primary color

Pico defines colors separately for each theme, so you override them in the same selector Pico uses for the light theme:

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

Links and buttons in the light theme turn pumpkin orange. For the dark theme repeat the block with the [data-theme=dark] selector and lighter shades. If one of the ready colors suits you, linking a color build from the previous lesson is simpler.

Common mistake

Overriding the button color with background-color in a button rule. Hover, focus and the dark theme keep using Pico's variables, so the button changes color unpredictably. Change the --pico-* variables rather than the properties themselves — then all states stay consistent.