MeldUI

Theming

Customize MeldUI's appearance using CSS variables with OKLCH colors and Tailwind CSS v4.

Theme Structure

MeldUI themes define two layers of CSS variables:

  1. Base variables (:root / .dark) — raw OKLCH color values
  2. Tailwind theme variables (@theme inline) — map base variables to Tailwind utilities
/* Base variables */
:root {
  --primary: oklch(0.208 0.042 265.755);
  --primary-foreground: oklch(0.984 0.003 247.858);
}

/* Tailwind integration */
@theme inline {
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
}

This means you can use bg-primary, text-primary-foreground, etc. in your Tailwind classes.

Customizing Colors

Override base variables in your CSS after importing the theme:

@import 'tailwindcss';
@import 'tw-animate-css';
@import '@meldui/vue/themes/default';

/* Your overrides */
:root {
  --primary: oklch(0.6 0.2 280); /* Purple */
  --primary-foreground: oklch(1 0 0); /* White */
  --radius: 0.5rem; /* Rounder corners */
}

.dark {
  --primary: oklch(0.7 0.2 280); /* Lighter purple for dark mode */
}

OKLCH Color Format

MeldUI uses OKLCH colors for better perceptual uniformity:

/* OKLCH: Lightness, Chroma, Hue */
--primary: oklch(0.6 0.2 260);
/*              ^    ^    ^
                |    |    └── Hue (0-360)
                |    └─────── Chroma (0-0.4)
                └──────────── Lightness (0-1)
*/

Benefits of OKLCH:

  • Consistent perceived brightness across hues
  • Better color manipulation than HSL
  • Modern CSS standard supported in all modern browsers

Available Variables

Colors

VariableDescription
--backgroundPage background
--foregroundDefault text color
--primaryPrimary brand color
--primary-foregroundText on primary
--secondarySecondary actions
--secondary-foregroundText on secondary
--mutedSubtle backgrounds
--muted-foregroundSubtle text
--accentAccent/highlight
--accent-foregroundText on accent
--destructiveError/danger states
--successSuccess states
--warningWarning states
--infoInfo states
--neutralNeutral/gray states

UI Elements

VariableDescription
--cardCard background
--card-foregroundCard text
--popoverPopover/dropdown background
--popover-foregroundPopover text
--borderBorder color
--inputInput border
--ringFocus ring

Chart Colors

VariableDescription
--chart-1First chart series color
--chart-2Second chart series color
--chart-3Third chart series color
--chart-4Fourth chart series color
--chart-5Fifth chart series color
VariableDescription
--sidebarSidebar background
--sidebar-foregroundSidebar text
--sidebar-primarySidebar primary color
--sidebar-primary-foregroundText on sidebar primary
--sidebar-accentSidebar accent/hover
--sidebar-accent-foregroundText on sidebar accent
--sidebar-borderSidebar border color
--sidebar-ringSidebar focus ring

Border Radius

VariableDefault
--radius0.625rem (base)
--radius-smcalc(var(--radius) - 4px)
--radius-mdcalc(var(--radius) - 2px)
--radius-lgvar(--radius)
--radius-xlcalc(var(--radius) + 4px)

Creating Custom Themes

Create a new theme file:

/* themes/ocean.css */
@custom-variant dark (&:is(.dark *));

@theme inline {
  /* ... same structure as default theme ... */
}

:root {
  --primary: oklch(0.55 0.15 220); /* Ocean blue */
  --background: oklch(0.98 0.01 220); /* Slight blue tint */
  /* ... other overrides ... */
}

.dark {
  --primary: oklch(0.65 0.15 220);
  --background: oklch(0.15 0.02 220);
}

Then import it instead of the default:

@import 'tailwindcss';
@import 'tw-animate-css';
@import './themes/ocean.css';

Icon Colors

Icons use currentColor and inherit from the parent’s text color:

<template>
  <!-- Icon inherits red color -->
  <span class="text-red-500">
    <IconX />
  </span>

  <!-- Or directly on the icon -->
  <IconCheck class="text-green-500" />
</template>
InstallationDark Mode