Customization

You can customize themes with SCSS or, you can edit the CSS variables.

Example: pick a color!

Custom theme

// Simplified example
:root {
  --primary: …;
}

There are 2 ways to customize your version of Pico CSS:

Overriding CSS variables

All Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of Pico.

/* Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary: …;
  --primary-hover: …;
  --primary-focus: …;
  --primary-inverse: …;
}

/* Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary: …;
    --primary-hover: …;
    --primary-focus: …;
    --primary-inverse: …;
  }
}

/* Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: …;
  --primary-hover: …;
  --primary-focus: …;
  --primary-inverse: …;
}

/* (Common styles) */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
}

You can find all the CSS variables used in the default theme here: css/themes/default.css

Importing Pico SASS library

We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.

Compile the SASS file to CSS to get a custom version of Pico.

/* Custom  version */

// Override default variables
$primary-500: …;
$primary-600: …;
$primary-700: …;

// Import Pico
@import "@picocss/pico/scss/pico";

Alternatively, you can create a custom theme and import it into your project with the components you need.

/* Custom version */

// Custom theme
@import "path/themes/custom";

// Import needed components
@import "@picocss/pico/scss/pico/layout/document";
@import "@picocss/pico/scss/pico/layout/sectioning";
…

Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you.