Nuda Kit uses a CSS variable-based theming system that integrates with Tailwind CSS and shadcn/vue. This gives you full control over colors while maintaining consistency across all components.
The theme is defined in frontend/app/assets/css/tailwind.css using CSS custom properties (variables). These variables are mapped to Tailwind utility classes, so you can use them throughout your application.
CSS Variables (--primary, --background, etc.)
↓
Tailwind Theme (@theme inline)
↓
Utility Classes (bg-primary, text-muted-foreground, etc.)
The theme uses semantic color names rather than specific colors:
| Variable | Purpose |
|---|---|
background | Page background |
foreground | Default text color |
card | Card backgrounds |
card-foreground | Card text |
primary | Primary buttons, links |
primary-foreground | Text on primary backgrounds |
secondary | Secondary buttons |
secondary-foreground | Text on secondary backgrounds |
muted | Muted backgrounds |
muted-foreground | Muted text, placeholders |
accent | Accent highlights |
accent-foreground | Text on accent backgrounds |
destructive | Error states, delete buttons |
border | Border colors |
input | Input borders |
ring | Focus rings |
Use Tailwind utilities with these semantic names:
<template>
<!-- Backgrounds -->
<div class="bg-background">...</div>
<div class="bg-primary">...</div>
<div class="bg-muted">...</div>
<!-- Text -->
<p class="text-foreground">Default text</p>
<p class="text-muted-foreground">Muted text</p>
<p class="text-primary">Primary text</p>
<!-- Borders -->
<div class="border border-border">...</div>
<input class="border-input">...</input>
</template>
Nuda Kit includes full dark mode support using @nuxtjs/color-mode.
:root.darkdark class on <html>The color mode respects the user's system preference by default, but can be toggled manually. Users' preferences are persisted in a cookie.
For conditional styling based on theme:
<script setup lang="ts">
const colorMode = useColorMode()
</script>
<template>
<!-- Show different content based on theme -->
<div v-if="colorMode.preference === 'dark'">Dark mode content</div>
<div v-else>Light mode content</div>
</template>
To create a theme toggle button:
<script setup lang="ts">
const colorMode = useColorMode()
const toggleTheme = () => {
colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
}
</script>
<template>
<Button @click="toggleTheme">
Toggle Theme
</Button>
</template>
The easiest way to customize your theme is using the shadcn/vue Theme Builder:
Go to shadcn-vue.com/themes.
Choose from pre-built themes: Default, Red, Rose, Orange, Green, Blue, Yellow, or Violet.
Click "Copy Code" to copy the CSS variables.
Replace the :root and .dark sections in frontend/app/assets/css/tailwind.css.
To manually customize colors, edit the CSS variables in tailwind.css:
:root {
--primary: oklch(0.6 0.2 250); /* Your primary color */
--primary-foreground: oklch(1 0 0); /* Text on primary */
/* ... other variables */
}
.dark {
--primary: oklch(0.7 0.2 250); /* Primary in dark mode */
--primary-foreground: oklch(0.1 0 0); /* Text on primary (dark) */
/* ... other variables */
}
Nuda Kit uses OKLCH color format for better perceptual uniformity:
oklch(lightness chroma hue)
Throughout the landing page, Nuda Kit uses a purple-to-pink gradient for emphasis:
<span class="bg-linear-to-r from-purple-600 dark:from-purple-400
to-pink-500 dark:to-pink-400
bg-clip-text text-transparent">
Highlighted text
</span>
To change the brand gradient, search for from-purple and to-pink in your components and replace with your brand colors.
The theme includes a global border radius variable:
:root {
--radius: 0.625rem; /* 10px */
}
Components use calculated variants:
| Variable | Calculation | Use Case |
|---|---|---|
--radius-sm | radius - 4px | Small elements |
--radius-md | radius - 2px | Medium elements |
--radius-lg | radius | Default |
--radius-xl | radius + 4px | Large elements |
Adjust --radius to make your UI more rounded or more square.
Five chart colors are defined for data visualization:
:root {
--chart-1: oklch(0.646 0.222 41.116); /* Orange */
--chart-2: oklch(0.6 0.118 184.704); /* Teal */
--chart-3: oklch(0.398 0.07 227.392); /* Blue */
--chart-4: oklch(0.828 0.189 84.429); /* Yellow */
--chart-5: oklch(0.769 0.188 70.08); /* Gold */
}
Use with the chart components:
<div class="bg-chart-1">...</div>
<div class="text-chart-2">...</div>
The sidebar has its own color variables for independent theming:
| Variable | Purpose |
|---|---|
sidebar | Sidebar background |
sidebar-foreground | Sidebar text |
sidebar-primary | Active item background |
sidebar-primary-foreground | Active item text |
sidebar-accent | Hover states |
sidebar-border | Sidebar borders |