Merge pull request #294 from OneBusAway/fix-292

feat: replace dark mode toggle with system preference detection

Author: aaronbrethorst

src/components/navigation/Header.svelte

@@ -6,7 +6,6 @@
 	} from '$env/static/public';
 
 	import { onMount } from 'svelte';
-	import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte';
 	import MobileMenu from './MobileMenu.svelte';
 
 	const showRegionName = __SHOW_REGION_NAME_IN_NAV_BAR__;
@@ -17,7 +16,6 @@
 	let linksContainer = $state(null);
 	let cachedLinksWidth = 0;
 
-	const THEME_SWITCHER_WIDTH = 56; // Width of the theme switcher component in pixels
 	const EXTRA_PADDING = 32; // Extra padding to account for padding and margins in pixels
 	const LINKS_GAP = '1rem'; // Matches gap-x-4 in the template
 	const LINK_PADDING = '0.25rem 0.5rem'; // Matches px-2 py-1 in the template
@@ -37,7 +35,7 @@
 
 		const navWidth = navContainer.clientWidth;
 		const logoWidth = navContainer.querySelector('.logo-container')?.clientWidth || 0;
-		const availableWidth = navWidth - logoWidth - THEME_SWITCHER_WIDTH - EXTRA_PADDING;
+		const availableWidth = navWidth - logoWidth - EXTRA_PADDING;
 
 		let linksWidth = 0;
 		if (linksContainer) {
@@ -137,30 +135,24 @@
 		</div>
 	{/if}
 
-	<div class="flex items-center">
-		{#if shouldShowMobile}
-			<button onclick={toggleNavbar} aria-label="Toggle navigation menu" class="mr-2">
-				<svg
-					class="burger-icon h-6 w-6 text-brand-foreground dark:text-surface-foreground-dark"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
-					xmlns="http://www.w3.org/2000/svg"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width="2"
-						d="M4 6h16M4 12h16m-7 6h7"
-					></path>
-				</svg>
-			</button>
-		{:else}
-			<div class={shouldShowMobile ? '' : 'flex'}>
-				<ThemeSwitcher />
-			</div>
-		{/if}
-	</div>
+	{#if shouldShowMobile}
+		<button onclick={toggleNavbar} aria-label="Toggle navigation menu" class="mr-2">
+			<svg
+				class="burger-icon h-6 w-6 text-brand-foreground dark:text-surface-foreground-dark"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M4 6h16M4 12h16m-7 6h7"
+				></path>
+			</svg>
+		</button>
+	{/if}
 </div>
 
 {#if isMobileMenuOpen}

src/components/navigation/MobileMenu.svelte

@@ -1,6 +1,5 @@
 <script>
 	import { fly } from 'svelte/transition';
-	import ThemeSwitcher from '$lib/ThemeSwitch/ThemeSwitcher.svelte';
 
 	let { headerLinks = {}, closeMenu } = $props();
 </script>
@@ -31,10 +30,6 @@
 			>
 		{/each}
 	</div>
-
-	<div>
-		<ThemeSwitcher />
-	</div>
 </div>
 
 <style lang="postcss">

src/components/navigation/__tests__/MobileMenu.test.js

@@ -96,19 +96,6 @@ describe('MobileMenu', () => {
 		expect(closeButton).toHaveAttribute('aria-label', 'Close Menu');
 	});
 
-	test('renders theme switcher component', () => {
-		render(MobileMenu, {
-			props: {
-				headerLinks: mockHeaderLinks,
-				closeMenu: mockCloseMenu
-			}
-		});
-
-		// Theme switcher should be present (it's a checkbox with sr-only class)
-		const themeToggle = screen.getByRole('checkbox', { name: 'Toggle theme' });
-		expect(themeToggle).toBeInTheDocument();
-	});
-
 	test('handles empty header links gracefully', () => {
 		render(MobileMenu, {
 			props: {
@@ -117,9 +104,8 @@ describe('MobileMenu', () => {
 			}
 		});
 
-		// Should still render close button and theme switcher
+		// Should still render close button
 		expect(screen.getByRole('button', { name: 'Close Menu' })).toBeInTheDocument();
-		expect(screen.getByRole('checkbox', { name: 'Toggle theme' })).toBeInTheDocument();
 	});
 
 	test('applies correct CSS classes for full-screen overlay', () => {
@@ -263,7 +249,6 @@ describe('MobileMenu', () => {
 
 		// Should render with empty headerLinks object
 		expect(screen.getByRole('button', { name: 'Close Menu' })).toBeInTheDocument();
-		expect(screen.getByRole('checkbox', { name: 'Toggle theme' })).toBeInTheDocument();
 	});
 
 	test('accessibility: close button can be focused', async () => {
@@ -298,40 +283,22 @@ describe('MobileMenu', () => {
 		expect(homeLink).toHaveFocus();
 	});
 
-	test('accessibility: theme switcher can be focused', async () => {
-		render(MobileMenu, {
-			props: {
-				headerLinks: mockHeaderLinks,
-				closeMenu: mockCloseMenu
-			}
-		});
-
-		const themeToggle = screen.getByRole('checkbox', { name: 'Toggle theme' });
-
-		// Focus the theme toggle
-		themeToggle.focus();
-		expect(themeToggle).toHaveFocus();
-	});
-
-	test('renders in correct order: close button, links, theme switcher', () => {
+	test('renders in correct order: close button, then links', () => {
 		const { container } = render(MobileMenu, {
 			props: {
 				headerLinks: mockHeaderLinks,
 				closeMenu: mockCloseMenu
 			}
 		});
 
-		const elements = Array.from(container.querySelectorAll('button, a, input'));
+		const elements = Array.from(container.querySelectorAll('button, a'));
 
 		// First element should be the close button
 		expect(elements[0]).toHaveAttribute('aria-label', 'Close Menu');
 
-		// Middle elements should be navigation links
+		// Rest should be navigation links
 		expect(elements[1]).toHaveAttribute('href', '/');
 		expect(elements[2]).toHaveAttribute('href', '/about');
-
-		// Last element should be theme toggle
-		expect(elements[elements.length - 1]).toHaveAttribute('aria-label', 'Toggle theme');
 	});
 
 	test('handles single navigation link', () => {

src/lib/ThemeSwitch/ThemeSwitcher.svelte

@@ -0,0 +1,27 @@
+import { browser } from '$app/environment';
+
+/**
+ * Initializes the system theme listener.
+ * Detects the user's system preference for dark/light mode and applies it.
+ * Listens for real-time changes to system preferences.
+ */
+export function initSystemTheme() {
+	if (!browser) return;
+
+	const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+	function applyTheme(isDark) {
+		document.documentElement.classList.toggle('dark', isDark);
+		// Dispatch event for map providers
+		window.dispatchEvent(new CustomEvent('themeChange', { detail: { darkMode: isDark } }));
+	}
+
+	// Apply initial theme
+	applyTheme(mediaQuery.matches);
+
+	// Listen for system preference changes
+	mediaQuery.addEventListener('change', (e) => applyTheme(e.matches));
+
+	// Clean up old localStorage preference
+	localStorage.removeItem('theme');
+}

src/lib/systemTheme.js

@@ -7,6 +7,7 @@
 	import { locale } from 'svelte-i18n';
 	import { onMount } from 'svelte';
 	import analytics from '$lib/Analytics/PlausibleAnalytics.js';
+	import { initSystemTheme } from '$lib/systemTheme.js';
 	import { env } from '$env/dynamic/public';
 
 	const faviconUrl = env.FAVICON_URL || '/favicon-32x32.png';
@@ -21,6 +22,8 @@
 	config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
 
 	onMount(() => {
+		initSystemTheme();
+
 		locale.subscribe((lang) => {
 			if (lang === 'ar') {
 				document.documentElement.classList.add('rtl');