Tailwind CSS Theming – NiraUI
How to Use NiraUI Themes
One of the most powerful features of NiraUI is its built-in theming system.
With more than a dozen ready-to-use themes, you can instantly change your website’s entire look from bright and modern to dark and dramatic using a single attribute.
Whether you’re building a dashboard, a portfolio, or a SaaS product, NiraUI makes theming effortless.
Enable a built-in theme
To activate a theme, simply add the data-theme attribute to your HTML element:
<html data-theme="midnight"></html>
This applies the Midnight theme across your whole site.
Want to switch? Just change the value of data-theme no rebuilds required.
Built-In Themes
NiraUI includes a wide selection of professionally balanced color palettes, each with its own mood and tone.
Try them:
Light
Fresh, clean, and uplifting
Dark
Calm, focused, and easy on the eyes.
Midnight
Dreamy and immersive
Steel
Modern, strong, and minimal
Storm
Bold, intense, and energetic
Sunset
Warm and relaxing
Rose
Soft, elegant, and romantic
Gold
Elegant, timeless, and luxurious feel.
Corporate
Professional and balanced.
Retro
Playful, nostalgic, and full of character.
Lofi
Cozy and chill.
Pastel
Gentle and cheerful.
Dracula
Dark and dramatic.
How to use a theme only for a section of a page?
You’re not limited to global themes you can apply themes to specific sections of a page.
Perfect for dashboards, documentation, or showcasing multiple brands.
<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
Each theme is powered by CSS custom properties (variables), so customization stays consistent and scalable.
Here’s a preview of the Light and Dark theme color variables:
/*-- 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 deeper customization or to create a custom Tailwind configuration.
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 NiraUI Theme
Want to make something completely yours?:
You can define your own color palette and assign it a custom 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 activate it in your HTML:
<html data-theme="mytheme"></html>
Or apply it directly to a specific component:
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.
🎨 Try NiraUI Themes in Your Project
Step 1: Install NiraUI:
npm i nira-uiAdd it as a Tailwind CSS plugin
@import "tailwindcss";
@plugin "nira-ui/plugin.js";Step 3: Apply your desired theme
<html data-theme="dark"></html>That’s it! Your project instantly adapts to your selected color scheme.
✨ NiraUI:Tailwind Theming Made Effortless
Switch between light, dark, or any custom theme in seconds.
Build fast, stay consistent, and make your UI shine with NiraUI.