From b044a9eaf4ac83d03bb78a98076f2f5ebde276d4 Mon Sep 17 00:00:00 2001
From: Allen Benny <allen.officially@gmail.com>
Date: Tue, 19 Dec 2023 14:08:02 +0530
Subject: [PATCH] Demo Commit

---
 .../NewfoldInterfaceSkeleton/index.js         | 29 ++++++++++---------
 src/OnboardingSPA/styles/_branding.scss       |  2 +-
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js b/src/OnboardingSPA/components/NewfoldInterfaceSkeleton/index.js
index 715015336..54943576c 100644
--- 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
index e35a4ae8e..e86d596a7 100644
--- 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;
 	}
 }