@linkurious/ogma-styles

Ogma styling themes

Usage no npm install needed!

<script type="module">
  import linkuriousOgmaStyles from 'https://cdn.skypack.dev/@linkurious/ogma-styles';
</script>

README

Ogma styles

This is a repositiory of style presets for Ogma graph visualisation library. You can use them in your prototypes and applications.

Demo

How to use

import Ogma from '@linkurious/ogma';
import { midsummerNight as theme } from '@linkurious/ogma-styles'

const ogma = new Ogma({ ... });
ogma.styles.setTheme(theme);

"Midsummer night" theme

Midsummer night

import Ogma from '@linkurious/ogma';
import { midsummerNight as theme } from '@linkurious/ogma-styles'

const ogma = new Ogma({
  ...
});

ogma.styles.setTheme(theme);

// you can also use the theme's colors for your UI
console.log(theme.colors.red); // '#df162e'

Additional variables

midsummer-night exports several constants for you to apply when you need conditional styling.

  edgeOutlineWidth: 2,
  edgeHaloWidth: 8,
  nodeHaloWidth: 20,

  // you can also use different colors for the nodes and edges
  colors: {}

Color palette

Midsummer night color palette

Compose your own style

You can follow the examples in src to create your own theme. The repositiory uses TypeScript for checking the types of attributes, so you will not get lost. You can always try out your theme in Ogma playground If you want to share it, send us a pull request and we will check and publish it.

"Afternoon nap" theme

Afternoon nap Afternoon nap with badges

import Ogma from '@linkurious/ogma';
import { afternoonNap as theme } from '@linkurious/ogma-styles'

const ogma = new Ogma({
  ...
});

ogma.styles.setTheme(theme);

// you can also use the theme's constants for your UI
console.log(theme.colors.nodeHaloWidth); // 40

"Morning breeze" theme

Midsummer night Midsummer night with halos

import Ogma from '@linkurious/ogma';
import { morningBreeze as theme } from '@linkurious/ogma-styles'

const ogma = new Ogma({
  ...
});

ogma.styles.setTheme(theme);

// you can also use the theme's constants for your UI
console.log(theme.colors.nodeHaloWidth); // 40

Copyright

Linkurious SAS © 2021