From 2bdedaaacd7ef35875dc6ba0645c3e892c893e90 Mon Sep 17 00:00:00 2001
From: ehab <hassane@codescalers.com>
Date: Mon, 9 Sep 2024 12:51:47 +0300
Subject: [PATCH] test fixing images at dark mode

---
 .../src/components/HomepageFeatures/index.tsx | 22 ++++++++++---------
 docs_website/src/css/custom.css               | 11 ++++++++++
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/docs_website/src/components/HomepageFeatures/index.tsx b/docs_website/src/components/HomepageFeatures/index.tsx
index 8ed438a..36a2dee 100644
--- a/docs_website/src/components/HomepageFeatures/index.tsx
+++ b/docs_website/src/components/HomepageFeatures/index.tsx
@@ -11,8 +11,8 @@ type FeatureItem = {
 
 const FeatureList: FeatureItem[] = [
   { scale: 1.0,
-    fill: '#00000',
-    id: 'svgcolor',
+    fill:"currentColor",
+    // id: 'svgcolor',
     title: 'Part of a Worldwide Grid',
     Svg: require('@site/static/img/clouds.svg').default,
     description: (
@@ -22,7 +22,8 @@ const FeatureList: FeatureItem[] = [
     ),
   },
   { scale: 1.0,
-    id: 'svgcolor',
+    // id: 'svgcolor',
+    fill:"currentColor",
     title: 'Get ThreeFold Nodes',
     Svg: require('@site/static/img/nodes.svg').default,
     description: (
@@ -32,7 +33,8 @@ const FeatureList: FeatureItem[] = [
     ),
   },
   { scale: 1.0,
-    id: 'svgcolor',
+    // id: 'svgcolor',
+    fill:"currentColor",
     title: 'Earn Rewards',
     Svg: require('@site/static/img/rewards.svg').default,
     description: (
@@ -47,12 +49,12 @@ function Feature({scale, fill, id, title, Svg, description}: FeatureItem) {
 
   // Custom code to change the fill color of the Cloud Arrow Up SVG
   // depending on if user is in dark/light mode
-  const {colorMode} = useColorMode()
-  if ( id === 'svgcolor' && colorMode === 'light' ) {
-    fill = '#2a2021' // dark ThreeFold.io color
-  } else if ( id === 'svgcolor' && colorMode === 'dark') {
-    fill = '#ffffff'  // white basic color
-  }
+  // const {colorMode} = useColorMode()
+  // if ( id === 'svgcolor' && colorMode === 'light' ) {
+  //   fill = '#2a2021' // dark ThreeFold.io color
+  // } else if ( id === 'svgcolor' && colorMode === 'dark') {
+  //   fill = '#ffffff'  // white basic color
+  // }
 
   return (
     <div className={clsx('col col--4')}>
diff --git a/docs_website/src/css/custom.css b/docs_website/src/css/custom.css
index 6160fe8..3613457 100644
--- a/docs_website/src/css/custom.css
+++ b/docs_website/src/css/custom.css
@@ -14,9 +14,15 @@
   --ifm-color-primary-lighter: #359962;
   --ifm-color-primary-lightest: #3cad6e;
   --ifm-code-font-size: 95%;
+  --svg-fill-color: #2a2021; /* Black fill for light mode */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
+/* Dark mode styles */
+html[data-theme="dark"] {
+  --svg-fill-color: #fff; /* White fill for dark mode */
+}
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
   --ifm-color-primary: #2e83ff;
@@ -26,6 +32,11 @@
   --ifm-color-primary-light: #29d5b0;
   --ifm-color-primary-lighter: #32d8b4;
   --ifm-color-primary-lightest: #4fddbf;
+  --svg-fill-color: #fff; /* White fill for dark mode */
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 
+img.svg-icon {
+  fill: var(--svg-fill-color); /* Apply the color variable */
+}
+