From 33e678dbf7bb01500ed3bbceabe23d05790da1e9 Mon Sep 17 00:00:00 2001 From: mik-tf Date: Mon, 26 Aug 2024 18:27:11 -0400 Subject: [PATCH] adjusted light and dark theme --- docs_website/docusaurus.config.ts | 3 +- .../src/components/HomepageFeatures/index.tsx | 25 +++- docs_website/src/css/custom.css | 5 +- docs_website/static/img/logo.svg | 138 +++--------------- docs_website/static/img/logo2.svg | 36 ----- docs_website/static/img/logo3.svg | 120 +++++++++++++++ docs_website/static/img/logo_dark.svg | 18 +++ docs_website/static/img/nodes.svg | 9 +- docs_website/static/img/rewards.svg | 2 +- 9 files changed, 184 insertions(+), 172 deletions(-) delete mode 100644 docs_website/static/img/logo2.svg create mode 100644 docs_website/static/img/logo3.svg create mode 100644 docs_website/static/img/logo_dark.svg 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 (
- +
{title} diff --git a/docs_website/src/css/custom.css b/docs_website/src/css/custom.css index 2bc6a4c..6160fe8 100644 --- a/docs_website/src/css/custom.css +++ b/docs_website/src/css/custom.css @@ -6,7 +6,7 @@ /* You can override the default Infima variables here. */ :root { - --ifm-color-primary: #2e8555; + --ifm-color-primary: #2e83ff; --ifm-color-primary-dark: #29784c; --ifm-color-primary-darker: #277148; --ifm-color-primary-darkest: #205d3b; @@ -19,7 +19,7 @@ /* For readability concerns, you should choose a lighter palette in dark mode. */ [data-theme='dark'] { - --ifm-color-primary: #25c2a0; + --ifm-color-primary: #2e83ff; --ifm-color-primary-dark: #21af90; --ifm-color-primary-darker: #1fa588; --ifm-color-primary-darkest: #1a8870; @@ -28,3 +28,4 @@ --ifm-color-primary-lightest: #4fddbf; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } + diff --git a/docs_website/static/img/logo.svg b/docs_website/static/img/logo.svg index 567d83f..4d39945 100644 --- a/docs_website/static/img/logo.svg +++ b/docs_website/static/img/logo.svg @@ -1,120 +1,18 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs_website/static/img/logo2.svg b/docs_website/static/img/logo2.svg deleted file mode 100644 index 11eda84..0000000 --- a/docs_website/static/img/logo2.svg +++ /dev/null @@ -1,36 +0,0 @@ - - - - - - 91 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs_website/static/img/logo3.svg b/docs_website/static/img/logo3.svg new file mode 100644 index 0000000..567d83f --- /dev/null +++ b/docs_website/static/img/logo3.svg @@ -0,0 +1,120 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs_website/static/img/logo_dark.svg b/docs_website/static/img/logo_dark.svg new file mode 100644 index 0000000..3118cbd --- /dev/null +++ b/docs_website/static/img/logo_dark.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs_website/static/img/nodes.svg b/docs_website/static/img/nodes.svg index 3076954..cb1d4e1 100644 --- a/docs_website/static/img/nodes.svg +++ b/docs_website/static/img/nodes.svg @@ -1,7 +1,2 @@ - - - - - - - \ No newline at end of file + + \ No newline at end of file diff --git a/docs_website/static/img/rewards.svg b/docs_website/static/img/rewards.svg index c98dcbf..62e919f 100644 --- a/docs_website/static/img/rewards.svg +++ b/docs_website/static/img/rewards.svg @@ -1,2 +1,2 @@ - \ No newline at end of file + \ No newline at end of file -- 2.40.1