Template Styles
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.
Dark mode
The dark mode of Graphly D3 is applied if the containing <svg>
element has the class dark
.
<svg class="dark">...</svg>
TIP
Take a look at OnThemeChange
and ThemeStyle
to get more control over your templates behavior on theme changes.
Utilities
Graphly D3 also provides a few utility classes that can be handy when styling the template.
.gly_animated
gives the element an transition proeprty to animate the style changes.noselect
prevents the element from being selected.hidden
sets the element opacity to 0
Texts
The .gly_text
class applies a consistent style to all text elements. It can also be paired with the classes:
.light
for light text.dark
for dark text.white
for white text.black
for black text
The special behavior of .light
and .dark
is that they are swapped if the dark mode is applied while .white
and .black
stay consistent.
Color Palette
Graphly D3 also provides ten different colors in multiple shades to use in your templates. Each base color also has corrosponding classes for fill
and stroke
– .gly_<color>_fill
and .gly_<color>_stroke
. Those classes can be paired with .lighten
and .darken
to access the light and dark shades of the color.