Accessible Themeable Pure CSS Framework – µCSS

Category: CSS & CSS3 , Frameworks | March 21, 2026
0 Comment
AuthorDigicreon
Last UpdateMarch 21, 2026
LicenseMIT
Tags
Views45 views
OfficialGo to website
Live DemoDownload
Accessible Themeable Pure CSS Framework – µCSS

µCSS is a lightweight, themeable CSS framework that styles semantic HTML elements directly from a single CSS file. Built on top of the PicoCSS CSS framework.

It currently includes 18 UI components, a 12-column responsive grid, and 20 pre-built color themes on top of Pico’s typographic base.

Features:

  • No JavaScript required
  • 20 color themes. Each theme maps primary, secondary, tertiary, contrast, accent, success, info, warning, error, pop, and spark to a consistent PicoCSS color family.
  • 18 UI components: Accordion, alert, badge, breadcrumb, button, card, forms, hero, modal, nav, pagination, progress, skeleton, spinner, table, toast, tabs, and more.
  • Six breakpoints (default, sm, md, lg, xl, xxl) with offset, column ordering, and display utility classes.
  • Automatic detection via prefers-color-scheme or manual control via data-theme on <html>.
  • Generate all 20 theme files from source with a single PHP command.

How to use it:

1. Install & download.

# NPM
$ npm install @digicreon/mucss

2. Load the core stylesheet in your HTML document. All available themes:

  • Azure
  • Red
  • Pink
  • Fuchsia
  • Purple
  • Violet
  • Indigo
  • Blue
  • Cyan
  • Jade
  • Green
  • Lime
  • Yellow
  • Amber
  • Pumpkin
  • Orange
  • Sand
  • Grey
  • Zinc
  • Slate
<!-- Default Theme -->
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Fwww.cssscript.com%2Fdist%2Fmu.css">
<!-- Or a specific Theme -->
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Fwww.cssscript.com%2Fdist%2Fmu.azure.css">
<!-- Or from a CDN -->
<link rel="stylesheet" href="/?originalUrl=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2F%40digicreon%2Fmucss%2Fdist%2Fmu.css">

3. Set the data-theme attribute on the <html> element to control the color scheme.

<!-- Follow the OS color scheme preference -->
<html lang="en">
<!-- Lock the page to light mode regardless of OS setting -->
<html lang="en" data-theme="light">
<!-- Lock the page to dark mode regardless of OS setting -->
<html lang="en" data-theme="dark">

Toggle dark mode at runtime with a minimal JavaScript snippet:

// Read the current theme state from the root <html> element
const root = document.documentElement;
const current = root.getAttribute('data-theme');
// Flip between light and dark on each button press
root.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');

4. Start building your HTML page. Refer to the official documentation for all component usages.

Changelog:

v1.4.3 (03/21/2026)

  • Fix tooltip overflow on long text
  • Add .clickable utility class (cursor: pointer for JS-interactive elements).
  • Fix heading color and margin in colored containers and nav.
  • Fix input-sm/input-lg not affecting field height

See Also:

You Might Be Interested In:

Leave a Reply