Graphly D3 brings a number of css styles out of the box to style the templates and shapes. This does also work well with the native light and dark mode.
The dark mode of Graphly D3 is applied if the containing
<svg> element has the class
Graphly D3 also provides a few utility classes that can be handy when styling the template.
.gly_animatedgives the element an transition proeprty to animate the style changes
.noselectprevents the element from being selected
.hiddensets the element opacity to 0
.gly_text class applies a consistent style to all text elements. It can also be paired with the classes:
.lightfor light text
.darkfor dark text
.whitefor white text
.blackfor black text
The special behavior of
.dark is that they are swapped if the dark mode is applied while
.black stay consistent.
Graphly D3 also provides ten different colors in multiple shades to use in your templates. Each base color also has corrosponding classes for
.gly_<color>_stroke. Those classes can be paired with
.darken to access the light and dark shades of the color.