colors/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <style>
    html, body, #diagram {
      height: 100%
    }

    .highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
      fill: green !important; /* color elements as green */
    }

    .highlight-overlay {
      background-color: green; /* color elements as green */
      opacity: 0.4;
      pointer-events: none; /* no pointer events, allows clicking through onto the element */
      border-radius: 10px;
    }
  </style>

  <!--
    this is an example of how to add colors to your BPMN diagram using bpmn-js
  -->

  <title>bpmn-js colors example - bpmn-js-examples</title>
</head>
<body>

  <h1>bpmn-js Colors</h1>

  <div id="diagram"></div>

  <!-- required modeler styles -->
  <link rel="stylesheet" href="https://unpkg.com/bpmn-js@18.0.0/dist/assets/diagram-js.css">
  <link rel="stylesheet" href="https://unpkg.com/bpmn-js@18.0.0/dist/assets/bpmn-js.css">
  <link rel="stylesheet" href="https://unpkg.com/bpmn-js@18.0.0/dist/assets/bpmn-font/css/bpmn.css">

  <!-- modeler distro -->
  <script src="https://unpkg.com/bpmn-js@18.0.0/dist/bpmn-modeler.development.js"></script>

  <!-- jquery (required for example only) -->
  <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>

  <!-- app -->
  <script>

    var viewer = new BpmnJS({
      container: '#diagram'
    });

    async function showDiagram(diagramXML) {

      await viewer.importXML(diagramXML);

      var overlays = viewer.get('overlays'),
          canvas = viewer.get('canvas'),
          elementRegistry = viewer.get('elementRegistry'),
          modeling = viewer.get('modeling');

      // Option 1: Color via Overlay
      var shape = elementRegistry.get('CalmCustomerTask');

      var $overlayHtml = $('<div class="highlight-overlay">')
                              .css({
                                width: shape.width,
                                height: shape.height
                              });

      overlays.add('CalmCustomerTask', {
        position: {
          top: 0,
          left: 0
        },
        html: $overlayHtml
      });

      // Option 2: Color via BPMN 2.0 Extension
      var elementToColor = elementRegistry.get('SelectAPizzaTask');

      modeling.setColor([ elementToColor ], {
        stroke: 'green',
        fill: 'rgb(152, 203, 152)'
      });

      // Option 3: Color via Marker + CSS Styling
      canvas.addMarker('OrderReceivedEvent', 'highlight');

    }

    // load + show diagram
    $.get('https://cdn.statically.io/gh/bpmn-io/bpmn-js-examples/main/colors/resources/pizza-collaboration.bpmn', showDiagram, 'text');
  </script>
</body>
</html>