PicoCSS

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" */
[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.

---

---

---