README
Ogma styles
This is a repositiory of style presets for Ogma graph visualisation library. You can use them in your prototypes and applications.
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
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
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
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
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