From 3855f81005e712212188937fb2afc301ef60cb32 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sat, 11 May 2024 01:16:21 -0400 Subject: [PATCH] hero dark mode --- website/src/pages/Home/Hero/Devices.js | 2037 +++++++++-------- .../src/pages/Home/Hero/FloorBackground.js | 58 +- website/src/pages/Home/Hero/GridBackground.js | 79 +- website/src/pages/Home/Hero/styles.module.css | 18 +- website/src/pages/Home/Logo.js | 62 +- website/src/pages/Home/colors.js | 0 6 files changed, 1161 insertions(+), 1093 deletions(-) create mode 100644 website/src/pages/Home/colors.js diff --git a/website/src/pages/Home/Hero/Devices.js b/website/src/pages/Home/Hero/Devices.js index d9a74e75bb7..d1f8f7971b8 100644 --- a/website/src/pages/Home/Hero/Devices.js +++ b/website/src/pages/Home/Hero/Devices.js @@ -6,1072 +6,1111 @@ */ import * as React from 'react'; +import {useColorMode} from '@docusaurus/theme-common'; import styles from './styles.module.css'; -const Devices = props => ( - - - - - - - - - - - - - - - - - - - - - - +function Devices() { + const {colorMode} = useColorMode(); + const isDarkMode = colorMode === 'dark'; + const deviceBorderColor = isDarkMode ? '#404756' : '#5E687E'; + const deviceStopColor = isDarkMode ? '#4A5160' : '#66728B'; + const skeletonElementColor = isDarkMode ? '#404756' : '#CFE6EE'; + const backgroundColor = isDarkMode ? '#242426' : '#FFF'; + const iconColor = isDarkMode ? '#fff' : '#000'; + const iconBorderColor = isDarkMode ? '#404756' : '#E5E7EB'; + + return ( + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - + + - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - -); + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} export default Devices; diff --git a/website/src/pages/Home/Hero/FloorBackground.js b/website/src/pages/Home/Hero/FloorBackground.js index 584f5c7f592..5f78032eab7 100644 --- a/website/src/pages/Home/Hero/FloorBackground.js +++ b/website/src/pages/Home/Hero/FloorBackground.js @@ -6,33 +6,39 @@ */ import * as React from 'react'; +import {useColorMode} from '@docusaurus/theme-common'; import styles from './styles.module.css'; -const FloorBackground = props => ( - - - - - - - - - -); +function FloorBackground() { + const {colorMode} = useColorMode(); + const isDarkMode = colorMode === 'dark'; + const color = isDarkMode ? '#30363D' : '#ACDDEC'; + + return ( + + + + + + + + + + ); +} export default FloorBackground; diff --git a/website/src/pages/Home/Hero/GridBackground.js b/website/src/pages/Home/Hero/GridBackground.js index 2153898c99c..2afdcf64dc7 100644 --- a/website/src/pages/Home/Hero/GridBackground.js +++ b/website/src/pages/Home/Hero/GridBackground.js @@ -7,99 +7,104 @@ import * as React from 'react'; import styles from './styles.module.css'; -import {useThemeContext} from '@docusaurus/theme-common'; +import {useColorMode} from '@docusaurus/theme-common'; + +function GridBackground() { + const {colorMode} = useColorMode(); + const isDarkMode = colorMode === 'dark'; + const iconBackgroundColor = isDarkMode ? '#23272F' : '#F8F9FA'; + const iconColor = isDarkMode ? '#404756' : '#E1E4E8'; + const gridColor = isDarkMode ? '#30363D' : '#CED4DA'; -const GridBackground = props => { return ( + className={styles.svgContent}> - - + + - + - + - + - + - + - + - + - + - + - + - + - + - + { r={1} gradientUnits="userSpaceOnUse" gradientTransform="matrix(0 -591.533 857.267 0 766.983 683.455)"> - - + + ); -}; +} export default GridBackground; diff --git a/website/src/pages/Home/Hero/styles.module.css b/website/src/pages/Home/Hero/styles.module.css index 97dc2d591df..0ac4f70c82d 100644 --- a/website/src/pages/Home/Hero/styles.module.css +++ b/website/src/pages/Home/Hero/styles.module.css @@ -14,7 +14,6 @@ z-index: -1; overflow: hidden; width: 100vw; - background-color: white; } .gridBackground { @@ -44,6 +43,10 @@ position: relative; top: -4px; background: linear-gradient(to bottom, rgb(236, 248, 250), white), white; + + [data-theme="dark"] & { + background: linear-gradient(to bottom, #1b1b1d, #1b1b1d), #1b1b1d; + } } .svgContent { @@ -58,12 +61,10 @@ font-size: 40px; margin-bottom: 0.5rem; margin-top: 1.5rem; - color: #23272f; } .subtitle { font-weight: 500; - color: #404756; font-size: 28px; } @@ -111,6 +112,11 @@ @media (max-width: 344px) { width: calc(100% - 2rem); } + + [data-theme="dark"] & { + background-color: #58c4dc; + color: #23272f; + } } .secondaryButton { @@ -135,4 +141,10 @@ @media (max-width: 344px) { width: calc(100% - 2rem); } + + [data-theme="dark"] & { + background-color: transparent; + border: 1px solid #4e5668; + color: #f6f7f9; + } } diff --git a/website/src/pages/Home/Logo.js b/website/src/pages/Home/Logo.js index cb3f584f946..5ee3e89b483 100644 --- a/website/src/pages/Home/Logo.js +++ b/website/src/pages/Home/Logo.js @@ -6,34 +6,40 @@ */ import * as React from 'react'; +import {useColorMode} from '@docusaurus/theme-common'; -const Logo = props => ( - - - - - - -); +function Logo() { + const {colorMode} = useColorMode(); + const isDarkMode = colorMode === 'dark'; + const color = isDarkMode ? '#58C4DC' : '#087EA4'; + + return ( + + + + + + + ); +} export default Logo; diff --git a/website/src/pages/Home/colors.js b/website/src/pages/Home/colors.js new file mode 100644 index 00000000000..e69de29bb2d