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.