Mcoli UI - Theming

Overview

mcoli-ui ships with 5 signature themes designed to give your project a distinct visual identity. Each theme is crafted with MicroClub DNA, combining professional aesthetics with a bold, modern edge.

All themes support both light and dark modes out of the box.

Available Themes

Theme	Value	Description	Colors
Primary	`primary`	Clean, professional look with baby blue accents	`#0006B1`, `#E6E9FF`
Secondary	`secondary`	Creative and bold with purple tones	`#6A0DAD`, `#FDDDFF`
Game Dev	`game-dev`	Bold colors inspired by game development	`#D04F99`, `#FACC15`
Robotics	`robotics`	Technical feel with industrial blue tones	`#001EFF`, `#0006B1`
IT	`it`	Modern tech palette for software projects	`#34D399`, `#BEFFD4`

Add a Theme to Your Project

Deploy a theme directly to your project:

npx mcoli-ui@latest init

Interactive Mode

Running npx mcoli-ui@latest init without arguments launches an interactive theme selector.

Specify a Theme Directly

You can also specify a theme directly:

npx mcoli-ui@latest init primary

Available themes: primary, secondary, game-dev, robotics, it

Manual Setup

If you prefer manual control:

Choose a theme

Select from the available themes:

primary - Professional and modern
secondary - Creative and bold
game-dev - Fun and energetic
robotics - Technical and precise
it - Clean and professional

Copy the theme configuration

Each theme exports light and dark color palettes in:

src/registry/themes/{themeName}Theme.ts

For example, the Primary theme is located at:

src/registry/themes/primaryTheme.ts

Configure Tailwind CSS v4

Add the theme variables to your global CSS:

@theme {
  --color-primary: oklch(70% 0.15 240);
  --color-secondary: oklch(20% 0.15 240);
  /* ... other theme colors */
}

Theme Structure

Each theme follows this structure:

export const themeName = {
  // Border radius values
  theme: {
    "radius-sm": "0.25rem",
    "radius-md": "0.375rem",
    "radius-lg": "0.5rem",
    "radius-xl": "0.75rem",
    "radius-2xl": "0.75rem",
  },
  // Light mode colors
  light: {
    background: "...",
    foreground: "...",
    primary: "...",
    "primary-foreground": "...",
    // ... more colors
  },
  // Dark mode colors
  dark: {
    background: "...",
    foreground: "...",
    primary: "...",
    "primary-foreground": "...",
    // ... more colors
  },
};

Color System

All themes use a consistent color system:

Token	Usage
`background`	Page background
`foreground`	Primary text
`primary`	Main brand color
`secondary`	Secondary actions
`muted`	Subtle backgrounds
`accent`	Highlights
`destructive`	Error states
`success`	Positive feedback
`warning`	Caution states
`border`	Borders and dividers

Switching Themes

Since mcoli-ui components use CSS variables, you can switch themes by updating the token values in your global CSS or using the data-theme attribute.

// Apply a specific theme
<div data-theme="robotics">
  <McButton>Click me</McButton>
</div>

Customizing Themes

For advanced customization, you can extend or override any theme:

@theme {
  --color-primary: your-custom-color;
  --radius-lg: 1rem;
}

This gives you full control while maintaining consistency across your project.

Theming

On this page