# Class Themes

GoJS® Diagramming Components
version 3.0.13
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

Dark
Light

## Properties

### `Static` `Readonly` Dark

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'
      }
    }

### `Static` `Readonly` Light

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'
      }
    }

Copyright © 1998-2024 by Northwoods Software Corporation.