Feature Request: Dynamic Theme Color API via CSS Variables or JavaScript

[mdahamshi]

Hey
Currently, changing the theme color in PicoCSS requires swapping out entire precompiled CSS files (e.g., pico.jade.min.css, pico.blue.min.css, etc.). This makes it difficult to change themes dynamically via JavaScript.

What I’m trying to do:
I'm building a feature that randomly selects a Pico theme color on page load. I wrote this function:

export function getTheme(color) {
  const picoColors = [
    'red', 'pink', 'fuchsia', 'purple', 'violet', 'indigo',
    'blue', 'cyan', 'jade', 'green', 'lime', 'yellow',
    'amber', 'pumpkin', 'orange', 'sand', 'grey', 'zinc', 'slate'
  ];
  return getRandomColor(picoColors); // selects a random color
}

Then in the HTML:

<link
  id="pico-theme"
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.<%= themeColor %>.min.css"
/>

This works, but it requires loading a new CSS file per color, which is inefficient and harder to manage dynamically in client-side JS.

Suggestion:
It would be great if PicoCSS supported:

• A base stylesheet (pico.base.css)
• Then we could dynamically set a color scheme using CSS variables or a JS API (e.g., setPrimaryColor('#007bff'))
• Or even provide a compiled version where color classes are CSS variables that can be updated at runtime.

Benefits:

• Smaller CSS footprint
• Easier dynamic theming
• Better developer experience
• No need to predefine all color variants or reload stylesheets

Thanks for the great work! PicoCSS is beautifully simple and clean. This feature would make it even more flexible for dynamic and JS-heavy apps.

[boustanihani]

An algorithm similar to this would be great:

https://www.npmjs.com/package/material-dynamic-colors