Skip to content

Commit 0bd4127

Browse files
authored
Update README.md
1 parent 66d9987 commit 0bd4127

File tree

1 file changed

+12
-4
lines changed

1 file changed

+12
-4
lines changed

README.md

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,14 @@ export default function Layout({ children }) {
137137

138138
⚡🎉 Woohoo! You just added multiple theme and color-scheme modes and you can also use Server Component! Isn't that awesome?
139139

140+
### ColorSwitch
141+
142+
An elegant color-switch to toggle coloe-schemes ("dark" | "light" | "system").
143+
144+
```tsx
145+
<ColorSwitch />
146+
```
147+
140148
### HTML & CSS
141149

142150
That's it, your Next.js app fully supports dark mode, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, `nextjs-themes-ultralight` modifies the className on the `html` element, which you can easily use to style your app:
@@ -153,14 +161,14 @@ That's it, your Next.js app fully supports dark mode, including System preferenc
153161
--foreground: white;
154162
}
155163

156-
// for custom themes
164+
/* for custom themes */
157165

158166
.th-theme1 {
159167
--background: red;
160168
--foreground: yellow;
161169
}
162170

163-
// for custom theme with dark and light variants
171+
/* for custom theme with dark and light variants */
164172

165173
.dark.th-theme2 {
166174
--background: blue;
@@ -224,10 +232,10 @@ import Image from "next/image";
224232
import { useTheme } from "nthul/hooks";
225233

226234
function ThemedImage() {
227-
const { theme, resolvedColorScheme } = useTheme();
235+
const { resolvedColorScheme } = useTheme();
228236
let src;
229237

230-
switch (resolvedTheme) {
238+
switch (resolvedColorScheme) {
231239
case "light":
232240
src = "/light.png";
233241
break;

0 commit comments

Comments
 (0)