Theming

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.

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 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:

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:

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'],
});

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 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:

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