Skip to content
On this page

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>

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.

teal
#b2dfdb lighten
#4db6ac gly-teal
#00796b darken
lime
#f0f4c3 lighten
#dce775 gly-lime
#afb42b darken
green
#c8e6c9 lighten
#81c784 gly-green
#388e3c darken
red
#ffcdd2 lighten
#e57373 gly-red
#d32f2f darken
magenta
#f8bbd0 lighten
#f06292 gly-magenta
#c2185b darken
orange
#ffe0b2 lighten
#ffb74d gly-orange
#f57c00 darken
blue
#b3e5fc lighten
#4fc3f7 gly-blue
#1486c9 darken
purple
#d1c4e9 lighten
#9575cd gly-purple
#4c3b8f darken
gray
#e5e5e5 lighten
#a6a6a6 gly-gray
#595959 darken
black
#1a1a1a gly-black
white
#ffffff gly-white