[{"data":1,"prerenderedAt":1383},["ShallowReactive",2],{"page-\u002Frender\u002Fguides\u002Ftheming":3,"navigation":1000},{"collection":4,"page":5},"docs_en",{"id":6,"title":7,"body":8,"description":992,"extension":993,"meta":994,"navigation":74,"path":995,"rawbody":996,"seo":997,"stem":998,"__hash__":999},"docs_en\u002Frender\u002F2.guides\u002F3.theming.md","Theming",{"type":9,"value":10,"toc":987},"minimark",[11,24,247,316,323,328,331,612,615,881,887,891,911,915,926,983],[12,13,14,15,19,20,23],"p",{},"Every color, stroke width and opacity the renderer uses is part of a ",[16,17,18],"code",{},"WellTheme",". Pass the values you want to change; the rest come from ",[16,21,22],{},"DEFAULT_WELL_THEME",".",[25,26,31],"pre",{"className":27,"code":28,"language":29,"meta":30,"style":30},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { WellRenderer } from '@welldot\u002Frender';\n\nnew WellRenderer(svgs, {\n  theme: {\n    lithology: { stroke: '#222222', strokeWidth: 1.5 },\n    wellCase: { fill: '#f5f5f5', stroke: '#333333', strokeWidth: 2 },\n    reduction: { fill: '#f5f5f5', stroke: '#333333', strokeWidth: 2 },\n  },\n});\n","ts","",[16,32,33,69,76,94,106,142,188,230,236],{"__ignoreMap":30},[34,35,38,42,46,50,53,56,59,63,66],"span",{"class":36,"line":37},"line",1,[34,39,41],{"class":40},"s7zQu","import",[34,43,45],{"class":44},"sMK4o"," {",[34,47,49],{"class":48},"sTEyZ"," WellRenderer",[34,51,52],{"class":44}," }",[34,54,55],{"class":40}," from",[34,57,58],{"class":44}," '",[34,60,62],{"class":61},"sfazB","@welldot\u002Frender",[34,64,65],{"class":44},"'",[34,67,68],{"class":44},";\n",[34,70,72],{"class":36,"line":71},2,[34,73,75],{"emptyLinePlaceholder":74},true,"\n",[34,77,79,82,85,88,91],{"class":36,"line":78},3,[34,80,81],{"class":44},"new",[34,83,49],{"class":84},"s2Zo4",[34,86,87],{"class":48},"(svgs",[34,89,90],{"class":44},",",[34,92,93],{"class":44}," {\n",[34,95,97,101,104],{"class":36,"line":96},4,[34,98,100],{"class":99},"swJcz","  theme",[34,102,103],{"class":44},":",[34,105,93],{"class":44},[34,107,109,112,114,116,119,121,123,126,128,130,133,135,139],{"class":36,"line":108},5,[34,110,111],{"class":99},"    lithology",[34,113,103],{"class":44},[34,115,45],{"class":44},[34,117,118],{"class":99}," stroke",[34,120,103],{"class":44},[34,122,58],{"class":44},[34,124,125],{"class":61},"#222222",[34,127,65],{"class":44},[34,129,90],{"class":44},[34,131,132],{"class":99}," strokeWidth",[34,134,103],{"class":44},[34,136,138],{"class":137},"sbssI"," 1.5",[34,140,141],{"class":44}," },\n",[34,143,145,148,150,152,155,157,159,162,164,166,168,170,172,175,177,179,181,183,186],{"class":36,"line":144},6,[34,146,147],{"class":99},"    wellCase",[34,149,103],{"class":44},[34,151,45],{"class":44},[34,153,154],{"class":99}," fill",[34,156,103],{"class":44},[34,158,58],{"class":44},[34,160,161],{"class":61},"#f5f5f5",[34,163,65],{"class":44},[34,165,90],{"class":44},[34,167,118],{"class":99},[34,169,103],{"class":44},[34,171,58],{"class":44},[34,173,174],{"class":61},"#333333",[34,176,65],{"class":44},[34,178,90],{"class":44},[34,180,132],{"class":99},[34,182,103],{"class":44},[34,184,185],{"class":137}," 2",[34,187,141],{"class":44},[34,189,191,194,196,198,200,202,204,206,208,210,212,214,216,218,220,222,224,226,228],{"class":36,"line":190},7,[34,192,193],{"class":99},"    reduction",[34,195,103],{"class":44},[34,197,45],{"class":44},[34,199,154],{"class":99},[34,201,103],{"class":44},[34,203,58],{"class":44},[34,205,161],{"class":61},[34,207,65],{"class":44},[34,209,90],{"class":44},[34,211,118],{"class":99},[34,213,103],{"class":44},[34,215,58],{"class":44},[34,217,174],{"class":61},[34,219,65],{"class":44},[34,221,90],{"class":44},[34,223,132],{"class":99},[34,225,103],{"class":44},[34,227,185],{"class":137},[34,229,141],{"class":44},[34,231,233],{"class":36,"line":232},8,[34,234,235],{"class":44},"  },\n",[34,237,239,242,245],{"class":36,"line":238},9,[34,240,241],{"class":44},"}",[34,243,244],{"class":48},")",[34,246,68],{"class":44},[12,248,249,250,253,254,253,257,253,260,263,264,253,267,253,270,253,273,253,276,253,279,282,283,253,286,253,289,292,293,253,296,253,299,253,302,253,305,308,309,315],{},"The theme has one group per layer (",[16,251,252],{},"lithology",", ",[16,255,256],{},"lithologyTexture",[16,258,259],{},"cave",[16,261,262],{},"fracture",", the construction groups such as ",[16,265,266],{},"boreHole",[16,268,269],{},"wellCase",[16,271,272],{},"wellScreen",[16,274,275],{},"holeFill",[16,277,278],{},"centralizer",[16,280,281],{},"pump","), the label groups (",[16,284,285],{},"labels",[16,287,288],{},"constructionLabels",[16,290,291],{},"unitLabels","), and the groups of the optional layers (",[16,294,295],{},"legend",[16,297,298],{},"overview",[16,300,301],{},"columnHeaders",[16,303,304],{},"markers",[16,306,307],{},"overlap","). ",[310,311,313],"a",{"href":312},"\u002Frender\u002Fapi\u002Fvariables\u002FDEFAULT_WELL_THEME",[16,314,22],{}," in the API reference lists every key with its default.",[12,317,318,319,322],{},"Lithology colors come from the data (",[16,320,321],{},"lithology[].color","), not from the theme. The theme styles the outlines, patterns and everything around them.",[324,325,327],"h2",{"id":326},"dark-mode","Dark mode",[12,329,330],{},"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:",[25,332,334],{"className":27,"code":333,"language":29,"meta":30,"style":30},"import type { DeepPartial, WellTheme } from '@welldot\u002Frender';\n\nexport const DARK_THEME: DeepPartial\u003CWellTheme> = {\n  labels: {\n    color: 'rgba(255,255,255,0.55)',\n    bodyColor: 'rgba(255,255,255,0.40)',\n    dividerStroke: 'rgba(255,255,255,0.15)',\n    annotationBg: '#1a2230',\n    depthTipFill: '#2a3344',\n  },\n  constructionLabels: {\n    labelFill: '#1a2230',\n    labelColor: 'rgba(255,255,255,0.65)',\n  },\n  unitLabels: {\n    geologicFill: '#2a3344',\n    aquiferFill: '#1e3250',\n    stroke: 'rgba(255,255,255,0.15)',\n  },\n};\n",[16,335,336,365,369,399,408,425,441,457,473,489,494,504,520,537,542,552,568,585,601,606],{"__ignoreMap":30},[34,337,338,340,343,345,348,350,353,355,357,359,361,363],{"class":36,"line":37},[34,339,41],{"class":40},[34,341,342],{"class":40}," type",[34,344,45],{"class":44},[34,346,347],{"class":48}," DeepPartial",[34,349,90],{"class":44},[34,351,352],{"class":48}," WellTheme",[34,354,52],{"class":44},[34,356,55],{"class":40},[34,358,58],{"class":44},[34,360,62],{"class":61},[34,362,65],{"class":44},[34,364,68],{"class":44},[34,366,367],{"class":36,"line":71},[34,368,75],{"emptyLinePlaceholder":74},[34,370,371,374,378,381,383,386,389,391,394,397],{"class":36,"line":78},[34,372,373],{"class":40},"export",[34,375,377],{"class":376},"spNyl"," const",[34,379,380],{"class":48}," DARK_THEME",[34,382,103],{"class":44},[34,384,347],{"class":385},"sBMFI",[34,387,388],{"class":44},"\u003C",[34,390,18],{"class":385},[34,392,393],{"class":44},">",[34,395,396],{"class":44}," =",[34,398,93],{"class":44},[34,400,401,404,406],{"class":36,"line":96},[34,402,403],{"class":99},"  labels",[34,405,103],{"class":44},[34,407,93],{"class":44},[34,409,410,413,415,417,420,422],{"class":36,"line":108},[34,411,412],{"class":99},"    color",[34,414,103],{"class":44},[34,416,58],{"class":44},[34,418,419],{"class":61},"rgba(255,255,255,0.55)",[34,421,65],{"class":44},[34,423,424],{"class":44},",\n",[34,426,427,430,432,434,437,439],{"class":36,"line":144},[34,428,429],{"class":99},"    bodyColor",[34,431,103],{"class":44},[34,433,58],{"class":44},[34,435,436],{"class":61},"rgba(255,255,255,0.40)",[34,438,65],{"class":44},[34,440,424],{"class":44},[34,442,443,446,448,450,453,455],{"class":36,"line":190},[34,444,445],{"class":99},"    dividerStroke",[34,447,103],{"class":44},[34,449,58],{"class":44},[34,451,452],{"class":61},"rgba(255,255,255,0.15)",[34,454,65],{"class":44},[34,456,424],{"class":44},[34,458,459,462,464,466,469,471],{"class":36,"line":232},[34,460,461],{"class":99},"    annotationBg",[34,463,103],{"class":44},[34,465,58],{"class":44},[34,467,468],{"class":61},"#1a2230",[34,470,65],{"class":44},[34,472,424],{"class":44},[34,474,475,478,480,482,485,487],{"class":36,"line":238},[34,476,477],{"class":99},"    depthTipFill",[34,479,103],{"class":44},[34,481,58],{"class":44},[34,483,484],{"class":61},"#2a3344",[34,486,65],{"class":44},[34,488,424],{"class":44},[34,490,492],{"class":36,"line":491},10,[34,493,235],{"class":44},[34,495,497,500,502],{"class":36,"line":496},11,[34,498,499],{"class":99},"  constructionLabels",[34,501,103],{"class":44},[34,503,93],{"class":44},[34,505,507,510,512,514,516,518],{"class":36,"line":506},12,[34,508,509],{"class":99},"    labelFill",[34,511,103],{"class":44},[34,513,58],{"class":44},[34,515,468],{"class":61},[34,517,65],{"class":44},[34,519,424],{"class":44},[34,521,523,526,528,530,533,535],{"class":36,"line":522},13,[34,524,525],{"class":99},"    labelColor",[34,527,103],{"class":44},[34,529,58],{"class":44},[34,531,532],{"class":61},"rgba(255,255,255,0.65)",[34,534,65],{"class":44},[34,536,424],{"class":44},[34,538,540],{"class":36,"line":539},14,[34,541,235],{"class":44},[34,543,545,548,550],{"class":36,"line":544},15,[34,546,547],{"class":99},"  unitLabels",[34,549,103],{"class":44},[34,551,93],{"class":44},[34,553,555,558,560,562,564,566],{"class":36,"line":554},16,[34,556,557],{"class":99},"    geologicFill",[34,559,103],{"class":44},[34,561,58],{"class":44},[34,563,484],{"class":61},[34,565,65],{"class":44},[34,567,424],{"class":44},[34,569,571,574,576,578,581,583],{"class":36,"line":570},17,[34,572,573],{"class":99},"    aquiferFill",[34,575,103],{"class":44},[34,577,58],{"class":44},[34,579,580],{"class":61},"#1e3250",[34,582,65],{"class":44},[34,584,424],{"class":44},[34,586,588,591,593,595,597,599],{"class":36,"line":587},18,[34,589,590],{"class":99},"    stroke",[34,592,103],{"class":44},[34,594,58],{"class":44},[34,596,452],{"class":61},[34,598,65],{"class":44},[34,600,424],{"class":44},[34,602,604],{"class":36,"line":603},19,[34,605,235],{"class":44},[34,607,609],{"class":36,"line":608},20,[34,610,611],{"class":44},"};\n",[12,613,614],{},"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:",[25,616,618],{"className":27,"code":617,"language":29,"meta":30,"style":30},"function render(dark: boolean) {\n  const renderer = new WellRenderer(svgs, {\n    renderConfig,\n    ...(dark && { theme: DARK_THEME }),\n  });\n  return renderer.prepareSvg().then(() => renderer.draw(well));\n}\n\n\u002F\u002F e.g. watch a class on \u003Chtml>\nnew MutationObserver(() =>\n  render(document.documentElement.classList.contains('dark')),\n).observe(document.documentElement, {\n  attributes: true,\n  attributeFilter: ['class'],\n});\n",[16,619,620,644,668,675,702,711,755,760,764,770,784,819,838,851,873],{"__ignoreMap":30},[34,621,622,625,628,631,635,637,640,642],{"class":36,"line":37},[34,623,624],{"class":376},"function",[34,626,627],{"class":84}," render",[34,629,630],{"class":44},"(",[34,632,634],{"class":633},"sHdIc","dark",[34,636,103],{"class":44},[34,638,639],{"class":385}," boolean",[34,641,244],{"class":44},[34,643,93],{"class":44},[34,645,646,649,652,654,657,659,661,664,666],{"class":36,"line":71},[34,647,648],{"class":376},"  const",[34,650,651],{"class":48}," renderer",[34,653,396],{"class":44},[34,655,656],{"class":44}," new",[34,658,49],{"class":84},[34,660,630],{"class":99},[34,662,663],{"class":48},"svgs",[34,665,90],{"class":44},[34,667,93],{"class":44},[34,669,670,673],{"class":36,"line":78},[34,671,672],{"class":48},"    renderConfig",[34,674,424],{"class":44},[34,676,677,680,682,684,687,689,692,694,696,698,700],{"class":36,"line":96},[34,678,679],{"class":44},"    ...",[34,681,630],{"class":99},[34,683,634],{"class":48},[34,685,686],{"class":44}," &&",[34,688,45],{"class":44},[34,690,691],{"class":99}," theme",[34,693,103],{"class":44},[34,695,380],{"class":48},[34,697,52],{"class":44},[34,699,244],{"class":99},[34,701,424],{"class":44},[34,703,704,707,709],{"class":36,"line":108},[34,705,706],{"class":44},"  }",[34,708,244],{"class":99},[34,710,68],{"class":44},[34,712,713,716,718,720,723,726,728,731,733,735,738,740,742,745,747,750,753],{"class":36,"line":144},[34,714,715],{"class":40},"  return",[34,717,651],{"class":48},[34,719,23],{"class":44},[34,721,722],{"class":84},"prepareSvg",[34,724,725],{"class":99},"()",[34,727,23],{"class":44},[34,729,730],{"class":84},"then",[34,732,630],{"class":99},[34,734,725],{"class":44},[34,736,737],{"class":376}," =>",[34,739,651],{"class":48},[34,741,23],{"class":44},[34,743,744],{"class":84},"draw",[34,746,630],{"class":99},[34,748,749],{"class":48},"well",[34,751,752],{"class":99},"))",[34,754,68],{"class":44},[34,756,757],{"class":36,"line":190},[34,758,759],{"class":44},"}\n",[34,761,762],{"class":36,"line":232},[34,763,75],{"emptyLinePlaceholder":74},[34,765,766],{"class":36,"line":238},[34,767,769],{"class":768},"sHwdD","\u002F\u002F e.g. watch a class on \u003Chtml>\n",[34,771,772,774,777,779,781],{"class":36,"line":491},[34,773,81],{"class":44},[34,775,776],{"class":84}," MutationObserver",[34,778,630],{"class":48},[34,780,725],{"class":44},[34,782,783],{"class":376}," =>\n",[34,785,786,789,792,794,797,799,802,804,807,809,811,813,815,817],{"class":36,"line":496},[34,787,788],{"class":84},"  render",[34,790,791],{"class":48},"(document",[34,793,23],{"class":44},[34,795,796],{"class":48},"documentElement",[34,798,23],{"class":44},[34,800,801],{"class":48},"classList",[34,803,23],{"class":44},[34,805,806],{"class":84},"contains",[34,808,630],{"class":48},[34,810,65],{"class":44},[34,812,634],{"class":61},[34,814,65],{"class":44},[34,816,752],{"class":48},[34,818,424],{"class":44},[34,820,821,823,825,828,830,832,834,836],{"class":36,"line":506},[34,822,244],{"class":48},[34,824,23],{"class":44},[34,826,827],{"class":84},"observe",[34,829,791],{"class":48},[34,831,23],{"class":44},[34,833,796],{"class":48},[34,835,90],{"class":44},[34,837,93],{"class":44},[34,839,840,843,845,849],{"class":36,"line":522},[34,841,842],{"class":99},"  attributes",[34,844,103],{"class":44},[34,846,848],{"class":847},"sfNiH"," true",[34,850,424],{"class":44},[34,852,853,856,858,861,863,866,868,871],{"class":36,"line":539},[34,854,855],{"class":99},"  attributeFilter",[34,857,103],{"class":44},[34,859,860],{"class":48}," [",[34,862,65],{"class":44},[34,864,865],{"class":61},"class",[34,867,65],{"class":44},[34,869,870],{"class":48},"]",[34,872,424],{"class":44},[34,874,875,877,879],{"class":36,"line":544},[34,876,241],{"class":44},[34,878,244],{"class":48},[34,880,68],{"class":44},[882,883,884],"tip",{},[12,885,886],{},"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.",[324,888,890],{"id":889},"patterns","Patterns",[12,892,893,894,897,898,901,902,905,906,910],{},"The lithology patterns are SVG textures built with ",[16,895,896],{},"textures.js"," from the FGDC codes. ",[16,899,900],{},"renderConfig.textures"," adjusts them (for example the wellhead pad's concrete texture, ",[16,903,904],{},"textures.pad","). The ",[310,907,909],{"href":908},"\u002Fformat\u002Fspec\u002Freference\u002Ffgdc-textures","FGDC texture reference"," lists which codes have a drawn pattern; a code without one falls back to the layer color.",[324,912,914],{"id":913},"class-names","Class names",[12,916,917,918,921,922,925],{},"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 ",[16,919,920],{},"classNames"," option (a partial ",[16,923,924],{},"ComponentsClassNames","), for example to fit a CSS naming scheme:",[25,927,929],{"className":27,"code":928,"language":29,"meta":30,"style":30},"new WellRenderer(svgs, {\n  classNames: { tooltip: { root: 'my-tooltip' } },\n});\n",[16,930,931,943,975],{"__ignoreMap":30},[34,932,933,935,937,939,941],{"class":36,"line":37},[34,934,81],{"class":44},[34,936,49],{"class":84},[34,938,87],{"class":48},[34,940,90],{"class":44},[34,942,93],{"class":44},[34,944,945,948,950,952,955,957,959,962,964,966,969,971,973],{"class":36,"line":71},[34,946,947],{"class":99},"  classNames",[34,949,103],{"class":44},[34,951,45],{"class":44},[34,953,954],{"class":99}," tooltip",[34,956,103],{"class":44},[34,958,45],{"class":44},[34,960,961],{"class":99}," root",[34,963,103],{"class":44},[34,965,58],{"class":44},[34,967,968],{"class":61},"my-tooltip",[34,970,65],{"class":44},[34,972,52],{"class":44},[34,974,141],{"class":44},[34,976,977,979,981],{"class":36,"line":78},[34,978,241],{"class":44},[34,980,244],{"class":48},[34,982,68],{"class":44},[984,985,986],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":30,"searchDepth":71,"depth":71,"links":988},[989,990,991],{"id":326,"depth":71,"text":327},{"id":889,"depth":71,"text":890},{"id":913,"depth":71,"text":914},"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.","md",{},"\u002Frender\u002Fguides\u002Ftheming","---\ntitle: Theming\ndescription: 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.\n---\n\nEvery 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`.\n\n```ts\nimport { WellRenderer } from '@welldot\u002Frender';\n\nnew WellRenderer(svgs, {\n  theme: {\n    lithology: { stroke: '#222222', strokeWidth: 1.5 },\n    wellCase: { fill: '#f5f5f5', stroke: '#333333', strokeWidth: 2 },\n    reduction: { fill: '#f5f5f5', stroke: '#333333', strokeWidth: 2 },\n  },\n});\n```\n\nThe 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`](\u002Frender\u002Fapi\u002Fvariables\u002FDEFAULT_WELL_THEME) in the API reference lists every key with its default.\n\nLithology colors come from the data (`lithology[].color`), not from the theme. The theme styles the outlines, patterns and everything around them.\n\n## Dark mode\n\nThe 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:\n\n```ts\nimport type { DeepPartial, WellTheme } from '@welldot\u002Frender';\n\nexport const DARK_THEME: DeepPartial\u003CWellTheme> = {\n  labels: {\n    color: 'rgba(255,255,255,0.55)',\n    bodyColor: 'rgba(255,255,255,0.40)',\n    dividerStroke: 'rgba(255,255,255,0.15)',\n    annotationBg: '#1a2230',\n    depthTipFill: '#2a3344',\n  },\n  constructionLabels: {\n    labelFill: '#1a2230',\n    labelColor: 'rgba(255,255,255,0.65)',\n  },\n  unitLabels: {\n    geologicFill: '#2a3344',\n    aquiferFill: '#1e3250',\n    stroke: 'rgba(255,255,255,0.15)',\n  },\n};\n```\n\nThe 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:\n\n```ts\nfunction render(dark: boolean) {\n  const renderer = new WellRenderer(svgs, {\n    renderConfig,\n    ...(dark && { theme: DARK_THEME }),\n  });\n  return renderer.prepareSvg().then(() => renderer.draw(well));\n}\n\n\u002F\u002F e.g. watch a class on \u003Chtml>\nnew MutationObserver(() =>\n  render(document.documentElement.classList.contains('dark')),\n).observe(document.documentElement, {\n  attributes: true,\n  attributeFilter: ['class'],\n});\n```\n\n::tip\nTest 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.\n::\n\n## Patterns\n\nThe 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](\u002Fformat\u002Fspec\u002Freference\u002Ffgdc-textures) lists which codes have a drawn pattern; a code without one falls back to the layer color.\n\n## Class names\n\nEvery 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:\n\n```ts\nnew WellRenderer(svgs, {\n  classNames: { tooltip: { root: 'my-tooltip' } },\n});\n```\n",{"title":7,"description":992},"render\u002F2.guides\u002F3.theming","qTVIlnhNvI_KPqosa_TSyt_EaJ11QffIAHsNMz6wvTs",{"docs_en":1001,"spec":1316,"changelogs":1365},[1002,1022,1041,1097,1207,1258],{"title":1003,"path":1004,"stem":1005,"children":1006},"Ai","\u002Fai","ai",[1007,1010,1014,1018],{"title":1008,"path":1004,"stem":1009},"Introduction","ai\u002Findex",{"title":1011,"path":1012,"stem":1013},"Converting reports with an assistant","\u002Fai\u002Fconversion-skill","ai\u002Fconversion-skill",{"title":1015,"path":1016,"stem":1017},"llms.txt and Markdown pages","\u002Fai\u002Fllms","ai\u002Fllms",{"title":1019,"path":1020,"stem":1021},"MCP server","\u002Fai\u002Fmcp","ai\u002Fmcp",{"title":1023,"path":1024,"stem":1025,"children":1026},"Contributing","\u002Fcontributing","contributing",[1027,1029,1033,1037],{"title":1008,"path":1024,"stem":1028},"contributing\u002Findex",{"title":1030,"path":1031,"stem":1032},"Writing docs","\u002Fcontributing\u002Fwriting-docs","contributing\u002F1.writing-docs",{"title":1034,"path":1035,"stem":1036},"Update rules","\u002Fcontributing\u002Fupdate-rules","contributing\u002F2.update-rules",{"title":1038,"path":1039,"stem":1040},"Content components","\u002Fcontributing\u002Fcomponents","contributing\u002Fcomponents",{"title":1042,"path":1043,"stem":1044,"children":1045},"Core","\u002Fcore","core",[1046,1048,1062,1091],{"title":1008,"path":1043,"stem":1047},"core\u002Findex",{"title":1049,"path":1050,"stem":1051,"children":1052,"page":1061},"Getting Started","\u002Fcore\u002Fgetting-started","core\u002F1.getting-started",[1053,1057],{"title":1054,"path":1055,"stem":1056},"Installation","\u002Fcore\u002Fgetting-started\u002Finstallation","core\u002F1.getting-started\u002F1.installation",{"title":1058,"path":1059,"stem":1060},"First use","\u002Fcore\u002Fgetting-started\u002Ffirst-use","core\u002F1.getting-started\u002F2.first-use",false,{"title":1063,"path":1064,"stem":1065,"children":1066,"page":1061},"Guides","\u002Fcore\u002Fguides","core\u002F2.guides",[1067,1071,1075,1079,1083,1087],{"title":1068,"path":1069,"stem":1070},"Parsing and validating","\u002Fcore\u002Fguides\u002Fparsing-and-validating","core\u002F2.guides\u002F1.parsing-and-validating",{"title":1072,"path":1073,"stem":1074},"Serializing and sharing","\u002Fcore\u002Fguides\u002Fserializing-and-sharing","core\u002F2.guides\u002F2.serializing-and-sharing",{"title":1076,"path":1077,"stem":1078},"Unit conversion","\u002Fcore\u002Fguides\u002Funit-conversion","core\u002F2.guides\u002F3.unit-conversion",{"title":1080,"path":1081,"stem":1082},"Vocabularies and textures","\u002Fcore\u002Fguides\u002Fvocabularies-and-textures","core\u002F2.guides\u002F4.vocabularies-and-textures",{"title":1084,"path":1085,"stem":1086},"Water quality vocabulary","\u002Fcore\u002Fguides\u002Fwater-quality-vocabulary","core\u002F2.guides\u002F5.water-quality-vocabulary",{"title":1088,"path":1089,"stem":1090},"Versions and time zones","\u002Fcore\u002Fguides\u002Fversions-and-time-zones","core\u002F2.guides\u002F6.versions-and-time-zones",{"title":1092,"path":1093,"stem":1094,"children":1095},"API reference","\u002Fcore\u002Fapi","core\u002Fapi\u002Findex",[1096],{"title":1092,"path":1093,"stem":1094},{"title":1098,"path":1099,"stem":1100,"children":1101},"Format","\u002Fformat","format",[1102,1104,1124,1153,1177,1197,1203],{"title":1008,"path":1099,"stem":1103},"format\u002Findex",{"title":1049,"path":1105,"stem":1106,"children":1107,"page":1061},"\u002Fformat\u002Fgetting-started","format\u002F1.getting-started",[1108,1112,1116,1120],{"title":1109,"path":1110,"stem":1111},"What is .well?","\u002Fformat\u002Fgetting-started\u002Fwhat-is-well","format\u002F1.getting-started\u002F1.what-is-well",{"title":1113,"path":1114,"stem":1115},"For geologists","\u002Fformat\u002Fgetting-started\u002Ffor-geologists","format\u002F1.getting-started\u002F2.for-geologists",{"title":1117,"path":1118,"stem":1119},"For developers","\u002Fformat\u002Fgetting-started\u002Ffor-developers","format\u002F1.getting-started\u002F3.for-developers",{"title":1121,"path":1122,"stem":1123},"Your first .well file","\u002Fformat\u002Fgetting-started\u002Ffirst-well-file","format\u002F1.getting-started\u002F4.first-well-file",{"title":1125,"path":1126,"stem":1127,"children":1128,"page":1061},"Concepts","\u002Fformat\u002Fconcepts","format\u002F2.concepts",[1129,1133,1137,1141,1145,1149],{"title":1130,"path":1131,"stem":1132},"Depths and intervals","\u002Fformat\u002Fconcepts\u002Fdepths-and-intervals","format\u002F2.concepts\u002F1.depths-and-intervals",{"title":1134,"path":1135,"stem":1136},"Units and precision","\u002Fformat\u002Fconcepts\u002Funits-and-precision","format\u002F2.concepts\u002F2.units-and-precision",{"title":1138,"path":1139,"stem":1140},"Vocabularies","\u002Fformat\u002Fconcepts\u002Fvocabularies","format\u002F2.concepts\u002F3.vocabularies",{"title":1142,"path":1143,"stem":1144},"Profiles","\u002Fformat\u002Fconcepts\u002Fprofiles","format\u002F2.concepts\u002F4.profiles",{"title":1146,"path":1147,"stem":1148},"Versions and deprecation","\u002Fformat\u002Fconcepts\u002Fversions-and-deprecation","format\u002F2.concepts\u002F5.versions-and-deprecation",{"title":1150,"path":1151,"stem":1152},"Extensibility","\u002Fformat\u002Fconcepts\u002Fextensibility","format\u002F2.concepts\u002F6.extensibility",{"title":1063,"path":1154,"stem":1155,"children":1156,"page":1061},"\u002Fformat\u002Fguides","format\u002F3.guides",[1157,1161,1165,1169,1173],{"title":1158,"path":1159,"stem":1160},"Writing a .well by hand","\u002Fformat\u002Fguides\u002Fwriting-by-hand","format\u002F3.guides\u002F1.writing-by-hand",{"title":1162,"path":1163,"stem":1164},"Converting a report","\u002Fformat\u002Fguides\u002Fconverting-a-report","format\u002F3.guides\u002F2.converting-a-report",{"title":1166,"path":1167,"stem":1168},"Validating","\u002Fformat\u002Fguides\u002Fvalidating","format\u002F3.guides\u002F3.validating",{"title":1170,"path":1171,"stem":1172},"Extending for your own needs","\u002Fformat\u002Fguides\u002Fextending","format\u002F3.guides\u002F4.extending",{"title":1174,"path":1175,"stem":1176},"Building an editor or database on .well","\u002Fformat\u002Fguides\u002Fbuilding-on-well","format\u002F3.guides\u002F5.building-on-well",{"title":1178,"path":1179,"stem":1180,"children":1181},"Overview","\u002Fformat\u002Freference","format\u002F4.reference\u002Findex",[1182,1183,1187,1191],{"title":1178,"path":1179,"stem":1180},{"title":1184,"path":1185,"stem":1186},"JSON Schema","\u002Fformat\u002Freference\u002Fjson-schema","format\u002F4.reference\u002F1.json-schema",{"title":1188,"path":1189,"stem":1190},"Example wells","\u002Fformat\u002Freference\u002Fexamples","format\u002F4.reference\u002F2.examples",{"title":1192,"path":1193,"stem":1194,"children":1195},"Object reference","\u002Fformat\u002Freference\u002Fobjects","format\u002Freference\u002Fobjects\u002Findex",[1196],{"title":1192,"path":1193,"stem":1194},{"title":1198,"path":1199,"stem":1200,"children":1201},"About the spec","\u002Fformat\u002Fspec","format\u002F5.spec\u002Findex",[1202],{"title":1198,"path":1199,"stem":1200},{"title":1204,"path":1205,"stem":1206},"Changelog","\u002Fformat\u002Fchangelog","format\u002F6.changelog",{"title":1208,"path":1209,"stem":1210,"children":1211},"Render","\u002Frender","render",[1212,1214,1224,1253],{"title":1008,"path":1209,"stem":1213},"render\u002Findex",{"title":1049,"path":1215,"stem":1216,"children":1217,"page":1061},"\u002Frender\u002Fgetting-started","render\u002F1.getting-started",[1218,1221],{"title":1054,"path":1219,"stem":1220},"\u002Frender\u002Fgetting-started\u002Finstallation","render\u002F1.getting-started\u002F1.installation",{"title":1058,"path":1222,"stem":1223},"\u002Frender\u002Fgetting-started\u002Ffirst-use","render\u002F1.getting-started\u002F2.first-use",{"title":1063,"path":1225,"stem":1226,"children":1227,"page":1061},"\u002Frender\u002Fguides","render\u002F2.guides",[1228,1232,1236,1237,1241,1245,1249],{"title":1229,"path":1230,"stem":1231},"Panels and layout","\u002Frender\u002Fguides\u002Fpanels-and-layout","render\u002F2.guides\u002F1.panels-and-layout",{"title":1233,"path":1234,"stem":1235},"Layers and labels","\u002Frender\u002Fguides\u002Flayers-and-labels","render\u002F2.guides\u002F2.layers-and-labels",{"title":7,"path":995,"stem":998},{"title":1238,"path":1239,"stem":1240},"Locale and units","\u002Frender\u002Fguides\u002Flocale-and-units","render\u002F2.guides\u002F4.locale-and-units",{"title":1242,"path":1243,"stem":1244},"Legends","\u002Frender\u002Fguides\u002Flegends","render\u002F2.guides\u002F5.legends",{"title":1246,"path":1247,"stem":1248},"Zoom, pan and highlights","\u002Frender\u002Fguides\u002Finteraction","render\u002F2.guides\u002F6.interaction",{"title":1250,"path":1251,"stem":1252},"Using it in a framework","\u002Frender\u002Fguides\u002Fframeworks","render\u002F2.guides\u002F7.frameworks",{"title":1092,"path":1254,"stem":1255,"children":1256},"\u002Frender\u002Fapi","render\u002Fapi\u002Findex",[1257],{"title":1092,"path":1254,"stem":1255},{"title":1259,"path":1260,"stem":1261,"children":1262},"Utils","\u002Futils","utils",[1263,1265,1275,1311],{"title":1008,"path":1260,"stem":1264},"utils\u002Findex",{"title":1049,"path":1266,"stem":1267,"children":1268,"page":1061},"\u002Futils\u002Fgetting-started","utils\u002F1.getting-started",[1269,1272],{"title":1054,"path":1270,"stem":1271},"\u002Futils\u002Fgetting-started\u002Finstallation","utils\u002F1.getting-started\u002F1.installation",{"title":1058,"path":1273,"stem":1274},"\u002Futils\u002Fgetting-started\u002Ffirst-use","utils\u002F1.getting-started\u002F2.first-use",{"title":1063,"path":1276,"stem":1277,"children":1278,"page":1061},"\u002Futils\u002Fguides","utils\u002F2.guides",[1279,1283,1287,1291,1295,1299,1303,1307],{"title":1280,"path":1281,"stem":1282},"Geometry and volumes","\u002Futils\u002Fguides\u002Fgeometry-and-volumes","utils\u002F2.guides\u002F1.geometry-and-volumes",{"title":1284,"path":1285,"stem":1286},"Water levels and pumping tests","\u002Futils\u002Fguides\u002Fpumping-tests","utils\u002F2.guides\u002F2.pumping-tests",{"title":1288,"path":1289,"stem":1290},"Permits","\u002Futils\u002Fguides\u002Fpermits","utils\u002F2.guides\u002F3.permits",{"title":1292,"path":1293,"stem":1294},"Operation and production","\u002Futils\u002Fguides\u002Foperation","utils\u002F2.guides\u002F4.operation",{"title":1296,"path":1297,"stem":1298},"Water quality","\u002Futils\u002Fguides\u002Fwater-quality","utils\u002F2.guides\u002F5.water-quality",{"title":1300,"path":1301,"stem":1302},"Logger import","\u002Futils\u002Fguides\u002Flogger-import","utils\u002F2.guides\u002F6.logger-import",{"title":1304,"path":1305,"stem":1306},"SIAGAS import","\u002Futils\u002Fguides\u002Fsiagas-import","utils\u002F2.guides\u002F7.siagas-import",{"title":1308,"path":1309,"stem":1310},"Formatting","\u002Futils\u002Fguides\u002Fformatting","utils\u002F2.guides\u002F8.formatting",{"title":1092,"path":1312,"stem":1313,"children":1314},"\u002Futils\u002Fapi","utils\u002Fapi\u002Findex",[1315],{"title":1092,"path":1312,"stem":1313},[1317],{"title":1098,"path":1099,"stem":1100,"children":1318,"page":1061},[1319],{"title":1320,"path":1199,"stem":1321,"children":1322,"page":1061},"Spec","format\u002Fspec",[1323,1331,1340],{"title":1324,"path":1325,"stem":1326,"children":1327,"page":1061},"Reference","\u002Fformat\u002Fspec\u002Freference","format\u002Fspec\u002Freference",[1328],{"title":1329,"path":908,"stem":1330},"FGDC Texture Patterns Reference","format\u002Fspec\u002Freference\u002Ffgdc-textures",{"title":1332,"path":1333,"stem":1334,"children":1335,"page":1061},"V1","\u002Fformat\u002Fspec\u002Fv1","format\u002Fspec\u002Fv1",[1336],{"title":1337,"path":1338,"stem":1339},".well File Format Specification","\u002Fformat\u002Fspec\u002Fv1\u002Fwell-format","format\u002Fspec\u002Fv1\u002Fwell-format",{"title":1341,"path":1342,"stem":1343,"children":1344,"page":1061},"V2","\u002Fformat\u002Fspec\u002Fv2","format\u002Fspec\u002Fv2",[1345,1349,1353,1357,1361],{"title":1346,"path":1347,"stem":1348},".well File Format Specification — Version 2.4: Format Reference","\u002Fformat\u002Fspec\u002Fv2\u002Fformat-reference","format\u002Fspec\u002Fv2\u002Fformat-reference",{"title":1350,"path":1351,"stem":1352},".well File Format Specification — Version 2.4: Interoperability","\u002Fformat\u002Fspec\u002Fv2\u002Finteroperability","format\u002Fspec\u002Fv2\u002Finteroperability",{"title":1354,"path":1355,"stem":1356},".well File Format Specification — Version 2.4: Object Schemas","\u002Fformat\u002Fspec\u002Fv2\u002Fobject-schemas","format\u002Fspec\u002Fv2\u002Fobject-schemas",{"title":1358,"path":1359,"stem":1360},".well File Format Specification — Version 2.4: Overview","\u002Fformat\u002Fspec\u002Fv2\u002Foverview","format\u002Fspec\u002Fv2\u002Foverview",{"title":1362,"path":1363,"stem":1364},".well File Format Specification — Version 2.4: Water Quality","\u002Fformat\u002Fspec\u002Fv2\u002Fwater-quality","format\u002Fspec\u002Fv2\u002Fwater-quality",[1366,1372,1377],{"title":1042,"path":1043,"stem":1044,"children":1367,"page":1061},[1368],{"title":1369,"path":1370,"stem":1371},"@welldot\u002Fcore","\u002Fcore\u002Fchangelog","core\u002FCHANGELOG",{"title":1208,"path":1209,"stem":1210,"children":1373,"page":1061},[1374],{"title":62,"path":1375,"stem":1376},"\u002Frender\u002Fchangelog","render\u002FCHANGELOG",{"title":1259,"path":1260,"stem":1261,"children":1378,"page":1061},[1379],{"title":1380,"path":1381,"stem":1382},"@welldot\u002Futils","\u002Futils\u002Fchangelog","utils\u002FCHANGELOG",1793050494669]