tfgrid/www_docs_threefold_io
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test fixing images at dark mode

Browse Source
This commit is contained in:
Ehab Hassan 2024-09-09 12:51:47 +03:00
parent 067c7114a6
commit 2bdedaaacd
2 changed files with 23 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs_website/src/components/HomepageFeatures/index.tsx
View File

@ -11,8 +11,8 @@ type FeatureItem = {
const FeatureList: FeatureItem[] = [ const FeatureList: FeatureItem[] = [
{ scale: 1.0, { scale: 1.0,
fill: '#00000', fill:"currentColor",
id: 'svgcolor', // id: 'svgcolor',
title: 'Part of a Worldwide Grid', title: 'Part of a Worldwide Grid',
Svg: require('@site/static/img/clouds.svg').default, Svg: require('@site/static/img/clouds.svg').default,
description: ( description: (
@ -22,7 +22,8 @@ const FeatureList: FeatureItem[] = [
), ),
}, },
{ scale: 1.0, { scale: 1.0,
id: 'svgcolor', // id: 'svgcolor',
fill:"currentColor",
title: 'Get ThreeFold Nodes', title: 'Get ThreeFold Nodes',
Svg: require('@site/static/img/nodes.svg').default, Svg: require('@site/static/img/nodes.svg').default,
description: ( description: (
@ -32,7 +33,8 @@ const FeatureList: FeatureItem[] = [
), ),
}, },
{ scale: 1.0, { scale: 1.0,
id: 'svgcolor', // id: 'svgcolor',
fill:"currentColor",
title: 'Earn Rewards', title: 'Earn Rewards',
Svg: require('@site/static/img/rewards.svg').default, Svg: require('@site/static/img/rewards.svg').default,
description: ( 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 // Custom code to change the fill color of the Cloud Arrow Up SVG
// depending on if user is in dark/light mode // depending on if user is in dark/light mode
const {colorMode} = useColorMode() // const {colorMode} = useColorMode()
if ( id === 'svgcolor' && colorMode === 'light' ) { // if ( id === 'svgcolor' && colorMode === 'light' ) {
fill = '#2a2021' // dark ThreeFold.io color // fill = '#2a2021' // dark ThreeFold.io color
} else if ( id === 'svgcolor' && colorMode === 'dark') { // } else if ( id === 'svgcolor' && colorMode === 'dark') {
fill = '#ffffff' // white basic color // fill = '#ffffff' // white basic color
} // }
return ( return (
<div className={clsx('col col--4')}> <div className={clsx('col col--4')}>

11
docs_website/src/css/custom.css
View File

@ -14,9 +14,15 @@
--ifm-color-primary-lighter: #359962; --ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e; --ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%; --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); --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. */ /* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] { [data-theme='dark'] {
--ifm-color-primary: #2e83ff; --ifm-color-primary: #2e83ff;
@ -26,6 +32,11 @@
--ifm-color-primary-light: #29d5b0; --ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4; --ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf; --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); --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
} }
img.svg-icon {
fill: var(--svg-fill-color); /* Apply the color variable */
}