feat(docs-gpt): light-themed clippy

Author: gregnr

apps/docs/components/Clippy/Clippy.tsx

@@ -1,11 +1,14 @@
+import { useTheme } from 'common/Providers'
 import Image from 'next/image'
 import { FC, useCallback, useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
+import clippyImageDark from '../../public/img/clippy-dark.png'
 import clippyImage from '../../public/img/clippy.png'
 import ClippyBubble from './ClippyBubble'
 import ClippyModal from './ClippyModal'
 
 const Clippy: FC = () => {
+  const { isDarkMode } = useTheme()
   const [isModalOpen, setIsModalOpen] = useState(false)
 
   const onOpen = useCallback(() => {
@@ -29,7 +32,7 @@ const Clippy: FC = () => {
         <div className="flex flex-col items-end gap-4">
           <ClippyBubble onClick={onOpen} />
           <div className="w-[150px]">
-            <Image src={clippyImage} alt="Clippy" />
+            <Image src={isDarkMode ? clippyImageDark : clippyImage} alt="Clippy" />
           </div>
         </div>
       )}