Dynamically change color scheme from color_scheme query param

client/jetpack-connect/schema.js

@@ -43,5 +43,6 @@ export const authorizeQueryDataSchema = {
 		allow_site_connection: { type: 'string' }, // '1' if true
 		installed_ext_success: { type: 'string' }, // '1' if true
 		plugin_name: { type: 'string' },
+		color_scheme: { type: 'string' },
 	},
 };

client/layout/color-scheme/index.jsx

@@ -16,6 +16,22 @@ export function getColorScheme( { state, isGlobalSidebarVisible, sectionName } )
 	return siteColorScheme ?? calypsoColorScheme;
 }
 
+export function getColorSchemeFromCurrentQuery( currentQuery, defaultColorScheme = 'default' ) {
+	if ( currentQuery?.color_scheme ) {
+		return currentQuery.color_scheme;
+	}
+
+	if ( currentQuery?.redirect_to ) {
+		try {
+			return new URLSearchParams( currentQuery.redirect_to ).get( 'color_scheme' );
+		} catch ( error ) {
+			return defaultColorScheme;
+		}
+	}
+
+	return defaultColorScheme;
+}
+
 export function refreshColorScheme( prevColorScheme, nextColorScheme ) {
 	if ( typeof document === 'undefined' ) {
 		return;

client/layout/index.jsx

@@ -61,7 +61,7 @@ import {
 	masterbarIsVisible,
 } from 'calypso/state/ui/selectors';
 import BodySectionCssClass from './body-section-css-class';
-import { getColorScheme, refreshColorScheme } from './color-scheme';
+import { getColorScheme, getColorSchemeFromCurrentQuery, refreshColorScheme } from './color-scheme';
 import GlobalNotifications from './global-notifications';
 import LayoutLoader from './loader';
 import { shouldLoadInlineHelp, handleScroll } from './utils';
@@ -504,11 +504,13 @@ export default withCurrentRoute(
 		const userAllowedToHelpCenter =
 			config.isEnabled( 'calypso/help-center' ) && ! getIsOnboardingAffiliateFlow( state );
 
-		const colorScheme = getColorScheme( {
-			state,
-			sectionName,
-			isGlobalSidebarVisible,
-		} );
+		const colorScheme = isWooPasswordlessJPC
+			? getColorSchemeFromCurrentQuery( currentQuery )
+			: getColorScheme( {
+					state,
+					isGlobalSidebarVisible,
+					sectionName,
+			  } );
 
 		return {
 			masterbarIsHidden,

client/layout/logged-out.jsx

@@ -5,6 +5,7 @@ import { UniversalNavbarHeader, UniversalNavbarFooter } from '@automattic/wpcom-
 import clsx from 'clsx';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
+import { useEffect } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { CookieBannerContainerSSR } from 'calypso/blocks/cookie-banner';
 import ReaderJoinConversationDialog from 'calypso/blocks/reader-join-conversation/dialog';
@@ -48,6 +49,7 @@ import getWccomFrom from 'calypso/state/selectors/get-wccom-from';
 import isWooPasswordlessJPCFlow from 'calypso/state/selectors/is-woo-passwordless-jpc-flow';
 import { masterbarIsVisible } from 'calypso/state/ui/selectors';
 import BodySectionCssClass from './body-section-css-class';
+import { refreshColorScheme, getColorSchemeFromCurrentQuery } from './color-scheme';
 
 import './style.scss';
 
@@ -81,6 +83,7 @@ const LayoutLoggedOut = ( {
 	twoFactorEnabled,
 	/* eslint-disable no-shadow */
 	clearLastActionRequiresLogin,
+	colorScheme,
 } ) => {
 	const localizeUrl = useLocalizeUrl();
 	const isLoggedIn = useSelector( isUserLoggedIn );
@@ -153,6 +156,10 @@ const LayoutLoggedOut = ( {
 
 	let masterbar = null;
 
+	useEffect( () => {
+		isWooPasswordlessJPC && refreshColorScheme( 'default', colorScheme );
+	}, [] ); // Empty dependency array ensures it runs only once on mount
+
 	// Open new window to create account page when a logged in action was triggered on the Reader tag embed page and the user is not logged in
 	if ( ! isLoggedIn && loggedInAction && isReaderTagEmbed ) {
 		const { pathname } = getUrlParts( window.location.href );
@@ -366,6 +373,10 @@ export default withCurrentRoute(
 				noMasterbarForRoute;
 			const twoFactorEnabled = isTwoFactorEnabled( state );
 
+			const colorScheme = isWooPasswordlessJPC
+				? getColorSchemeFromCurrentQuery( currentQuery )
+				: null;
+
 			return {
 				isJetpackLogin,
 				isWhiteLogin,
@@ -389,6 +400,7 @@ export default withCurrentRoute(
 				isWooPasswordless: getIsWooPasswordless( state ),
 				isBlazePro: getIsBlazePro( state ),
 				twoFactorEnabled,
+				colorScheme,
 			};
 		},
 		{ clearLastActionRequiresLogin }

client/layout/masterbar/woo.scss

@@ -185,7 +185,7 @@ $breakpoint-mobile: 660px;
 
 		.progress-bar__progress {
 			border-radius: 0;
-			background-color: var(--wp-admin-theme-color);
+			background-color: var(--color-primary);
 		}
 	}
 
@@ -964,7 +964,7 @@ $breakpoint-mobile: 660px;
 			height: 48px;
 			padding: 10px 16px;
 			font-weight: 500;
-			background-color: var(--wp-admin-theme-color);
+			background-color: var(--color-primary);
 		}
 
 		.two-factor-authentication__actions.card button.button {
@@ -1927,11 +1927,11 @@ $breakpoint-mobile: 660px;
 		}
 
 		button.button.is-primary {
-			background-color: var(--wp-admin-theme-color);
+			background-color: var(--color-primary);
 			font-family: inherit;
 			border-radius: 2px;
 			&:hover:not(:disabled) {
-				background-color: var(--wp-admin-theme-color);
+				background-color: var(--color-primary);
 			}
 		}
 
@@ -2119,4 +2119,4 @@ $breakpoint-mobile: 660px;
 			}
 		}
 	}
-}
+}