Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Kanavbajaj patch readme #335

Closed
wants to merge 2 commits into from
Closed

Kanavbajaj patch readme #335

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8128128
Update README.md
kanavbajaj Jan 4, 2025
ac291ae
Update README.md
kanavbajaj Jan 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions next-themes/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,13 +425,26 @@ To avoid [Layout Shift](https://web.dev/cls/), consider rendering a skeleton/pla
Showing different images based on the current theme also suffers from the hydration mismatch problem. With [`next/image`](https://nextjs.org/docs/basic-features/image-optimization) you can use an empty image until the theme is resolved:

```jsx
'use client'

import Image from 'next/image'
import { useTheme } from 'next-themes'
import { useState, useEffect } from 'react'

function ThemedImage() {
const { resolvedTheme } = useTheme()
let src
const [isMounted, setIsMounted] = useState(false)

useEffect(() => {
setIsMounted(true)
}, [])

if (!isMounted) {
// Prevent SSR mismatch by rendering nothing on the server
return null
}

let src
switch (resolvedTheme) {
case 'light':
src = '/light.png'
Expand All @@ -444,10 +457,11 @@ function ThemedImage() {
break
}

return <Image src={src} width={400} height={400} />
return <Image src={src} width={400} height={400} alt="Themed image" />
}

export default ThemedImage

```

#### CSS
Expand Down
Loading