Theme Toggle Component

A modern, animated dark mode toggle built for SaaS applications. It supports Sun/Moon icon transitions, smooth thumb animation, and works with a context-driven theme system.

Overview

The Theme Toggle is a reusable UI component that connects to your theme context and switches between light and dark modes.

  • Fully controlled via context
  • Supports dark & light mode
  • Smooth animated transitions
  • Optimized for design systems

Installation (Package Usage)

Import the ThemeToggle component from your UI package.

tsx
1import { ThemeToggleButton } from "@neuctra/ui";

It is fully standalone and does not require internal hooks.

Context Setup

ThemeToggle receives theme state through a context object.

tsx
1type ThemeToggleContext = {
2  isDark: boolean;
3  toggleTheme: () => void;
4};

You pass the context directly into the component.

Basic Usage

Use ThemeToggleButton inside your app with ThemeContext.

1import { ThemeToggleButton } from "@neuctra/ui";
2import { useTheme } from "./contexts/ThemeContext";
3
4export default function App() {
5  const theme = useTheme();
6
7  return (
8    <div className="p-10">
9      <ThemeToggleButton context={theme} />
10    </div>
11  );
12}

Customization

Every part of the toggle accepts its own className, on top of the root className.

tsx
1<ThemeToggleButton
2  context={theme}
3  className="h-10 w-10"
4  sunClassName="text-amber-400"
5  moonClassName="text-indigo-400"
6/>

sunClassName and moonClassName style the Sun/Moon icons independently — useful for matching the toggle's colors to your brand instead of the default text-warning / text-info tokens.

UI Behavior

The toggle includes animated icons and a sliding thumb for modern UX.

Dark mode shows the Sun icon

Light mode shows the Moon icon

✔ Smooth transition animations

✔ Compact SaaS-style design

✔ Fully responsive UI

Best Practices

Recommended usage patterns for production apps.

  • Keep ThemeProvider at root level
  • Use toggle in navbar or settings panel
  • Persist theme in localStorage
  • Sync with system preference

Recommended for all SaaS dashboards

Frequently Asked Questions

How do I import and use ThemeToggleButton?

Import it with `import { ThemeToggleButton } from "@neuctra/ui";` then pass the theme context from `useTheme()` as the `context` prop — it needs no internal hooks of its own.

Can I style the Sun and Moon icons separately?

Yes. sunClassName and moonClassName style the icons independently on top of the root className, so you can match the toggle's colors to your brand instead of the default text-warning/text-info tokens.

Where should ThemeProvider live in my app?

Keep ThemeProvider at the root of your application so every component — including ThemeToggleButton wherever it's placed (navbar, settings panel, etc.) — can access theme state.