diff --git a/src/OnboardingSPA/components/ThemeContextProvider/index.js b/src/OnboardingSPA/components/ThemeContextProvider/index.js
index bf563887d..f03d9eb85 100644
--- a/src/OnboardingSPA/components/ThemeContextProvider/index.js
+++ b/src/OnboardingSPA/components/ThemeContextProvider/index.js
@@ -1,10 +1,36 @@
-import { useState, createContext } from '@wordpress/element';
+import { useState, useEffect, createContext } from '@wordpress/element';
 import { THEME_DARK, THEME_LIGHT } from '../../../constants';
 
 const ThemeContext = createContext();
 
+function getPreferredColorScheme() {
+	if (
+		window.matchMedia &&
+		window.matchMedia( '(prefers-color-scheme: dark)' ).matches
+	) {
+		return THEME_DARK;
+	}
+	return THEME_LIGHT;
+}
+
 const ThemeProvider = ( { children } ) => {
-	const [ theme, setTheme ] = useState( 'dark' );
+	const [ theme, setTheme ] = useState( getPreferredColorScheme );
+
+	useEffect( () => {
+		const colorSchemeMediaQuery = window.matchMedia(
+			'(prefers-color-scheme: dark)'
+		);
+
+		const handleChange = ( event ) => {
+			setTheme( event.matches ? THEME_DARK : THEME_LIGHT );
+		};
+
+		colorSchemeMediaQuery.addEventListener( 'change', handleChange );
+
+		return () => {
+			colorSchemeMediaQuery.removeEventListener( 'change', handleChange );
+		};
+	}, [] );
 
 	const toggleTheme = () => {
 		setTheme( ( prevTheme ) =>
diff --git a/tests/cypress/integration/wp-module-support/siteGen.cy.js b/tests/cypress/integration/wp-module-support/siteGen.cy.js
index 5c2c1a8e5..4312e9fcb 100644
--- a/tests/cypress/integration/wp-module-support/siteGen.cy.js
+++ b/tests/cypress/integration/wp-module-support/siteGen.cy.js
@@ -6,22 +6,22 @@ export const AdminBarCheck = () => {
 	);
 };
 
-export const DarkBGCheck = () => {
+export const LightBGCheck = () => {
 	cy.wait( 2000 );
-	// When the page loads, it should have dark background by default
-	cy.get( '.nfd-onboarding-sitegen-dark' ).should( 'be.visible' );
+	// When the page loads, it should have light background by default
+	cy.get( '.nfd-onboarding-sitegen-light' ).should( 'be.visible' );
 };
 
-export const LightBGCheck = () => {
-	cy.get( '.nfd-onboarding-toggle__theme__button__dark' )
-		.should( 'exist' )
-		.click();
-	cy.get( '.nfd-onboarding-sitegen-light' ).should( 'be.visible' );
-	// Now changing the background back to dark
+export const DarkBGCheck = () => {
 	cy.get( '.nfd-onboarding-toggle__theme__button__light' )
 		.should( 'exist' )
 		.click();
 	cy.get( '.nfd-onboarding-sitegen-dark' ).should( 'be.visible' );
+	// Now changing the background back to light
+	cy.get( '.nfd-onboarding-toggle__theme__button__dark' )
+		.should( 'exist' )
+		.click();
+	cy.get( '.nfd-onboarding-sitegen-light' ).should( 'be.visible' );
 };
 
 export const ProgressBarCheck = ( WidthPercent ) => {