diff --git a/docs_website/docusaurus.config.ts b/docs_website/docusaurus.config.ts index ad6da5b..ce689aa 100644 --- a/docs_website/docusaurus.config.ts +++ b/docs_website/docusaurus.config.ts @@ -62,7 +62,7 @@ const config: Config = { themeConfig: { colorMode: { defaultMode: 'light', - disableSwitch: true, + disableSwitch: false, respectPrefersColorScheme: false, }, // Replace with your project's social card @@ -72,6 +72,7 @@ const config: Config = { logo: { alt: 'ThreeFold Logo', src: 'img/logo.svg', + srcDark: 'img/logo_dark.svg', }, items: [ { diff --git a/docs_website/src/components/HomepageFeatures/index.tsx b/docs_website/src/components/HomepageFeatures/index.tsx index a1b1829..8ed438a 100644 --- a/docs_website/src/components/HomepageFeatures/index.tsx +++ b/docs_website/src/components/HomepageFeatures/index.tsx @@ -1,6 +1,7 @@ import clsx from 'clsx'; import Heading from '@theme/Heading'; import styles from './styles.module.css'; +import { useColorMode } from '@docusaurus/theme-common' type FeatureItem = { title: string; @@ -9,7 +10,9 @@ type FeatureItem = { }; const FeatureList: FeatureItem[] = [ - { + { scale: 1.0, + fill: '#00000', + id: 'svgcolor', title: 'Part of a Worldwide Grid', Svg: require('@site/static/img/clouds.svg').default, description: ( @@ -18,7 +21,8 @@ const FeatureList: FeatureItem[] = [ > ), }, - { + { scale: 1.0, + id: 'svgcolor', title: 'Get ThreeFold Nodes', Svg: require('@site/static/img/nodes.svg').default, description: ( @@ -27,7 +31,8 @@ const FeatureList: FeatureItem[] = [ > ), }, - { + { scale: 1.0, + id: 'svgcolor', title: 'Earn Rewards', Svg: require('@site/static/img/rewards.svg').default, description: ( @@ -38,11 +43,21 @@ const FeatureList: FeatureItem[] = [ }, ]; -function Feature({title, Svg, description}: FeatureItem) { +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 + } + return (