Demo Commit

newfold-labs · Dec 19, 2023 · b044a9e · b044a9e
1 parent b4a66bf
commit b044a9e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 14 deletions.
diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js
@@ -9,23 +9,26 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { forwardRef, useEffect } from '@wordpress/element';
+import { forwardRef, useEffect, useContext } from '@wordpress/element';
 // eslint-disable-next-line  @wordpress/no-unsafe-wp-apis
 import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
+import AIImg from '../../static/images/sitegen/ai_bg.png';
+import { ThemeContext } from '../ThemeContextProvider';
+import { THEME_DARK } from '../../../constants';
 
-function useHTMLClass( className ) {
+function useHTMLClass( className, isDarkMode ) {
 	useEffect( () => {
 		// eslint-disable-next-line no-undef
-		// const mainImage = new Image();
-		// mainImage.src = '../../static/images/sitegen/ai_bg.png';
-		// mainImage.onload = () => {
-		// 	console.log('Image Loaded!');
-		// 	document.querySelector(
-		// 		'.nfd-onboarding-skeleton--sitegen'
-		// 	).style.background = 'var(--sitegen-background)';
-		// };
+		const mainImage = new Image();
+		mainImage.src = AIImg;
+		mainImage.onload = () => {
+			console.log('Image Loaded!');
+			document.querySelector(
+				'.nfd-onboarding-skeleton--sitegen'
+			).style.background = isDarkMode ? `url('${ AIImg }')` : '#ededed';
+		};
 
 		const element =
 			document && document.querySelector( `html:not(.${ className })` );
@@ -36,7 +39,7 @@ function useHTMLClass( className ) {
 		return () => {
 			element.classList.toggle( className );
 		};
-	}, [ className ] );
+	}, [ className, isDarkMode ] );
 }
 
 function NewfoldInterfaceSkeleton(
@@ -56,8 +59,8 @@ function NewfoldInterfaceSkeleton(
 	ref
 ) {
 	const navigateRegionsProps = useNavigateRegions( shortcuts );
-
-	useHTMLClass( 'nfd-interface-interface-skeleton__html-container' );
+	const { theme } = useContext( ThemeContext );
+	useHTMLClass( 'nfd-interface-interface-skeleton__html-container', theme === THEME_DARK );
 
 	const defaultLabels = {
 		/* translators: accessibility text for the nav bar landmark region. */

diff --git a/src/OnboardingSPA/styles/_branding.scss b/src/OnboardingSPA/styles/_branding.scss
@@ -347,6 +347,6 @@ body {
 		--nfd-onboarding-favorite-fill: #ef4a71;
 		--nfd-onboarding-button-background: #363e4459;
 		--sitegen-background-low: url(../static/images/sitegen/ai_bg_low.png);
-		--sitegen-background: url(../static/images/sitegen/ai_bg.png);
+		--sitegen-background:  #ef4a71;
 	}
 }