marker.js 2 Demos: Customize marker.js 2 UI

Customize marker.js 2 UI

You can make marker.js 2 UI fit your design theme by customizing its UI colors.

The demo below uses Tailwind CSS classes (also used throughout this site) to make marker.js UI blend into the page.

Click on the image to launch the demo and look at the code below.

Open in CodeSandbox

Code

We are just setting uiStyleSettings class names for the MarkerArea to the appropriate Tailwind CSS classes:

markerArea.uiStyleSettings.toolbarStyleColorsClassName = 'bg-gray-50';
markerArea.uiStyleSettings.toolbarButtonStyleColorsClassName =
  'bg-gradient-to-t from-gray-50 to-gray-50 hover:from-gray-50 hover:to-pink-50 fill-current text-pink-300';
markerArea.uiStyleSettings.toolbarActiveButtonStyleColorsClassName =
  'bg-gradient-to-t from-pink-100 via-gray-50 to-gray-50 fill-current text-pink-400';
markerArea.uiStyleSettings.toolbarOverflowBlockStyleColorsClassName = "bg-gray-50";

markerArea.uiStyleSettings.toolboxColor = '#F472B6';
markerArea.uiStyleSettings.toolboxAccentColor = '#BE185D';
markerArea.uiStyleSettings.toolboxStyleColorsClassName = 'bg-gray-50';
markerArea.uiStyleSettings.toolboxButtonRowStyleColorsClassName = 'bg-gray-50';
markerArea.uiStyleSettings.toolboxPanelRowStyleColorsClassName =
  'bg-pink-100 bg-opacity-90 fill-current text-pink-400';
markerArea.uiStyleSettings.toolboxButtonStyleColorsClassName =
  'bg-gradient-to-t from-gray-50 to-gray-50 hover:from-gray-50 hover:to-pink-50 fill-current text-pink-300';
markerArea.uiStyleSettings.toolboxActiveButtonStyleColorsClassName =
  'bg-gradient-to-b from-pink-100 to-gray-50 fill-current text-pink-400';

Obviously, you can use your own CSS classes or just set specific colors via the xxxYyyColor properties. See UI customization documentation for details.

Here's a complete HTML file to recreate this demo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customize UI demo</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <script src="https://unpkg.com/markerjs2/markerjs2.js"></script>
  <script>
    function showMarkerArea(target) {
      const markerArea = new markerjs2.MarkerArea(target);
      markerArea.addEventListener("render", (event) => (target.src = event.dataUrl));

      markerArea.uiStyleSettings.toolbarStyleColorsClassName = 'bg-gray-50';
      markerArea.uiStyleSettings.toolbarButtonStyleColorsClassName =
        'bg-gradient-to-t from-gray-50 to-gray-50 hover:from-gray-50 hover:to-pink-50 fill-current text-pink-300';
      markerArea.uiStyleSettings.toolbarActiveButtonStyleColorsClassName =
        'bg-gradient-to-t from-pink-100 via-gray-50 to-gray-50 fill-current text-pink-400';
      markerArea.uiStyleSettings.toolbarOverflowBlockStyleColorsClassName = "bg-gray-50";
      
      markerArea.uiStyleSettings.toolboxColor = '#F472B6',
      markerArea.uiStyleSettings.toolboxAccentColor = '#BE185D',
      markerArea.uiStyleSettings.toolboxStyleColorsClassName = 'bg-gray-50';
      markerArea.uiStyleSettings.toolboxButtonRowStyleColorsClassName = 'bg-gray-50';
      markerArea.uiStyleSettings.toolboxPanelRowStyleColorsClassName =
        'bg-pink-100 bg-opacity-90 fill-current text-pink-400';
      markerArea.uiStyleSettings.toolboxButtonStyleColorsClassName =
        'bg-gradient-to-t from-gray-50 to-gray-50 hover:from-gray-50 hover:to-pink-50 fill-current text-pink-300';
      markerArea.uiStyleSettings.toolboxActiveButtonStyleColorsClassName =
        'bg-gradient-to-b from-pink-100 to-gray-50 fill-current text-pink-400';

      markerArea.show();
    }
  </script>
</head>
<body class="bg-gray-50">

  <div style="display: flex; flex-direction: column; align-items: center; padding-top: 50px;">
    <img src="img/sample-1.jpg" style="max-width: 600px;" onclick="showMarkerArea(this);" />
  </div>
</body>
</html>

Check out a simple self-contained page for this demo.

« Previous demoNext demo »