Installation

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
 
export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

Add the following code in `global.css` file

@import 'tailwindcss';
 
@custom-variant dark (&:is(.dark *));
 
@layer base {
    body {
        background-color: hsl(var(--primary-background));
        color: hsl(var(--primary-foreground));
    }
 
    .dark body {
        background-color: hsl(var(--primary-background));
        color: hsl(var(--primary-foreground));
    }
}
 
@theme {
    --color-primary-background: hsl(var(--primary-background));
    --color-secondary-background: hsl(var(--secondary-background));
 
    --color-primary-foreground: hsl(var(--primary-foreground));
    --color-secondary-foreground: hsl(var(--secondary-foreground));
 
    --color-muted-background: hsl(var(--muted-background));
    --color-muted-foreground: hsl(var(--muted-foreground));
 
    --color-destructive-background: hsl(var(--destructive-background));
}
 
@layer base {
    :root {
        --primary-background: 33, 100%, 98%;
        --secondary-background: 228, 18%, 5%;
 
        --muted-background: 50, 22%, 89%;
        --muted-foreground: 216, 12%, 84%;
 
        --primary-foreground: 240, 10%, 4%;
        --secondary-foreground: 240, 5%, 26%;
 
        --destructive-background: 0 100% 50%;
    }
 
    .dark {
        --primary-background: 228, 18%, 5%;
        --secondary-background: 33, 100%, 98%;
 
        --muted-background: 255, 7%, 12%;
        --muted-foreground: 210, 18%, 22%;
 
        --primary-foreground: 0, 0%, 100%;
        --secondary-foreground: 0, 0%, 63%;
 
        --destructive-background: 0 63% 31%;
    }
}

Copy the source code

components/ui/theme-toggler.tsx

'use client';

import { cn } from '@/lib/utils';
import { useState, useEffect } from 'react';

export default function ThemeToggler({
    className,
    iconsClassName,
}: {
    className?: string;
    iconsClassName?: string;
}) {
    useEffect(() => {
        if (localStorage.getItem('theme') === 'dark') {
            document.documentElement.classList.add('dark');
            setIsDark(true);
        }
    });

    const [isDark, setIsDark] = useState(false);

    const toggleTheme = () => {
        if (isDark) {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('theme', 'light');
        } else {
            document.documentElement.classList.add('dark');
            localStorage.setItem('theme', 'dark');
        }
        setIsDark((prev) => !prev);
    };

    return (
        <>
            <button
                className={cn(
                    'border-muted-background h-8 w-8 cursor-pointer rounded-xl border-[1.5px]',
                    className
                )}
                onClick={toggleTheme}
            >
                <div
                    className={cn(
                        'text-secondary-foreground hover:text-primary-foreground transition-all duration-200 ease-in-out hover:-rotate-20',
                        iconsClassName
                    )}
                >
                    {isDark ? (
                        <i className="ri-sun-fill text-xl"></i>
                    ) : (
                        <i className="ri-moon-clear-fill text-xl"></i>
                    )}
                </div>
            </button>
        </>
    );
}

Props

Use the following props to customize the theme toggler button.

Prop	Type	Description
className	string	CSS class applied to the theme toggler button
iconsClassName	string	CSS class applied to the theme toggler icons

Explore more components with Eunary

Discover and experiment with a variety of components to craft a stunning and seamless experience for your product.

Recent Component Next Component

Eunary

Installation

Components

Theme Toggler

Installation

Add util file

Add the following code in global.css file

Copy the source code

Props

Explore more components with Eunary

Eunary

Add the following code in `global.css` file