Merge pull request #2903 from evidence-dev/feat/custom-logo-light-dark

feat: allow different custom logo in light and dark mode

.changeset/hip-pumas-jam.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add lightLogo and darkLogo props to EvidenceDefaultLayout to show different custom logos in light/dark mode

e2e/basic/evidence.config.yaml

@@ -1,3 +1,7 @@
+appearance:
+  default: system
+  switcher: true
+
 plugins:
   components:
     # This loads all of evidence's core charts and UI components

e2e/basic/pages/+layout.svelte

@@ -0,0 +1,10 @@
+<script>
+	import '@evidence-dev/tailwind/fonts.css';
+	import '../app.css';
+	import { EvidenceDefaultLayout } from '@evidence-dev/core-components';
+	export let data;
+</script>
+
+<EvidenceDefaultLayout lightLogo="/lightLogo.png" darkLogo="/darkLogo.png" {data}>
+	<slot slot="content" />
+</EvidenceDefaultLayout>

e2e/basic/tests/tests.spec.js

@@ -1,6 +1,6 @@
 // @ts-check
 import { test, expect } from '@playwright/test';
-import { waitForPageToLoad } from '../../test-utils';
+import { getLogo, switchAppearance, waitForPageToLoad } from '../../test-utils';
 
 test('has title', async ({ page }) => {
 	await page.goto('/');
@@ -15,3 +15,16 @@ test('has hidden sidebar', async ({ page }) => {
 
 	await expect(page.getByRole('button', { name: 'Open sidebar' })).toBeVisible();
 });
+
+test('shows different logo in light and dark mode', async ({ page }) => {
+	await page.goto('/');
+	await waitForPageToLoad(page);
+
+	await switchAppearance(page, 'light');
+	let logo = await getLogo(page);
+	await expect(logo).toHaveAttribute('src', '/lightLogo.png');
+
+	await switchAppearance(page, 'dark');
+	logo = await getLogo(page);
+	await expect(logo).toHaveAttribute('src', '/darkLogo.png');
+});

e2e/test-utils.js

@@ -126,3 +126,11 @@ export const switchAppearance = async (page, appearance) => {
 		await closeKebabMenu(page);
 	}
 };
+
+/**
+ * @param {import('@playwright/test').Page} page
+ * @returns {Promise<import('@playwright/test').Locator>}
+ */
+export const getLogo = async (page) =>
+	// We render multiple logos and show/hide them in light/dark mode accordingly, so we need to get just the visible one here
+	page.getByAltText('Home', { exact: true }).locator('visible=true');

packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte

@@ -25,8 +25,12 @@
 	// Layout options
 	/** @type {string} */
 	export let title = undefined;
-	/** @type {string} */
+	/** @type {string | undefined} */
 	export let logo = undefined;
+	/** @type {string | undefined} */
+	export let lightLogo = undefined;
+	/** @type {string | undefined} */
+	export let darkLogo = undefined;
 	/** @type {boolean} */
 	export let neverShowQueries = false;
 	/** @type {boolean} */
@@ -137,6 +141,8 @@
 				bind:mobileSidebarOpen
 				{title}
 				{logo}
+				{lightLogo}
+				{darkLogo}
 				{neverShowQueries}
 				{fullWidth}
 				{maxWidth}

packages/ui/core-components/src/lib/organisms/layout/Logo.svelte

@@ -3,23 +3,30 @@
 	import evidenceLogoBlack from './wordmark-black.png';
 
 	import { addBasePath } from '@evidence-dev/sdk/utils/svelte';
+
+	/** @type {string | undefined} */
 	export let logo;
+
+	/** @type {string | undefined} */
+	export let lightLogo;
+
+	/** @type {string | undefined} */
+	export let darkLogo;
+
 	export let title;
 </script>
 
-{#if logo}
-	<img src={logo} alt="Home" class="h-5 aspect-auto" href={addBasePath('/')} />
-{:else if title}
+{#if title}
 	{title}
 {:else}
 	<img
-		src={evidenceLogoBlack}
+		src={logo ?? lightLogo ?? evidenceLogoBlack}
 		alt="Home"
 		class="h-5 aspect-auto block dark:hidden"
 		href={addBasePath('/')}
 	/>
 	<img
-		src={evidenceLogoWhite}
+		src={logo ?? darkLogo ?? evidenceLogoWhite}
 		alt="Home"
 		class="h-5 aspect-auto hidden dark:block"
 		href={addBasePath('/')}

packages/ui/core-components/src/lib/organisms/layout/header/Header.svelte

@@ -15,7 +15,12 @@
 
 	export let mobileSidebarOpen = undefined;
 	export let title = undefined;
+	/** @type {string | undefined} */
 	export let logo = undefined;
+	/** @type {string | undefined} */
+	export let lightLogo = undefined;
+	/** @type {string | undefined} */
+	export let darkLogo = undefined;
 	export let neverShowQueries = undefined;
 	export let fullWidth = undefined;
 	export let maxWidth = undefined;
@@ -42,7 +47,7 @@
 	>
 		{#if hideSidebar || sidebarFrontMatter === 'never'}
 			<a href={addBasePath('/')} class="block text-sm font-bold text-base-content">
-				<Logo {logo} {title} />
+				<Logo {logo} {lightLogo} {darkLogo} {title} />
 			</a>
 		{:else}
 			<div class="flex gap-x-4 items-center">
@@ -63,7 +68,7 @@
 					{/if}
 				</button>
 				<a href={addBasePath('/')} class="text-sm font-bold text-base-content hidden md:block">
-					<Logo {logo} {title} />
+					<Logo {logo} {lightLogo} {darkLogo} {title} />
 				</a>
 			</div>
 		{/if}

sites/docs/pages/reference/layouts/index.md

@@ -47,6 +47,8 @@ With a logo file in  `./static/my-logo.png`.
 </EvidenceDefaultLayout>
 ```
 
+If you want to use a different logo in light and dark mode, use the `lightLogo` and `darkLogo` props instead of `logo`.
+
 ## Options
 
 The `EvidenceDefaultLayout` component includes a number of features on every page that can be removed or customized via props
@@ -71,6 +73,24 @@ App title that will replace the Evidence Logo.
 
 Link to an image which will replace the Evidence logo. This will also override any app title in the header. If the image is in your project's static directory, the link should be relative to the static directory.
 
+</PropListing>
+<PropListing
+    name="lightLogo"
+    options="/lightLogo.png"
+    defaultValue=""
+>
+
+Link to an image which will replace the Evidence logo in light mode. This will also override any app title in the header. If the image is in your project's static directory, the link should be relative to the static directory.
+
+</PropListing>
+<PropListing
+    name="darkLogo"
+    options="/darkLogo.png"
+    defaultValue=""
+>
+
+Link to an image which will replace the Evidence logo in dark mode. This will also override any app title in the header. If the image is in your project's static directory, the link should be relative to the static directory.
+
 </PropListing>
 <PropListing
     name="homePageName"