Theming & Dark Mode Demo

This example demonstrates how to customize the fullscreen control icons and colors. Dark mode is just one example of theming.

Features:

• Icon Theming: Uses mask-image to easily recolor icons using CSS
• CSS Variables: Override icon shapes via --fullscreen-icon-enter/exit
• Inline SVG: No external files needed, uses Data URIs
• Dark Mode: Automatic adaptation via prefers-color-scheme
• Manual Toggle: User-controlled theme switching

Try it:

• Click the button below to toggle dark/light mode
• Use the fullscreen button (top-left) to enter/exit fullscreen
• Notice how the control icons adapt to the theme

Toggle Dark Mode 🌓

Customization:

Override the icon variables in your CSS (supports URL or inline SVG data-uri):

:root {
  --fullscreen-icon-enter: url('data:image/svg+xml;...');
  --fullscreen-icon-exit: url('your-exit-icon.svg');
}

/* Optional: Change icon color */
.leaflet-fullscreen-icon::before {
  background-color: #ff0000;
}