> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Gamma

export const GraphEmbed = ({src, story, aspectRatio, borderRadius = '14px', args}) => {
  const STORYBOOK_BASE_URL = typeof window !== 'undefined' && window.location.hostname === 'localhost' ? 'http://localhost:6006' : 'https://storybook-sdk.vercel.app';
  function buildArgsString(args) {
    if (!args) return '';
    const encodeValue = value => {
      if (value === null) return '!null';
      if (value === undefined) return '!undefined';
      if (typeof value === 'boolean') return `!${value}`;
      if (typeof value === 'number') return String(value);
      return encodeURIComponent(String(value));
    };
    const properties = Object.entries(args).map(([key, value]) => `${key}:${encodeValue(value)}`).join(';');
    return `&args=${properties}`;
  }
  const resolvedSrc = story ? `${STORYBOOK_BASE_URL}/iframe.html?id=${story}&viewMode=story&embed=1&globals=mode:readonly${buildArgsString(args)}` : src;
  const resolvedAspectRatio = aspectRatio ?? (story ? '16 / 9' : '10 / 6');
  return <iframe src={resolvedSrc} loading="lazy" allowfullscreen="true" style={{
    width: '100%',
    aspectRatio: resolvedAspectRatio,
    border: 'none',
    borderRadius,
    colorScheme: 'light'
  }} />;
};

Gamma is two themes drawn from Gamma's own look. Gamma Night puts graphs in the starred night sky behind Gamma's wordmark, every shape a pale glass that fades as it falls. Gamma Mushroom puts them in Gamma's mushroom forest under a summer sky, where bars are mushrooms whose caps end at their values.

<Warning>
  Both themes ship in one package, `@graphysdk/theme-gamma`, still on `0.x`. A
  minor release may change their look, so pin a caret range (`^0.1.0`) to take
  only patches. Tell us what works and what doesn't on
  [Discord](https://discord.gg/yGmYCjkSr).
</Warning>

<GraphEmbed story="themes-gamma-night--chart" args={{ chart: 'bar' }} aspectRatio="4 / 3" borderRadius="0" />

## Install

```bash theme={null}
npm install @graphysdk/theme-gamma
```

Its peer dependencies are `@graphysdk/react` and React 19. Pass one of the themes to `createGraphyKit` and import its fonts once:

```tsx theme={null}
import { createGraphyKit, GraphRenderer } from '@graphysdk/react';
import { gammaNight } from '@graphysdk/theme-gamma';
import '@graphysdk/theme-gamma/fonts.css';

const kit = createGraphyKit({ theme: gammaNight });
```

Every graph drawn through `kit.GraphProvider` takes the theme. The spec is written as usual and names no theme:

```tsx theme={null}
const spec = kit.pipe(
  kit.createSpec({ x: 'quarter', y: 'revenue', color: 'region' }),
  kit.geom.bar({ position: 'dodge' }),
  kit.scale.x(),
  kit.scale.y()
);

<kit.GraphProvider spec={spec} data={data}>
  <GraphRenderer />
</kit.GraphProvider>;
```

Without a kit, pass the theme to the provider instead: `<GraphProvider theme={gammaNight}>`.

The provider reads the theme once, when it mounts. To switch themes, remount the provider, for example with a React `key`.

## What the themes decide

| Part | Gamma Night | Gamma Mushroom |
| - | - | - |
| Stylesheet | A starred night sky fading from navy to indigo, rounded corners and no frame, a faint grid, the rule under the wordmark as baseline | A summer sky fading from blue to white, rounded corners and no frame, white grid lines, a navy baseline the mushrooms stand on |
| Colors | The wordmark's lavender, then pink, mint, gold, sky blue and coral for groups, and a ramp from the deep sky to the palest glass | The caps' coral, violet, pink, orange, purple and teal for groups, and a ramp from a pale pink through coral to violet |
| Geoms | Bars, slices and areas as glass that fades as it falls; lines as glass ribbons; a star at each reading; tiles keep the built-in renderer | Bars as mushrooms; a pie as the gilled underside of a cap; areas speckled like a cap; a cap at each reading; tiles keep the built-in renderer |
| Color scheme | Dark, whatever `colorScheme` the provider is given | Light, whatever `colorScheme` the provider is given |

<GraphEmbed story="themes-gamma-mushroom--chart" args={{ chart: 'line' }} aspectRatio="4 / 3" borderRadius="0" />

## Night or Mushroom

The two themes are separate exports of the same package, each drawn for one scheme. Pick the one that suits the page, or follow the reader's scheme. The provider reads its theme once, so pass the matching theme and remount the provider when the scheme changes:

```tsx theme={null}
import { gammaMushroom, gammaNight } from '@graphysdk/theme-gamma';

const theme = colorScheme === 'dark' ? gammaNight : gammaMushroom;

<GraphProvider key={colorScheme} theme={theme} spec={spec} data={data}>
  <GraphRenderer />
</GraphProvider>;
```

## Changing the look of one graph

A spec's own `styles()`, scales and `config()` sit above the theme. This graph keeps the night sky and draws its groups in the gold and mint only:

```tsx theme={null}
kit.pipe(spec, kit.scale.color.discrete({ range: ['#FFD66B', '#5FE0C1'] }));
```

The themes are drawn for a graph about 600 pixels wide. `style.graph({ textScale })` scales their type for a larger or smaller one.

## With a geom package

The themes repaint the built-in geoms only. A geom from a package, such as the [dumbbell](/sdk-next/graph-types/dumbbell), keeps its own shapes and is drawn in the theme's colors and type.

```tsx theme={null}
import { dumbbell } from '@graphysdk/geom-dumbbell';

const kit = createGraphyKit({ theme: gammaNight, plugins: [dumbbell] });
```

## Fonts

Gamma's own faces, ES Build for headings and PP Mori for text, cannot be served freely. The themes name them first and fall back to Plus Jakarta Sans and Inter. `fonts.css` loads Plus Jakarta Sans in weights 500, 700 and 800 and Inter in weights 400, 500 and 600 from Google Fonts. To host the fonts yourself, leave the import out and load families named `Plus Jakarta Sans` and `Inter`, or `ESBuild` and `PPMori` if you have Gamma's own, before the first graph is drawn.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.