LogoStarterkitpro
Components

Mode Toggle

A theme switcher for toggling between light, dark, and system themes

A theme toggle component that allows users to switch between light, dark, and system color modes.

Mode Toggle

Usage

import { ModeToggle } from "@/components/shared/mode-toggle";

Mode Toggle Design

In components/shared/mode-toggle.tsx you can find the three pre-defined design of mode toggle component.

Tips

  • Place the mode toggle in a consistent location across your application like default showig on header
  • Consider using icons that clearly represent light and dark modes
  • Include a system preference option to respect user's device settings
  • Ensure your application's colors work well in both light and dark modes

On this page