Light logo in dark theme

[duartecancela]

Hi, it's possible to change the logo image in dark mode? i would like to use a white svg image.

[dlarroder]

Yes, you can use the useTheme() hook to determine the current theme of your application. With that, you can dynamically change the logo you are rendering. For example:

import React from 'react'
import { useTheme } from 'next-themes'
import LightLogo from './LightLogo'
import DarkLogo from './DarkLogo'

export default function Sample() {
  const { theme } = useTheme()

  return (
    <div>
      {theme === 'light' ? <LightLogo /> : <DarkLogo />}
      <span>Nav Menus</span>
    </div>
  )
}

[duartecancela]

Thank you very much, this was exactly what I was looking for :)