I’ve been using PicoCSS on a couple small projects. I (mostly) really like it!

What I Like:

  • Easy to add to a project.
  • Makes things look nice out of the box, without adding a bunch of classes.

What I Don’t Like:

  • Hard to customize colors.
    • Because of how it handles automatic dark mode, colors are defined in 2 places for light mode and dark mode. Overriding the colors is not trivial and not obvious. Maybe I’m missing something.
/* Pink Light scheme (Default) */
/* Can be forced with data-theme="light" */
:root:not([data-theme="dark"]) {
  --primary: #d81b60;
  --primary-hover: #c2185b;
  --primary-focus: rgba(216, 27, 96, 0.125);
  --primary-inverse: #FFF;

/* Pink Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --primary: #d81b60;
    --primary-hover: #e91e63;
    --primary-focus: rgba(216, 27, 96, 0.25);
    --primary-inverse: #FFF;

Anyway, it’s a nice thing to add to get going on small, quick projects. I like having some nice-ish styles from the get-go so I get less distracted from trying to make things look passably nice before I work on actual functionality.

June 5, 2023