How to style the group toggle icon?

[metamorphosis-1]

Introduction

I have a stencil with closed groups in them; How can I give the group toggle icons that are now black another color using CSS? I'd like to give them the color defined in my CSS variable --primary-color

See screenshot:

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS+

[Aj2280]

In JointJS+ (joint.ui.Stencil), the collapse/expand toggle arrow is rendered via the pseudo-element .group-label::before on .group (and styled for its closed state with .group.closed .group-label::before).

Depending on whether your theme renders the icon as an SVG mask/background or a CSS border triangle, here is how you can color it with your --primary-color CSS variable:

Method 1: Using CSS mask (Recommended for SVG icons)

If the toggle icon is an SVG or background image, modern CSS allows you to mask a background color so it respects CSS variables:

/* Color the toggle icon with your CSS variable */
.joint-stencil .group > .group-label::before {
    background-color: var(--primary-color);
    -webkit-mask-image: inherit; /* or url("path/to/your/down-arrow.svg") */
    mask-image: inherit;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Maintain rotation on closed groups */
.joint-stencil .group.closed > .group-label::before {
    transform: rotate(-90deg); /* Adjust rotation degrees to match your theme */
}

Method 2: If using the classic border-triangle theme

If your Stencil theme renders the icon using CSS border triangles (like the default theme):

/* Open group: downward pointing triangle */
.joint-stencil .group > .group-label::before {
    border-top-color: var(--primary-color) !important;
}

/* Closed group: rightward pointing triangle */
.joint-stencil .group.closed > .group-label::before {
    border-left-color: var(--primary-color) !important;
    border-top-color: transparent !important;
}

Method 3: Using CSS filter

If you cannot alter the mask and the icon is an SVG background-image:

.joint-stencil .group > .group-label::before {
    filter: drop-shadow(0px 0px 0px var(--primary-color));
}

[metamorphosis-1]

Thanks, I used method 2 to set the color of the group toggle: