How to set dynamic logo in nextra based on theme mode.

If you're using nextra to setup your documentation pages and you want to set a different logo for each theme mode (dark & light). You can simply do it by getting the resolvedTheme from useTheme hook provided by nextra-theme-docs and use it to show a different logo conditionally in your logo jsx component inside theme.config.tsx

This is how your theme.config.tsx would look like:

import React from "react";
import { DocsThemeConfig, useTheme } from "nextra-theme-docs";
import Image from "next/image";

const config: DocsThemeConfig = {
  logo: () => {
    const { resolvedTheme } = useTheme();
    return (
      <Image
        alt="My Logo"
        height={100}
        width={150}
        src={resolvedTheme === "dark" ? "path/to/white/logo" : "path/to/black/logo"}
      />
    );
  },

//... the rest of your nextra theme config
};

export default config;

That's it.