chore: Update dark theme logos styling (Fixes #1209) (#1213)

* chore: Update dark theme logos styling

* replaced var with let

* Replaced var with let - 2

* Applied suggestions from code review

Co-authored-by: Gabriel Jablonski <[email protected]>

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

* ran prettier

---------

Co-authored-by: Gabriel Jablonski <[email protected]>

Author: rahulharpal1603

docs/src/components/AdsContainer/styles.css

@@ -11,4 +11,4 @@
     width: 100%;
     max-width: 341px;
   }
-}
+}

docs/src/components/BannerSponsor/styles.css

@@ -18,4 +18,4 @@
 
 .sponsor-banner-silver {
   max-width: 163px;
-}
+}

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,11 +44,16 @@ const FeatureList: FeatureItem[] = [
   },
 ]
 
-function Feature({ title, Svg, description }: FeatureItem) {
+function Feature({ title, Svg, description, allowsDarkMode }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+        <Svg
+          className={clsx(styles.featureSvg, {
+            [styles.svgDarkMode]: allowsDarkMode,
+          })}
+          role="img"
+        />
       </div>
       <div className="text--center padding-horiz--md">
         <h3>{title}</h3>

docs/src/components/HomepageFeatures/styles.module.css

@@ -9,3 +9,7 @@
   height: 200px;
   width: 200px;
 }
+
+html[data-theme='dark'] .svgDarkMode {
+  fill: #fff;
+}

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,12 +52,17 @@ const SponsorList: SponsorItem[] = [
   // },
 ]
 
-function Feature({ title, Svg, link }: FeatureItem) {
+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={styles.featureSvg} role="img" />
+          <Svg
+            className={clsx(styles.featureSvg, {
+              [styles.svgDarkMode]: allowsDarkMode,
+            })}
+            role="img"
+          />
         </a>
       </div>
     </div>

docs/src/components/HomepageSponsored/styles.module.css

@@ -29,3 +29,7 @@
     width: 100%;
   }
 }
+
+html[data-theme='dark'] .svgDarkMode {
+  fill: #fff;
+}