Importar
import { useTheme } from '@0xsequence/connect'
Uso
import { useTheme } from '@0xsequence/connect'
function App() {
const { theme, setTheme, position, setPosition } = useTheme()
return (
<div>
<div>
<h3>Theme Settings</h3>
<button onClick={() => setTheme('light')}>Light Mode</button>
<button onClick={() => setTheme('dark')}>Dark Mode</button>
</div>
<div>
<h3>Modal Position</h3>
<select
value={position}
onChange={(e) => setPosition(e.target.value)}
>
<option value="center">Center</option>
<option value="top-right">Top Right</option>
<option value="top-left">Top Left</option>
<option value="bottom-right">Bottom Right</option>
<option value="bottom-left">Bottom Left</option>
</select>
</div>
</div>
)
}
Tipo de retorno
interface ThemeHookReturn {
theme: 'light' | 'dark'
setTheme: (theme: 'light' | 'dark') => void
position: ModalPosition
setPosition: (position: ModalPosition) => void
}
type ModalPosition =
| 'center'
| 'top-right'
| 'top-left'
| 'bottom-right'
| 'bottom-left'
Propiedades
theme
'light' | 'dark'
La configuración de tema actual.
setTheme
(theme: 'light' | 'dark') => void
Función para actualizar la configuración de tema.
position
ModalPosition
La configuración actual de posición del modal.
setPosition
(position: ModalPosition) => void
Función para actualizar la posición del modal.