Press0 1328 default to light mode

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 ) =>

tests/cypress/integration/wp-module-support/siteGen.cy.js

@@ -6,7 +6,7 @@ export const AdminBarCheck = () => {
 	);
 };
 
-export const DarkBGCheck = () => {
+/* export const DarkBGCheck = () => {
 	cy.wait( 2000 );
 	// When the page loads, it should have dark background by default
 	cy.get( '.nfd-onboarding-sitegen-dark' ).should( 'be.visible' );
@@ -23,6 +23,25 @@ export const LightBGCheck = () => {
 		.click();
 	cy.get( '.nfd-onboarding-sitegen-dark' ).should( 'be.visible' );
 };
+ */
+
+export const LightBGCheck = () => {
+	cy.wait( 2000 );
+	// When the page loads, it should have light background by default
+	cy.get( '.nfd-onboarding-sitegen-light' ).should( 'be.visible' );
+};
+
+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 ) => {
 	cy.get( '.nfd-onboarding-header__progress-bar' ).should( 'be.visible' );