- Add darkUI and lightUI objects with all 25 CSS custom properties
- Add applyThemeUI() function to apply CSS vars via JavaScript
- Update useTheme.js to call applyThemeUI() instead of setAttribute
- Remove [data-theme="dark"] and [data-theme="light"] from index.css
- Custom themes can now override individual UI properties with cascade
- Update README.md to document the ui key and cascade behavior
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
All overlay layer add functions now read colors, opacities, and widths
from the theme registry instead of hardcoded dark/light branches.
registry.js changes:
- Add complete darkOverlay and lightOverlay config objects
- Each overlay layer has its own config section:
- hillshade: exaggeration, illuminationDirection, shadowColor, highlightColor
- traffic: opacity
- contours: colors, opacities, widths (with opacityMod), label styling
- contoursTest: cascades from contours, overrides colors
- contoursTest10ft: cascades from contours, overrides colors
- publicLands: per-category fill/outline colors and opacities, labels
- usfsTrails: roads/trails colors by use type, labels
- blmTrails: route colors by use class, labels
- Add getOverlayConfig(themeId, layerKey) function
- Contour variants cascade missing keys from same theme's contours
- Width values use self-documenting object format: { z11: 0.5, z14: 1.0 }
MapView.jsx changes:
- All 8 overlay add functions now take themeId parameter
- Functions call getOverlayConfig() to get merged config
- No hardcoded color/opacity/width values remain in overlay functions
- Theme switching re-adds all active overlays with new theme config
This is a refactor - light and dark themes render identically to before.
Custom themes can now override individual overlay styling values.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Introduces src/themes/registry.js with:
- getTheme(id) - lookup theme config by ID
- getThemeColors(id) - get flavor object (namedTheme for built-ins, custom colors for others)
- getThemeSprite(id) - get sprite URL with fallback for custom themes
- themeList() - list available themes for UI
Updates MapView.jsx:
- Import registry functions instead of namedTheme directly
- buildStyle() uses getThemeColors() and getThemeSprite()
- Overlay add functions use isCurrentThemeDark() helper that checks
registry dark flag instead of string comparison
Reference files:
- dark-flavor-reference.json - full namedTheme('dark') output (73 flat keys + pois + landcover)
- light-flavor-reference.json - full namedTheme('light') output
- README.md - schema documentation for creating custom themes
This is a refactor only - light/dark themes render identically to before.
Custom themes can now be added to registry.js with full flavor objects.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
