Fix homepage images when switching between dark and light mode

FhenixProtocol · Jan 30, 2024 · d841bf2 · d841bf2
1 parent 223505a
commit d841bf2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
@@ -2,13 +2,16 @@ import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 import React from "react";
+import { useColorMode  } from '@docusaurus/theme-common';
 
 type FeatureItem = {
   title: string;
   Svg: React.ComponentType<React.ComponentProps<'svg'>>;
   description: JSX.Element;
 };
 
+
+
 const FeatureList: FeatureItem[] = [
   {
     title: 'Easy to Use',
@@ -42,10 +45,13 @@ const FeatureList: FeatureItem[] = [
 ];
 
 function Feature({title, Svg, description}: FeatureItem) {
+  const { colorMode  } = useColorMode();
+  const svgClassName = colorMode === 'dark' ? `${styles.featureSvg} white-image` : styles.featureSvg;
+
   return (
       <div className="card margin-left--xl" style={{borderRadius: "20px", border: "1px solid var(--ifm-color-primary)"}}>
         <div className="card__header text--center">
-          <Svg className={styles.featureSvg} role="img"/>
+          <Svg className={svgClassName} role="img"/>
         </div>
         <div className="card__body text--center" >
           <Heading as="h3">{title}</Heading>

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -59,3 +59,7 @@
 .button--primary {
   background-color: var(--ifm-color-primary-lightest);
 }
+
+.white-image {
+  filter: invert(100%) brightness(200%);
+}