Animate UI

Theme Toggler

An effect that allows you to toggle the theme gradually.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<ThemeToggler>
  {({ effective, toggleTheme }) => (
    <button onClick={() => toggleTheme(nextTheme)}>
      {effective === 'system' ? (
        <Monitor />
      ) : effective === 'dark' ? (
        <Moon />
      ) : (
        <Sun />
      )}
    </button>
  )}
</ThemeToggler>

API Reference

ThemeToggler

PropTypeDefault
theme
'light' | 'dark' | 'system'
-
resolvedTheme
'light' | 'dark'
-
setTheme
(theme: 'light' | 'dark' | 'system') => void
-
direction?
'btt' | 'ttb' | 'ltr' | 'rtl'
ltr
children?
React.ReactNode | ((state: { resolved: "light" | "dark"; effective: "light" | "dark" | "system"; toggleTheme: (theme: "light" | "dark" | "system") => void }) => React.ReactNode)
-
onImmediateChange?
(theme: 'light' | 'dark' | 'system') => void
-

Credits

  • Credit to Magic UI for the component inspiration.

Built by Skyleen. The source code is available on GitHub.