Tailwind CSS Theming – Nira UI

How to Use Nira UI Themes

One of the most powerful features of Nira UI is its collection of built-in Tailwind CSS themes. With over 10 pre-made color schemes, you can instantly transform your website’s look and feel using a single attribute.

Whether you want a dark theme, light theme, or creative color palette, Nira UI makes theming effortless.

Enable a built-in theme

To enable a theme, simply add the data-theme attribute to your HTML element

<html data-theme="midnight"></html>

This applies the midnight theme globally to your page. You can switch themes anytime just change the value of data-theme.

List of themes

Here are the available built-in themes and their moods:

Try them:

🌞

Light

Fresh, open, and uplifting atmosphere.

🌙

Dark

Calm, focused, and easy on the eyes.

🌌

Midnight

Mysterious, quiet, and dreamlike mood.

🛡️

Steel

Strong, modern, and minimal feel.

⛈️

Storm

Intense, moody, and full of energy.

🌅

Sunset

Warm, soothing, and relaxing mood.

🌹

Rose

Romantic, soft, and graceful style.

🥇

Gold

Elegant, timeless, and luxurious feel.

🏢

Corporate

Professional, balanced, and reliable.

📼

Retro

Playful, nostalgic, and full of character.

🎧

Lofi

Relaxed, mellow, and cozy vibe.

🧸

Pastel

Gentle, playful, and comforting mood.

🧛

Dracula

Dark, dramatic, and mysterious atmosphere.

How to use a theme only for a section of a page?

You don’t have to apply a theme globally Nira UI supports section-based theming. This allows you to mix and preview different styles on one page.


<html data-theme="dark">
  

    This div will always use light theme
    This span will always use retro theme!
  

</html>

Perfect for documentation previews, dashboards, or multi-brand layouts.

Default theme variable reference

Every theme in Nira UI is built on CSS custom properties, which makes theming consistent and customizable. Here’s a sample of the default variables for Light and Dark themes:


/*-- Light --*/
--color-primary: #2fc6f8;
--color-secondary: #a835fa;
--color-success: #02ce57;
--color-danger: #f51d2f;
--color-warning: #fabf2b;
--color-base-content: oklch(21% 0.006 285.885);
--color-base-content-100: oklch(30% 0.006 285.885);
--color-base-content-200: oklch(39% 0.006 285.885);
--color-base-content-300: oklch(48% 0.006 285.885);
--color-base-100: oklch(100% 0.00011 271.152);
--color-base-200: oklch(95% 0.00011 271.152);
--color-base-300: oklch(83% 0.00011 271.152);
--color-base-400: oklch(80% 0.00011 271.152);

/*-- Dark --*/
--color-primary: #00bcff;
--color-secondary: #9810fa;
--color-success: #00a63e;
--color-danger: #e7000b;
--color-warning: #f0b100;
--color-base-content: oklch(100% 0.00011 271.152);
--color-base-content-100: oklch(91% 0.00011 271.152);
--color-base-content-200: oklch(82% 0.00011 271.152);
--color-base-content-300: oklch(73% 0.00011 271.152);
--color-base-100: oklch(15% 0 0);
--color-base-200: oklch(23% 0 0);
--color-base-300: oklch(29% 0 0);
--color-base-400: oklch(35% 0 0);

/* ...rest of themes are similar light and dark but different colors */

You can use these variables directly in your own CSS for custom Tailwind themes or overrides.

Base colors

Background Colors

primary

secondary

success

warning

danger

Text Colors

Text Primary

Text Secondary

Text Success

Text Warning

Text Danger

Base Background

background base 100

background base 200

background base 300

background base 400

Content Colors

Text base content

Text base content 100

Text base content 200

Text base content 300

Create Your Own Tailwind CSS Theme

Nira UI themes are fully customizable. To create your own theme, define your custom variables and apply them with a data-theme name:


[data-theme="mytheme"] {
--color-primary: oklch(72.895% 0.13049 86.648);
--color-secondary: #2E004F;
--color-accent: #E8C66A;
--color-success: #3AA76D;
--color-danger: #B3261E;
--color-warning: #F6C851;
--color-base-content: oklch(21% 0.13049 86.648);
--color-base-content-100: oklch(30% 0.13049 86.648);
--color-base-content-200: oklch(39% 0.13049 86.648);
--color-base-content-300: oklch(48% 0.13049 86.648);
--color-base-100: oklch(100% 0.13049 86.648);
--color-base-200: oklch(95% 0.13049 86.648);
--color-base-300: oklch(83% 0.13049 86.648);
--color-base-400: oklch(80% 0.13049 86.648);
}

Then use it in your HTML:

<html data-theme="mytheme"></html>

Or on any Nira UI Components

My Theme

Calm, focused, and easy on the eyes. Great for dashboards and coding tools.




  
My Theme


Calm, focused, and easy on the eyes. Great for dashboards and coding tools.

Nira UI Theme Showcase

Explore all the built-in Nira UI themes and see how they transform components instantly. Each theme is responsive, accessible, and powered by Tailwind CSS utility classes.

🌞 Light Theme

Fresh, open, and uplifting. Perfect for clean, minimal designs.

🌙 Dark Theme

Calm, focused, and easy on the eyes. Great for dashboards and coding tools.

🌌 Midnight Theme

Mysterious, quiet, and immersive.

🛡️ Steel Theme

Strong, minimal, and professional.

⛈️ Storm Theme

Dramatic and full of energy.

🌅 Sunset Theme

Warm, soft, and relaxing.

🌹 Rose Theme

Romantic, elegant, and graceful.

🥇 Gold Theme

Luxurious, premium, and timeless.

🏢 Corporate Theme

Balanced, trustworthy, and business-ready.

📼 Retro Theme

Fun, nostalgic, and playful.

🎧 Lofi Theme

Relaxed, cozy, and minimal.

🧸 Pastel Theme

Soft, cheerful, and comforting.

🎨 Try Nira UI Themes in Your Project

Step 1: Install Nira UI:

npm i nira-ui

Add it as a Tailwind CSS plugin

@import "tailwindcss";
@plugin "nira-ui/plugin.js";

Step 3: Set your theme in HTML:

 <html data-theme="dark"></html>

Now your entire project adapts instantly to the selected theme!