Merge pull request #4103 from Codeinwp/fix/light-dark-logo

fix: dark-mode logo shown in light-mode on first visit [#4087]

e2e-tests/fixtures/customizer/hfg/hfg-logo-component.json

@@ -37,5 +37,12 @@
 		"logo_title_font_size" : "{\"mobile\":65,\"tablet\":4.1,\"desktop\":3.5,\"suffix\":{\"mobile\":\"px\",\"desktop\":\"em\",\"tablet\":\"rem\"}}",
 		"logo_tagline_font_size" : "{\"mobile\":2.9,\"tablet\":0.9,\"desktop\":30,\"suffix\":{\"mobile\":\"rem\",\"desktop\":\"px\",\"tablet\":\"em\"}}",
 		"logo_color" : "#ff0000"
+	},
+	"palette": {
+		"nav_menu_locations": {
+			"primary": 176
+		},
+		"hfg_header_layout_v2": "{\"desktop\":{\"top\":{\"left\":[],\"c-left\":[],\"center\":[{\"id\":\"header_palette_switch\"}],\"c-right\":[],\"right\":[]},\"main\":{\"left\":[{\"id\":\"logo\"}],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[{\"id\":\"primary-menu\"}]},\"bottom\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]}},\"mobile\":{\"top\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"main\":{\"left\":[{\"id\":\"logo\"}],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[{\"id\":\"nav-icon\"}]},\"bottom\":{\"left\":[],\"c-left\":[],\"center\":[],\"c-right\":[],\"right\":[]},\"sidebar\":[{\"id\":\"primary-menu\"}]}}",
+		"logo_logo": ""
 	}
 }

e2e-tests/specs/customizer/hfg/hfg-logo-component.spec.ts

@@ -1,5 +1,9 @@
 import { test, expect, APIRequestContext, Page } from '@playwright/test';
-import { setCustomizeSettings, testForViewport } from '../../../utils';
+import {
+	setCustomizeSettings,
+	testForViewport,
+	visitAdminPage,
+} from '../../../utils';
 import data from '../../../fixtures/customizer/hfg/hfg-logo-component.json';
 
 interface TestOptions {
@@ -21,7 +25,9 @@ interface LogoComponentData {
 	style: {
 		// Define the shape of 'style' data
 	};
-	// Add more properties as needed
+	palette: {
+		// Define the shape of 'style' data
+	};
 }
 
 test.describe('Header Builder - Logo Component', function () {
@@ -75,6 +81,59 @@ test.describe('Header Builder - Logo Component', function () {
 	});
 });
 
+test.describe('Logo Component palette', function () {
+	let page: Page;
+	const logos: { id: string; url: string | null }[] = [];
+
+	test.beforeAll(async ({ browser, request, baseURL }) => {
+		page = await browser.newPage();
+		await visitAdminPage(page, 'upload.php', '');
+		await page.waitForSelector('.attachment');
+		const imageLocators = await page.locator('.attachment').count();
+
+		for (let i = 0; i < Math.min(imageLocators, 2); i++) {
+			const imageLocator = await page.locator(
+				`.attachment:nth-child(${i + 1})`
+			);
+			await imageLocator.click();
+			const urlString = page.url();
+			const url = new URL(urlString);
+			const imageId = url.searchParams.get('item') || '';
+			const imageUrl = await page
+				.locator('#attachment-details-two-column-copy-link')
+				.getAttribute('value');
+			logos.push({ id: imageId, url: imageUrl });
+			await page.goBack(); // Go back to the previous page to select the next image
+		}
+
+		const { palette } = data;
+
+		palette.logo_logo =
+			'{"dark":"' +
+			(logos[0]?.id || '') +
+			'","light":"' +
+			(logos[1]?.id || '') +
+			'","same":false}';
+
+		await setCustomizeSettings('hfgLogo', palette, {
+			request,
+			baseURL,
+		});
+	});
+
+	test('Check light/dark-mode logo', async () => {
+		await page.goto('/?test_name=hfgLogo');
+
+		const siteLogo = await page.locator('.desktop-left .neve-site-logo');
+
+		await expect(await siteLogo.getAttribute('src')).toBe(logos[1]?.url);
+
+		await page.locator('.icon > svg > path').click();
+
+		await expect(await siteLogo.getAttribute('src')).toBe(logos[0]?.url);
+	});
+});
+
 async function testAlignment(
 	alignment: 'Center' | 'Right' | 'Left',
 	testData: LogoComponentData,

header-footer-grid/Core/Components/PaletteSwitch.php

@@ -174,10 +174,12 @@ public function toggle_style() {
 	public function toggle_script() {
 		$auto_adjust   = Mods::get( $this->get_id() . '_' . self::AUTO_ADJUST, 0 );
 		$default_state = '"light"';
+
 		if ( $auto_adjust ) {
 			$default_state = 'window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"';
 		}
-		return '!function() {const e = "neve_user_theme";const t = "data-neve-theme";let n = ' . ( ! $auto_adjust && ! is_customize_preview() ? 'localStorage.getItem(e);' : $default_state ) . ';document.documentElement.setAttribute(t, n);document.addEventListener("click", (n => {if (n.target.matches(".palette-icon-wrapper, .palette-icon-wrapper *")) {(n => {n.preventDefault();const a = "light" === document.documentElement.getAttribute(t) ? "dark" : "light";document.documentElement.setAttribute(t, a);localStorage.setItem(e, a);})(n);}}));}();';
+
+		return '!function() {const e = "neve_user_theme";const t = "data-neve-theme";let n = ' . ( ! $auto_adjust && ! is_customize_preview() ? 'localStorage.getItem(e) || ' . $default_state : $default_state ) . ';document.documentElement.setAttribute(t, n);document.addEventListener("click", (n => {if (n.target.matches(".palette-icon-wrapper, .palette-icon-wrapper *")) {(n => {n.preventDefault();const a = "light" === document.documentElement.getAttribute(t) ? "dark" : "light";document.documentElement.setAttribute(t, a);localStorage.setItem(e, a);})(n);}}));}();';
 	}
 
 	/**