fix: use ThemedImage for marks in the Showcase mdx component, closes #79

acid-info · Jun 22, 2023 · 80c9b36 · 80c9b36
1 parent 00701b7
commit 80c9b36
Showing 1 changed file with 6 additions and 7 deletions.
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/Showcase/Showcase.tsx
@@ -1,5 +1,5 @@
 import { Typography } from '@acid-info/lsd-react'
-import { useColorMode } from '@docusaurus/theme-common'
+import ThemedImage from '@theme/ThemedImage'
 import clsx from 'clsx'
 import React from 'react'
 import './Showcase.scss'
@@ -24,18 +24,17 @@ export const Showcase: React.FC<ShowcaseProps> = ({
   children,
   ...props
 }) => {
-  const { isDarkTheme } = useColorMode()
-
   return (
     <div className={clsx(className, 'mdx-showcase')} {...props}>
       {items.map((item, index) => {
-        const logoSrc = item.logo ?? item.logoDark
-
         return (
           <div key={index} className="mdx-showcase__item">
             <div key={index} className="mdx-showcase__item-inner">
-              <img
-                src={(isDarkTheme ? item.logoDark : item.logo) ?? logoSrc}
+              <ThemedImage
+                sources={{
+                  dark: item.logoDark,
+                  light: item.logo,
+                }}
                 alt={typeof item.name === 'string' ? item.name : 'image'}
                 className="mdx-showcase__item-logo"
               />