# Theming

> Change the colors, strokes and fonts of the profile with a WellTheme, set up a dark theme that follows your site, and rename the SVG classes.

Every color, stroke width and opacity the renderer uses is part of a `WellTheme`. Pass the values you want to change; the rest come from `DEFAULT_WELL_THEME`.

```ts
import { WellRenderer } from '@welldot/render';

new WellRenderer(svgs, {
  theme: {
    lithology: { stroke: '#222222', strokeWidth: 1.5 },
    wellCase: { fill: '#f5f5f5', stroke: '#333333', strokeWidth: 2 },
    reduction: { fill: '#f5f5f5', stroke: '#333333', strokeWidth: 2 },
  },
});
```

The theme has one group per layer (`lithology`, `lithologyTexture`, `cave`, `fracture`, the construction groups such as `boreHole`, `wellCase`, `wellScreen`, `holeFill`, `centralizer`, `pump`), the label groups (`labels`, `constructionLabels`, `unitLabels`), and the groups of the optional layers (`legend`, `overview`, `columnHeaders`, `markers`, `overlap`). [`DEFAULT_WELL_THEME`](/render/api/variables/DEFAULT_WELL_THEME) in the API reference lists every key with its default.

Lithology colors come from the data (`lithology[].color`), not from the theme. The theme styles the outlines, patterns and everything around them.

## Dark mode

The default theme is for light backgrounds. On a dark page, override the label and annotation colors. This is the override the welldot.org editor and this site use:

```ts
import type { DeepPartial, WellTheme } from '@welldot/render';

export const DARK_THEME: DeepPartial<WellTheme> = {
  labels: {
    color: 'rgba(255,255,255,0.55)',
    bodyColor: 'rgba(255,255,255,0.40)',
    dividerStroke: 'rgba(255,255,255,0.15)',
    annotationBg: '#1a2230',
    depthTipFill: '#2a3344',
  },
  constructionLabels: {
    labelFill: '#1a2230',
    labelColor: 'rgba(255,255,255,0.65)',
  },
  unitLabels: {
    geologicFill: '#2a3344',
    aquiferFill: '#1e3250',
    stroke: 'rgba(255,255,255,0.15)',
  },
};
```

The theme is fixed when the renderer is created. To follow a color mode switch, create a new renderer with the other theme and draw again:

```ts
function render(dark: boolean) {
  const renderer = new WellRenderer(svgs, {
    renderConfig,
    ...(dark && { theme: DARK_THEME }),
  });
  return renderer.prepareSvg().then(() => renderer.draw(well));
}

// e.g. watch a class on <html>
new MutationObserver(() =>
  render(document.documentElement.classList.contains('dark')),
).observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['class'],
});
```

::tip
Test both themes with a well that has description labels and unit strips turned on: they are the parts that change most between light and dark.
::

## Patterns

The lithology patterns are SVG textures built with `textures.js` from the FGDC codes. `renderConfig.textures` adjusts them (for example the wellhead pad's concrete texture, `textures.pad`). The [FGDC texture reference](/format/spec/reference/fgdc-textures) lists which codes have a drawn pattern; a code without one falls back to the layer color.

## Class names

Every SVG element gets a class, so you can also style the drawing with CSS or hook tests on it. Rename the classes with the `classNames` option (a partial `ComponentsClassNames`), for example to fit a CSS naming scheme:

```ts
new WellRenderer(svgs, {
  classNames: { tooltip: { root: 'my-tooltip' } },
});
```