fix: use white github icon for dark theme (#1084)

Closes #1069

Some changes in `sources/platform/integrations/index.mdx` are because of
auto-formatting

Author: baldasseva

package-lock.json

@@ -6,18 +6,18 @@ category: platform
 slug: /integrations
 ---
 
-import Card from "@site/src/components/Card";
-import CardGrid from "@site/src/components/CardGrid";
+import Card from '@site/src/components/Card';
+import CardGrid from '@site/src/components/CardGrid';
 
 # Integrations
 
 **Learn how to integrate the Apify platform with other services, your systems, data pipelines, and other web automation workflows.**
 
 ---
 
- > The whole is greater than the sum of its parts.
- >
- > 👴 *Aristotle*
+> The whole is greater than the sum of its parts.
+>
+> 👴 _Aristotle_
 
 Integrations allow you to combine separate applications and take advantage of their combined capabilities. Automation of these online processes increases your productivity. That's why we made Apify in a way that allows you to connect it with practically any cloud service or web app and make it part of your larger projects.
 
@@ -46,7 +46,8 @@ Apify‘s RESTful API allows you to interact with the platform programmatically.
         to="/platform/integrations/webhooks"
         smallImage
     />
-</CardGrid><br />
+</CardGrid>
+<br />
 
 Apify offers easy-to-set-up solutions for common scenarios, like uploading your datasets to Google Drive when the run succeeds or creating an issue on GitHub when it fails.
 
@@ -73,6 +74,7 @@ Apify offers easy-to-set-up solutions for common scenarios, like uploading your
         title="GitHub"
         to="/platform/integrations/github"
         imageUrl="/img/platform/integrations/github.svg"
+        imageUrlDarkTheme="/img/platform/integrations/github-white.svg"
         smallImage
     />
     <Card
@@ -141,8 +143,8 @@ The Apify platform integrates with popular ETL and data pipeline services, enabl
         imageUrl="/img/platform/integrations/airbyte.svg"
         smallImage
     />
-</CardGrid><br />
-
+</CardGrid>
+<br />
 
 If you are working on an AI/LLM-related project, we recommend you look into the Langchain integration.
 

sources/platform/integrations/index.mdx

@@ -1,15 +1,23 @@
-import React from 'react';
 import Link from '@docusaurus/Link';
+import { useColorMode } from '@docusaurus/theme-common';
 import clsx from 'clsx';
+import React, { useEffect, useState } from 'react';
+
 import styles from './Cards.module.css';
 
 // TODO: Better sizing for logo images (in integrations)
-const Card = ({ to, imageUrl, title, desc, smallImage }) => {
+const Card = ({ to, imageUrl, imageUrlDarkTheme, title, desc, smallImage }) => {
+    const [themeIsDark, setThemeIsDark] = useState(true);
+    const isDark = useColorMode().isDarkTheme;
+    useEffect(() => {
+        setThemeIsDark(isDark);
+    }, [isDark]);
+
     return (
         <div className={clsx(styles.card, styles['card-hoverable'])}>
             <Link to={to}>
                 {!imageUrl || (<div className={styles[smallImage ? 'card-image-container-small' : 'card-image-container']}>
-                    <img src={imageUrl}/>
+                    <img src={imageUrlDarkTheme && themeIsDark ? imageUrlDarkTheme : imageUrl }/>
                 </div>)}
                 <div style={{ padding: '0px 1rem 1rem', paddingBottom: desc ? '1rem' : '0' }}>
                     <h4 style={{ fontSize: '120%' }}>{title}</h4>