@sqlrooms/ui / ThemeSwitch

Function: ThemeSwitch()

ThemeSwitch(props, deprecatedLegacyContext?): ReactNode

A theme toggle switch component that allows users to switch between light and dark themes.

This component provides a visually appealing switch with sun/moon icons that animate smoothly during theme transitions. It integrates with the theme context to manage theme state.

Features:

• Smooth icon animations
• Accessible keyboard navigation
• Focus and hover states
• Customizable via className prop

Parameters

Parameter	Type	Description
props	{ className: string; }	-
props.className?	string	Optional CSS class name for styling the switch container
deprecatedLegacyContext?	any	Deprecated See React Docs

Returns

ReactNode

Component

Example

// Basic usage
<ThemeSwitch />

// With custom styling
<ThemeSwitch className="my-custom-class" />

// Within a theme provider
import { ThemeProvider } from '../theme/theme-provider';

function App() {
  return (
    <ThemeProvider>
      <ThemeSwitch />
    </ThemeProvider>
  );
}