Custom Theme Example

Back to Examples

This example demonstrates how to customize cluster colors and styling using CSS Custom Properties (CSS Variables). The clusters use a vibrant blue → orange → pink color scheme with larger size (55px) and white text for better contrast.

Try the theme toggle: Use the button in the navigation above to switch between light mode (blue/orange/pink) and dark mode (neon cyan/yellow/pink)!

How to customize:

/* Add this to your CSS to override cluster colors */
:root {
  /* Small clusters: Blue */
  --marker-cluster-small-bg: 0 150 255;
  --marker-cluster-small-inner-bg: 0 100 200;
  
  /* Medium clusters: Orange */
  --marker-cluster-medium-bg: 255 140 0;
  --marker-cluster-medium-inner-bg: 200 100 0;
  
  /* Large clusters: Pink */
  --marker-cluster-large-bg: 255 50 100;
  --marker-cluster-large-inner-bg: 200 20 70;
  
  /* Opacity and sizes */
  --marker-cluster-opacity: 85%;
  --marker-cluster-size: 55px;
  --marker-cluster-inner-size: 45px;
  
  /* Text styling */
  --marker-cluster-text-color: #fff;
  --marker-cluster-font-size: 14px;
}

/* Dark mode (automatic based on system preference) */
@media (prefers-color-scheme: dark) {
  :root {
    --marker-cluster-small-bg: 50 255 200;   /* Neon cyan */
    --marker-cluster-medium-bg: 255 220 50;  /* Neon yellow */
    --marker-cluster-large-bg: 255 80 150;   /* Neon pink */
    --marker-cluster-text-color: #000;       /* Dark text for neon */
  }
}

All available CSS Custom Properties: Check dist/MarkerCluster.Default.css to see all customizable variables for colors, sizes, opacity, and typography.