mirror of
https://github.com/simstudioai/sim.git
synced 2026-01-10 23:48:09 -05:00
d1c08daaf4
* improvement(docs): overhaul docs * lint * light mode * more light mode * added llms.txt and llms-full.txt and sitemap * fixed mobile styling and position for zoom in out * finished styling * improvement(docs): overhaul docs * lint * remove dups * renaming components * cleanup
33 lines
867 B
TypeScript
33 lines
867 B
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { Moon, Sun } from 'lucide-react'
|
|
import { useTheme } from 'next-themes'
|
|
|
|
export function ThemeToggle() {
|
|
const { theme, setTheme } = useTheme()
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
}, [])
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<button className='flex items-center justify-center rounded-md p-1 text-muted-foreground'>
|
|
<Moon className='h-4 w-4' />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<button
|
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
|
className='flex items-center justify-center rounded-md p-1 text-muted-foreground transition-colors hover:text-foreground'
|
|
aria-label='Toggle theme'
|
|
>
|
|
{theme === 'dark' ? <Moon className='h-4 w-4' /> : <Sun className='h-4 w-4' />}
|
|
</button>
|
|
)
|
|
}
|