Using color schemes

[bburns]

First, thanks for a great library.

The docs are a bit unclear on how to use different colors - I added pico to my project with pnpm, but pico.colors.min.css is not included.

I wound up downloading the blue theme from jsDelivr at https://cdn.jsdelivr.net/npm/@picocss/[email protected]/css/pico.blue.min.css, and added it to a vendor folder manually.

Is there a better way to do this?

The main Pico stylesheet excludes color utilities.
There is a separate stylesheet with all the color utilities that you can link in the of your website.
<link rel="stylesheet" href="css/pico.colors.min.css">
Also available on jsDelivr CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.colors.min.css"

This stylesheet is almost the same size as the entire Pico library.
We do not recommend including all colors on a production site. You should include only the color families and shades that you use.
After linking the color utilities, you can style any element with the utility classes. Click on any color above to see details.

https://github.com/picocss/picocss.com/blob/main/app/routes/docs.colors.jsx

[vardumper]

I agree on things being a bit unclear - or rather complex.
If you use pico.css or pico.min.css as is you get a "blue" primary color by design. All other colors are included. (with their variables, classes for background, text, and so on).
If you want to use a different theme color (so that the primary button color and more changes), you already found a solution:

• referencing the precompiled pico.<color>.min.css.
• alternatively, the documentation section on SASS, has an additional example on how to change the theme color:

@use "pico" with (
  $theme-color: "purple"
);

• the advanced case, where you want to add new custom color(s) would require you to edit or extend the colors sass file. Then you would have to edit or extend a custom themes theme colors (like in the default theme) and finally use the new color in a themes' light and dark files.