Theme Integration
Map your application colors and fonts onto the ready-made views and custom surfaces.
Style a crossplot
Style 160 generated points. Zoom to inspect a cluster; hover for values. The point token follows the selected color.
X: Porosity · Y: Permeability
--outkrop-point: #3e8d70;
display={{ x: 'Porosity', y: 'Permeability', pointSize: 8 }}Map your app’s colors once, then let section and crossplot views follow the host theme. Use the live example to compare a fixed point color with a color column.
Set Shared Tokens
.plots {
color: #252520;
--outkrop-grid: rgba(0, 0, 0, 0.1);
--outkrop-point: #3e8d70;
--outkrop-font: 11px monospace;
}
[data-theme='dark'] .plots {
color: #eeeae0;
--outkrop-grid: rgba(255, 255, 255, 0.12);
--outkrop-plot: #151513;
}| Token | Affects |
|---|---|
--outkrop-text |
Labels, titles, wiggles |
--outkrop-line |
Axes and range-bar thumbs |
--outkrop-grid |
Grid and range-bar tracks |
--outkrop-spike |
Crosshair |
--outkrop-plot |
Plot background |
--outkrop-point |
Points without a color column or explicit color |
--outkrop-font |
Complete CSS font, e.g. 11px monospace |
Tokens inherit from ancestors. CSS color functions work where the browser supports them; set color-scheme for light-dark().
Override One View
Pass theme={{ text: '#222' }} to override that field. Other fields keep following the host. A crossplot’s display.pointColor beats the point token; a color column uses its selected scale.
Defaults and Updates
| Unset field | Default |
|---|---|
| Text | Inherited color at 80% opacity |
| Lines / crosshair | 50% |
| Grid | 10% |
| Font | Inherited family at 10px |
| Plot | Transparent |
Updates follow host/ancestor attribute, class and inline-style changes, plus system theme changes. If you replace a stylesheet independently, signal the theme change through the host too.
Style Custom Layers
useHostTheme(ref) subscribes; readHostTheme(element) reads once. The hook is null before mount/SSR; use DEFAULT_OUTKROP_THEME initially. Apply changed colors to your layers and request a frame—CSS does not recolor WebGL objects directly.