feat(map): #37 theme-colored geolocation accuracy circle

src/components/map/LocationMarker/LocationMarker.test.tsx

@@ -44,6 +44,17 @@ vi.mock('leaflet', () => ({
   },
 }));
 
+// Mock the theme-color hook so the accuracy circle gets a deterministic,
+// theme-derived color (issue #37) without needing real DaisyUI CSS in jsdom.
+const THEME_COLOR = '#aabbcc';
+vi.mock('@/hooks/useEmbedThemeColor', () => ({
+  useEmbedThemeColor: () => ({
+    hex: 'aabbcc',
+    hexWithHash: THEME_COLOR,
+    isDark: false,
+  }),
+}));
+
 describe('LocationMarker', () => {
   const defaultProps: LocationMarkerProps = {
     position: [51.505, -0.09],
@@ -82,6 +93,18 @@ describe('LocationMarker', () => {
     expect(circle).toHaveAttribute('data-radius', '10');
   });
 
+  it('colors the accuracy circle with the theme primary, not a hardcoded blue (#37)', () => {
+    render(<LocationMarker {...defaultProps} showAccuracy />);
+
+    const circle = screen.getByTestId('accuracy-circle');
+    const options = JSON.parse(circle.getAttribute('data-options') || '{}');
+    expect(options.color).toBe(THEME_COLOR);
+    expect(options.fillColor).toBe(THEME_COLOR);
+    // Guard against regressing to the old hardcoded values.
+    expect(options.color).not.toBe('blue');
+    expect(options.fillColor).not.toBe('lightblue');
+  });
+
   it('should not render accuracy circle when showAccuracy is false', () => {
     const props = {
       ...defaultProps,

src/components/map/LocationMarker/LocationMarker.tsx

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 import { Marker, Circle, Popup, useMap } from 'react-leaflet';
 import L from 'leaflet';
 import type { LatLngTuple } from 'leaflet';
+import { useEmbedThemeColor } from '@/hooks/useEmbedThemeColor';
 
 export interface LocationMarkerProps {
   position: LatLngTuple;
@@ -42,6 +43,11 @@ export const LocationMarker: React.FC<LocationMarkerProps> = ({
 }) => {
   const map = useMap();
 
+  // Accuracy circle tracks the active DaisyUI theme's primary color (issue #37),
+  // matching the marker dot (which uses the `bg-primary` class). The hook
+  // re-renders on theme switch so the circle recolors live.
+  const { hexWithHash: themeColor } = useEmbedThemeColor('p');
+
   useEffect(() => {
     // Pan to user location when marker updates
     map.setView(position, map.getZoom());
@@ -62,8 +68,8 @@ export const LocationMarker: React.FC<LocationMarkerProps> = ({
           center={position}
           radius={accuracy}
           pathOptions={{
-            color: 'blue',
-            fillColor: 'lightblue',
+            color: themeColor,
+            fillColor: themeColor,
             fillOpacity: 0.2,
             weight: 1,
           }}