ThemeToggle

themetoggle-1779393693189.tsx

'use client'
import { useState } from 'react'

export default function ThemeToggle() {
  const [dark, setDark] = useState(false)
  return (
    <div style={{
      minHeight: '200px', background: dark ? '#0f172a' : '#f8fafc',
      borderRadius: '16px', padding: '24px', transition: 'background 0.4s ease',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '20px',
    }}>
      <div style={{ fontSize: '24px', color: dark ? '#e2e8f0' : '#1e293b', fontWeight: 700 }}>
        {dark ? '🌙 Dark Mode' : '☀️ Light Mode'}
      </div>
      <button
        onClick={() => setDark(!dark)}
        style={{
          width: '64px', height: '34px', borderRadius: '17px', border: 'none',
          background: dark ? '#6d28d9' : '#e2e8f0',
          cursor: 'pointer', position: 'relative', transition: 'background 0.3s',
        }}
      >
        <div style={{
          position: 'absolute', top: '4px',
          left: dark ? '34px' : '4px',
          width: '26px', height: '26px', borderRadius: '50%',
          background: '#fff', boxShadow: '0 2px 6px rgba(0,0,0,0.2)',
          transition: 'left 0.3s ease',
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '14px',
        }}>{dark ? '🌙' : '☀️'}</div>
      </button>
      <div style={{ color: dark ? '#94a3b8' : '#64748b', fontSize: '13px', textAlign: 'center' }}>
        Click to toggle theme
      </div>
    </div>
  )
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

Dark/light mode toggle with smooth transition animation

More from Utility

'use client'
import { useState, useCallback } from 'react'

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

'use client'
import { useState } from 'react'

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

'use client';
import { useState } from 'react';

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

NeonToggle

Utility

'use client'
import { useState } from 'react'

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility