Inconsistent theming when the page loads

[Sachinv220]

I want to invert the colours of an image when the theme is light, this is the code.

export function DarkImage({ ...props }: ImageProps) {
  const { theme } = useTheme();

  if (theme === "dark") {
    return <Image {...props} className="filter invert" />;
  } else {
    return <Image {...props} />;
  }
}

but when the page loads there is inconsistent, but when I toggle theme it works fine. Is there a problem with next-theme or Nextjs 14.

[Sachinv220]

This is the https://github.com/Sachinv220/chat/tree/ui the above code is only present in the ui branch.

The files that would be related to the current issue are
src/components/Logo.tsx
src/app/page.tsx
src/app/layout.tsx

[PixeledCode]

Could be related to Hydration Mismtach
Also there is higher chance of getting help if you create a reproducible on CodeSandBox

[Sachinv220]

Thank You,I will take a look.