Import
import { useTheme } from '@0xsequence/connect'
Usage
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>
)
}
Return Type
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'
Properties
theme
'light' | 'dark'
The current theme setting.
setTheme
(theme: 'light' | 'dark') => void
Function to update the theme setting.
position
ModalPosition
The current modal position setting.
setPosition
(position: ModalPosition) => void
Function to update the modal position setting.