Class Themes

GoJS® Diagramming Components
version 3.0.1
by Northwoods Software®

This static class specifies the built in themes.

Light and Dark are the default light and dark themes initialized by the ThemeManager. Note that these themes are complete, so if you update values in the light theme, you'll also need to update the dark theme since the values exist in both and won't use a default fallback.

since

3.0

Index

Properties

Properties

The default dark theme used by ThemeManager. The name of this theme is "dark".

Defined as the following:

{
colors: {
text: '#f5f5f5', // Neutral 100
comment: '#facc15', // Yellow 400
link: '#f5f5f5', // Neutral 100
group: '#a3a3a388', // Neutral 400, partially transparent
outline: '#a3a3a3', // Neutral 400
selection: '#38bdf8', // Sky 400
div: '#171717', // Neutral 900
gridMinor: '#262626', // Neutral 800
gridMajor: '#404040', // Neutral 700
overviewBox: '#e879f9', // Fuschia 400
tempLink: '#60a5fa', // Blue 400
tempPort: '#e879f9', // Fuschia 400
adornmentFill: '#38bdf8', // Sky 400
adornmentStroke: '#2563eb', // Blue 600
dragSelect: '#e879f9' // Fuschia 400
},
fonts: {
normal: '10pt sans-serif',
bold: 'bold 12pt sans-serif'
},
numbers: {
group: 1, // group strokeWidth
selection: 3 // selection strokeWidth
},
margins: {
group: new Margin(5) // group padding
},
arrowheads: {
toArrow: 'Standard'
}
}

The default light theme used by ThemeManager. The name of this theme is "light".

Defined as the following:

{
colors: {
text: '#0a0a0a', // Neutral 950
comment: '#ca8a04', // Yellow 600
link: '#0a0a0a', // Neutral 950
group: '#a3a3a344', // Neutral 400, partially transparent
outline: '#a3a3a3', // Neutral 400
selection: '#0ea5e9', // Sky 500
div: '#fff',
gridMinor: '#e5e5e5', // Neutral 200
gridMajor: '#a3a3a3', // Neutral 400
overviewBox: '#c026d3', // Fuschia 600
tempLink: '#2563eb', // Blue 600
tempPort: '#c026d3', // Fuschia 600
adornmentFill: '#0ea5e9', // Sky 500
adornmentStroke: '#1e40af', // Blue 800
dragSelect: '#c026d3' // Fuschia 600
},
fonts: {
normal: '10pt sans-serif',
bold: 'bold 12pt sans-serif'
},
numbers: {
group: 1, // group strokeWidth
selection: 3 // selection strokeWidth
},
margins: {
group: new Margin(5) // group padding
},
arrowheads: {
toArrow: 'Standard'
}
}