Sequence drag and drop colours

All you need to do is execute a JavaScript trigger when the timeline starts using the code below. Focus only on the "theme" section of the code. This is where you define your custom colors, placed next to the descriptions indicating which feature or part of the shapes will be affected.

var theme = {
  dragShapeFill: "#3B2F2F",      // Background of the draggable item
  dragShapeStroke: "#D97706",    // Border of the draggable item
  dragShapeStrokeWidth: "2px",  // Border width of the draggable item
  
  hoverStroke: "#C2410C",        // Border when mouse is over item
  hoverFill: "#F4A261",          // Background when mouse is over item
  
  dragText: "#FFF7ED",           // Text color inside the drag container
  
  numberCircle: "#F6C453",       // The circular background for sequence numbers
  numberText: "#3B2F2F"          // The actual digit color inside the circle
};

var style = document.createElement("style");

style.innerHTML = `

.slide-object-dragdrop-shape,
.slide-object-dragdrop-shape rect {
  fill: ${theme.dragShapeFill} !important;
  stroke: ${theme.dragShapeStroke} !important;
  stroke-width: ${theme.dragShapeStrokeWidth} !important;
}

.slide-object-dragitem-hover .slide-object-dragdrop-shape {
  stroke: ${theme.hoverStroke} !important;
  fill: ${theme.hoverFill} !important;
}

.sequence-ctrl-drag-container text,
.sequence-ctrl-drag-container tspan {
  fill: ${theme.dragText} !important;
}

.sequence-ctrl-num circle {
  fill: ${theme.numberCircle} !important;
}

.sequence-ctrl-num text,
.sequence-ctrl-num tspan {
  fill: ${theme.numberText} !important;
}
`;

document.head.appendChild(style);