Skip to content

Commit 66f48f2

Browse files
author
designcise
committed
docs: added example to manually toggle theme
1 parent 30af7e4 commit 66f48f2

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed

README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,28 @@ export default function ToggleThemeButton() {
8787
}
8888
```
8989
90+
You can also do this manually using `theme`, `color`, and `setTheme()`, for example, like so:
91+
92+
```jsx
93+
// components/ToggleThemeButton/index.jsx
94+
'use client'
95+
96+
import React, { useContext } from 'react';
97+
import { useTheme } from '@designcise/next-theme-toggle';
98+
99+
export default function ToggleThemeButton() {
100+
const { theme, color, setTheme } = useTheme();
101+
102+
return (
103+
<button
104+
onClick={() => setTheme(theme === color.dark ? color.light : color.dark)}
105+
>
106+
Toggle Theme
107+
</button>
108+
)
109+
}
110+
```
111+
90112
3. Add toggle button to your page(s):
91113
92114
```jsx

0 commit comments

Comments
 (0)