[WIP] Add theme image component for light and dark modes

[Copilot]

Thanks for asking me to work on this. I will get started on it and keep this PR's description up to date as I form a plan and make progress.

Original prompt

import Image, { type ImageProps } from "next/image";
import { Button } from "@repo/ui/button";
import styles from "./page.module.css";

type Props = Omit<ImageProps, "src"> & {
srcLight: string;
srcDark: string;
};

const ThemeImage = (props: Props) => {
const { srcLight, srcDark, ...rest } = props;

return (
<>
<Image {...rest} src={srcLight} className="imgLight" />
<Image {...rest} src={srcDark} className="imgDark" />
</>
);
};

export default function Home() {
return (

1. 
   Get started by editing apps/docs/app/page.tsx
   


2. Save and see your changes instantly.

    <div className={styles.ctas}>
      <a
        className={styles.primary}
        href="https://vercel.com/new/clone?demo-description=Learn+to+implement+a+monorepo+with+a+two+Next.js+sites+that+has+installed+three+local+packages.&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F4K8ZISWAzJ8X1504ca0zmC%2F0b21a1c6246add355e55816278ef54bc%2FBasic.png&demo-title=Monorepo+with+Turborepo&demo-url=https%3A%2F%2Fexamples-basic-web.vercel.sh%2F&from=templates&project-name=Monorepo+with+Turborepo&repository-name=monorepo-turborepo&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fturborepo%2Ftree%2Fmain%2Fexamples%2Fbasic&root-directory=apps%2Fdocs&skippable-integrations=1&teamSlug=vercel&utm_source=create-turbo"
        target="_blank"
        rel="noopener noreferrer"
      >
        <Image
          className={styles.logo}
          src="/vercel.svg"
          alt="Vercel logomark"
          width={20}
          height={20}
        />
        Deploy now
      </a>
      <a
        href="https://turborepo.com/docs?utm_source"
        target="_blank"
        rel="noopener noreferrer"
        className={styles.secondary}
      >
        Read our docs
      </a>
      <a
        href="https://onchain.com"
        target="_blank"
        rel="noopener noreferrer"
        className={styles.secondary}
      >
        Add to onchain
      </a>
    </div>
    <Button appName="docs" className={styles.secondary}>
      Open alert
    </Button>
  </main>
  <footer className={styles.footer}>
    <a
      href="https://vercel.com/templates?search=turborepo&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
      target="_blank"
      rel="noopener noreferrer"
    >
      <Image
        aria-hidden
        src="/window.svg"
        alt="Window icon"
        width={16}
        height={16}
      />
      Examples
    </a>
    <a
      href="https://turborepo.com?utm_source=create-turbo"
      target="_blank"
      rel="noopener noreferrer"
    >
      <Image
        aria-hidden
        src="/globe.svg"
        alt="Globe icon"
        width={16}
        height={16}
      />
      Go to turborepo.com →
    </a>
  </footer>
</div>

);
}

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
https-github-com-joe10832-onchaintestkit	Error		Jan 1, 2026 8:49pm
https-github-com-joe10832-onchaintestkit-k43t	Ready	Preview, Comment	Jan 1, 2026 8:49pm
https-github-com-joe10832-onchaintestkit-sdea	Error		Jan 1, 2026 8:49pm
https-github-com-joe10832-onchaintestkit-tuek	Canceled		Jan 1, 2026 8:49pm
https-github-com-joe10832-onchaintestkit-z6dv	Error		Jan 1, 2026 8:49pm