Theming

Customize the look and feel of your application using Plume's semantic design system and Tailwind CSS v4.

Global Style Overrides (CSS Variables)

The most efficient way to customize the entire library is by overriding the CSS variables in your project's @theme block. This allows you to change the "skin" of every component instantly.

blade 
@theme {
/* Change the primary brand color to Indigo */
--color-primary-50: oklch(96% 0.02 264);
--color-primary-500: oklch(58% 0.23 268);
--color-primary-600: oklch(51% 0.23 268);
--color-primary-950: oklch(18% 0.07 268);

/* Update border radius globally */
--radius-md: 0px;
--radius-xl: 4px;
}

Color Palette

Explore all available semantic color scales.

Dark Mode

Detailed implementation of the dark theme.

Component-Level Customization

Attribute Merging

All Plume components correctly merge a provided class attribute with their internal defaults. This allows you to add one-off styling without creating new components.

blade 
<x-plume::button class="shadow-xl ring-4 ring-primary/20">
    Elevated Button
</x-plume::button>

Arbitrary Values

For properties not explicitly exposed as props, you can use Tailwind's arbitrary value syntax:

blade 
<x-plume::carousel class="[scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
    ...
</x-plume::carousel>

Dark Mode

Plume components automatically support dark mode via the .dark class on the root element. The library includes a page Alpine component that manages theme persistence and respects system preferences.

Toggling Themes

The page component provides a toggleColorMode() method for easy switching:

blade 
<button @click="toggleColorMode()">
    <span x-show="!darkMode">Switch to Dark</span>
    <span x-show="darkMode">Switch to Light</span>
</button>

Customizing Dark Styles

To customize the dark theme colors, redefine your variables within a .dark selector in your project's CSS:

css 
.dark {
  --color-background: var(--color-background-950);
  --color-foreground: var(--color-background-50);
}

Wrapper Components

If you find yourself applying the same overrides repeatedly, creating a local wrapper component is the recommended approach:

blade 
<x-plume::button {{ $attributes->merge(['class' => 'font-bold tracking-widest uppercase']) }}
    style="outline" shape="pill">
    {{ $slot }}
</x-plume::button>