changed in approach. added a new key in Svg component.

Author: rahulharpal1603

Diff for: docs/src/components/HomepageFeatures/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/require-default-props */
 /* eslint-disable import/no-unresolved */
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable global-require */
@@ -9,6 +10,7 @@ type FeatureItem = {
   title: string
   Svg: React.ComponentType<React.ComponentProps<'svg'>>
   description: JSX.Element
+  allowsDarkMode?: boolean
 }
 
 const FeatureList: FeatureItem[] = [
@@ -28,6 +30,7 @@ const FeatureList: FeatureItem[] = [
         community to always try to improve ReactTooltip.
       </>
     ),
+    allowsDarkMode: true,
   },
   {
     title: 'Focus on What Matters',
@@ -41,16 +44,16 @@ const FeatureList: FeatureItem[] = [
   },
 ]
 
-function Feature({ title, Svg, description }: FeatureItem) {
-  let svgClassName = styles.featureSvg
-  if (Svg === require('@site/static/img/github.svg').default) {
-    svgClassName = `${styles.featureSvg} ${styles.githubLogo}`
-  }
-
+function Feature({ title, Svg, description,allowsDarkMode }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={svgClassName} role="img" />
+        <Svg
+          className={clsx(styles.featureSvg, {
+            [styles.svgDarkMode]: allowsDarkMode,
+          })} 
+          role="img" 
+          />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>

Diff for: docs/src/components/HomepageFeatures/styles.module.css

@@ -10,6 +10,6 @@
   width: 200px;
 }
 
-html[data-theme='dark'] .githubLogo {
+html[data-theme='dark'] .svgDarkMode {
   fill: #fff;
 }

Diff for: docs/src/components/HomepageSponsored/index.tsx

@@ -14,6 +14,7 @@ type FeatureItem = {
   // eslint-disable-next-line react/no-unused-prop-types
   eventTitle?: string
   link: string
+  allowsDarkMode?: boolean
 }
 
 type SponsorItem = FeatureItem & {
@@ -30,6 +31,7 @@ const FeatureList: FeatureItem[] = [
     title: 'Algolia',
     Svg: require('@site/static/img/Algolia-logo.svg').default,
     link: 'https://docsearch.algolia.com/',
+    allowsDarkMode: true,
   },
 ]
 
@@ -50,17 +52,17 @@ const SponsorList: SponsorItem[] = [
   // },
 ]
 
-function Feature({ title, Svg, link }: FeatureItem) {
-  let svgClassName = styles.featureSvg
-  if (Svg === require('@site/static/img/Algolia-logo.svg').default) {
-    svgClassName = `${styles.featureSvg} ${styles.AlgoliaLogo}`
-  }
-
+function Feature({ title, Svg, link,allowsDarkMode}: FeatureItem) {
   return (
     <div className={clsx('col col--6')}>
       <div className="text--center">
         <a href={link} title={title} target="_blank" rel="noreferrer" aria-label={title}>
-          <Svg className={svgClassName} role="img"/>
+        <Svg
+          className={clsx(styles.featureSvg, {
+            [styles.svgDarkMode]: allowsDarkMode,
+          })} 
+          role="img" 
+          />
         </a>
       </div>
     </div>

Diff for: docs/src/components/HomepageSponsored/styles.module.css

@@ -30,6 +30,6 @@
   }
 }
 
-html[data-theme='dark'] .AlgoliaLogo{
+html[data-theme='dark'] .svgDarkMode {
   fill: #fff;
 }