Theming

Overview

mcoli-ui ships with 5 signature themes designed to give your project a distinct visual identity. Each theme is crafted with Micro Club 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	Light Primary	Dark Primary
Primary	`primary`	Deep blue, professional and modern	`#0006B1`	`#D9DDFF`
Secondary	`secondary`	Purple, creative and bold	`#6A0DAD`	`#8B5CF6`
Game Dev	`game-dev`	Pink with yellow accents, fun and energetic	`#D04F99`	`#FBE2A7`
Robotics	`robotics`	Electric blue with tighter corners, technical	`#001EFF`	`#2563EF`
IT	`it`	Green, clean and professional for tech applications	`#34D399`	`#34D399`

Add a Theme to Your Project

Deploy a theme directly to your project:

npx mcoli-ui@latest init

pnpm dlx mcoli-ui@latest init

yarn dlx mcoli-ui@latest init

bunx 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

pnpm dlx mcoli-ui@latest init primary

yarn dlx mcoli-ui@latest init primary

bunx mcoli-ui@latest init primary

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

Manual Setup

If you prefer manual control:

Choose a theme

Pick one of primary, secondary, game-dev, robotics or it.

Add it with shadcn

Each theme is published as a shadcn registry item. This is the command init runs for you:

npx shadcn@latest add https://mcoli-ui.microclub.info/r/primary.json

Or copy the values yourself

The light and dark palettes are defined in the mcoli-ui repository under packages/web/registry/themes (primaryTheme.ts, secondaryTheme.ts, gameDevTheme.ts, roboticsTheme.ts, itTheme.ts). Define each color as a CSS variable for light and dark mode, then map it to a Tailwind color:

@theme inline {
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  /* ... one mapping per token */
}

:root {
  --primary: #0006b1;
  --primary-foreground: #ffffff;
}

.dark {
  --primary: #d9ddff;
  --primary-foreground: #000350;
}

Theme Structure

Each theme follows this structure:

export const themeName = {
  // Border radius values (vary by theme)
  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
  },
};

Border radius values differ between themes. Robotics uses tighter radii (0.125rem for sm and md, 0.25rem above), while Game Dev uses a larger radius-2xl (1rem).

Color System

All themes use a consistent color system. Here are all the available CSS variables you can use in your components. Each theme has its own values for light and dark modes.

Token	Usage
`--background`	Page background
`--foreground`	Primary text
`--primary`	Main brand color
`--primary-foreground`	Text on primary
`--secondary`	Secondary actions
`--secondary-foreground`	Text on secondary
`--accent`	Highlights
`--accent-foreground`	Text on accent
`--card`	Card background
`--card-foreground`	Card text
`--popover`	Popover background
`--popover-foreground`	Popover text
`--muted`	Muted backgrounds
`--muted-foreground`	Muted text
`--destructive`	Error states
`--destructive-foreground`	Text on destructive
`--border`	Borders
`--input`	Input backgrounds
`--ring`	Focus ring
`--surface`	Surface backgrounds
`--surface-foreground`	Surface text
`--success`	Success states
`--success-foreground`	Text on success
`--warning`	Warning states
`--warning-foreground`	Text on warning
`--error`	Error states
`--error-foreground`	Text on error
`--info`	Info states
`--info-foreground`	Text on info

Sidebar-specific variables for navigation components:

Token	Usage
`--sidebar`	Sidebar background
`--sidebar-foreground`	Sidebar text
`--sidebar-primary`	Sidebar brand color
`--sidebar-primary-foreground`	Text on sidebar primary
`--sidebar-accent`	Sidebar accent
`--sidebar-accent-foreground`	Text on sidebar accent
`--sidebar-border`	Sidebar borders
`--sidebar-ring`	Sidebar focus ring

Chart Colors

Colors for data visualization:

Token
`--chart-1`
`--chart-2`
`--chart-3`
`--chart-4`
`--chart-5`

Using Colors in Components

In your Tailwind classes, use these tokens as follows:

className = 'text-muted-foreground'; // Uses --muted-foreground
className = 'bg-primary'; // Uses --primary
className = 'border-border'; // Uses --border
className = 'text-destructive'; // Uses --destructive

All colors are available as bg-, text-, border-, and other Tailwind utilities.

Switching Themes

mcoli-ui components use CSS variables tied to theme tokens. To switch themes, re-run the init command with your desired theme:

npx mcoli-ui@latest init secondary

pnpm dlx mcoli-ui@latest init secondary

yarn dlx mcoli-ui@latest init secondary

bunx mcoli-ui@latest init secondary

This replaces the theme's CSS variables in your global CSS with the new theme's values.

Customizing Themes

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

@theme inline {
  --color-primary: var(--primary);
  --radius-lg: 1rem;
}

:root {
  --primary: your-custom-color;
}

.dark {
  --primary: your-custom-color;
}

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