Theming Guide

Learn how to customize and apply themes in amvasdev-ui. Built on DaisyUI's theming system, you can easily switch between pre-built themes or create your own custom themes.

Try Different Themes

Click on any theme below to see it applied to this page:

Current Theme: light

light
dark
cupcake
emerald
dracula
winter
night
halloween
autumn
business
nord
dim
lemonade
sunset
valentine

Using the useThemeChange Hook

The easiest way to implement theme switching in your application:

import { useThemeChange, ColorPalette } from "amvasdev-ui";
  import { useState } from "react";

  function ThemeSwitcher() {
    const { changeTheme } = useThemeChange();
    const [currentTheme, setCurrentTheme] = useState("light");

    const handleThemeChange = (theme) => {
      changeTheme(theme);
      setCurrentTheme(theme);
    };

    const themes = ["light", "dark", "cupcake", "emerald"];

    return (
      <div>
        {themes.map((theme) => (
          <ColorPalette
            key={theme}
            theme={theme}
            isSelected={currentTheme === theme}
            onClick={() => handleThemeChange(theme)}
            className="cursor-pointer"
          />
        ))}
      </div>
    );
  }

Available Themes

amvasdev-ui supports all DaisyUI built-in themes:

light

Clean and bright theme

dark

Dark mode for low-light environments

cupcake

Soft pastel colors

emerald

Professional green theme

dracula

Dark theme with vibrant colors

winter

Cool blue-tinted theme

night

Deep dark theme

halloween

Orange and purple spooky theme

autumn

Warm earthy tones

business

Professional corporate theme

nord

Arctic inspired color palette

dim

Dimmed dark theme

lemonade

Fresh yellow theme

sunset

Warm sunset colors

valentine

Pink romantic theme

Color System

All themes follow a consistent color system with semantic color names:

Color NameDescriptionExample
base-100Primary background color
base-200Secondary background color
base-300Tertiary background color
base-contentForeground content color
primaryPrimary brand color
secondarySecondary brand color
accentAccent color for highlights
neutralNeutral color for UI elements
infoInformational messages
successSuccess states
warningWarning states
errorError states

Manual Theme Configuration

If you prefer to set up themes without the hook, you can configure them directly:

1. Configure tailwind.config.js

/** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./app/**/*.{js,ts,jsx,tsx,mdx}",
      "./components/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    plugins: [require("daisyui")],
    daisyui: {
      themes: ["light", "dark", "cupcake", "emerald", "dracula"],
      // Or include all themes:
      // themes: true,
    },
  };

2. Set Theme on HTML Element

// In your root layout or _document.tsx
  <html lang="en" data-theme="light">
    <body>{children}</body>
  </html>

  // Or dynamically change theme:
  document.documentElement.setAttribute("data-theme", "dark");

Creating Custom Themes

You can create your own custom themes by defining CSS variables:

// tailwind.config.js
  module.exports = {
    daisyui: {
      themes: [
        {
          mytheme: {
            primary: "#570df8",
            secondary: "#f000b8",
            accent: "#37cdbe",
            neutral: "#3d4451",
            "base-100": "#ffffff",
            info: "#3abff8",
            success: "#36d399",
            warning: "#fbbd23",
            error: "#f87272",
          },
        },
      ],
    },
  };

Component Variant System

All components support consistent color variants that automatically adapt to the active theme:

Dark Mode Support

Implement automatic dark mode based on system preferences:

// Detect system preference
  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    changeTheme("dark");
  } else {
    changeTheme("light");
  }

  // Listen for changes
  window
    .matchMedia("(prefers-color-scheme: dark)")
    .addEventListener("change", (e) => {
      changeTheme(e.matches ? "dark" : "light");
    });

Best Practices

Use Semantic Color Names

Always use semantic color names (primary, success, error) instead of specific color values. This ensures your UI adapts correctly to different themes.

Persist User Preferences

Store the user's theme choice in localStorage so it persists across sessions.

Test with Multiple Themes

Test your application with both light and dark themes to ensure proper contrast and readability.

Provide a Theme Toggle

Give users an easy way to switch between themes, preferably in an accessible location like the header or settings menu.

Related Resources

useThemeChange Hook

Learn about the hook for programmatic theme switching.

ColorPalette Component

Display theme previews with the ColorPalette component.

DaisyUI Themes

Official DaisyUI documentation for themes and customization.