Implement light and dark theme toggles

This commit is contained in:
Ilja 2022-02-14 15:51:49 +02:00
parent 354cf0bf34
commit 01c9d2d861
2 changed files with 8 additions and 3 deletions

View File

@ -14,7 +14,7 @@ export default function useWalletConnectEventsManager(initialized: boolean) {
// 2. Open session created modal to show success feedback
const onSessionCreated = useCallback((created: SessionTypes.Created) => {}, [])
// 3. Open rpc request handling modal based on method that was used
// 3. Open request handling modal based on method that was used
const onSessionRequest = useCallback(async (requestEvent: SessionTypes.RequestEvent) => {
const { topic, request } = requestEvent
const { method } = request

View File

@ -1,9 +1,13 @@
import PageHeader from '@/components/PageHeader'
import { wallet } from '@/utils/WalletUtil'
import { Card, Divider, Row, Switch, Text } from '@nextui-org/react'
import { Card, Divider, Row, Switch, Text, useTheme } from '@nextui-org/react'
import { useTheme as useNextTheme } from 'next-themes'
import { Fragment } from 'react'
export default function SettingsPage() {
const { setTheme } = useNextTheme()
const { isDark, type } = useTheme()
return (
<Fragment>
<PageHeader>Settings</PageHeader>
@ -34,7 +38,8 @@ export default function SettingsPage() {
Theme
</Text>
<Row justify="space-between" align="center">
<Switch /> <Text>Dark</Text>
<Switch checked={isDark} onChange={e => setTheme(e.target.checked ? 'dark' : 'light')} />{' '}
<Text>{type}</Text>
</Row>
</Fragment>
)