[{"data":1,"prerenderedAt":1353},["ShallowReactive",2],{"mobile-docs-navigation":3,"docs-page:\u002Fadvanced\u002Fthemes-and-styling":92,"docs-navigation:en":1332},[4,8,12,16,34,38,47],{"title":5,"path":6,"stem":7},"Getting Started","\u002Fgetting-started","2.getting-started",{"title":9,"path":10,"stem":11},"Writing Diagrams","\u002Fwriting-diagrams","3.writing-diagrams",{"title":13,"path":14,"stem":15},"Configuration","\u002Fconfiguration","4.configuration",{"title":17,"path":18,"stem":19,"children":20,"page":33},"Advanced","\u002Fadvanced","5.advanced",[21,25,29],{"title":22,"path":23,"stem":24},"Themes and Styling","\u002Fadvanced\u002Fthemes-and-styling","5.advanced\u002F1.themes-and-styling",{"title":26,"path":27,"stem":28},"Custom Rendering","\u002Fadvanced\u002Fcustom-rendering","5.advanced\u002F2.custom-rendering",{"title":30,"path":31,"stem":32},"Interactions","\u002Fadvanced\u002Finteractions","5.advanced\u002F3.interactions",false,{"title":35,"path":36,"stem":37},"Troubleshooting","\u002Ftroubleshooting","6.troubleshooting",{"title":39,"path":40,"stem":41,"children":42,"page":33},"Migration","\u002Fmigration","7.migration",[43],{"title":44,"path":45,"stem":46},"Migration to v3","\u002Fmigration\u002Fv3","7.migration\u002F1.v3",{"title":48,"path":49,"stem":50,"children":51,"page":33},"Zh","\u002Fzh","zh",[52,56,60,64,80,84],{"title":53,"path":54,"stem":55},"開始使用","\u002Fzh\u002Fgetting-started","zh\u002F2.getting-started",{"title":57,"path":58,"stem":59},"撰寫圖表","\u002Fzh\u002Fwriting-diagrams","zh\u002F3.writing-diagrams",{"title":61,"path":62,"stem":63},"設定","\u002Fzh\u002Fconfiguration","zh\u002F4.configuration",{"title":17,"path":65,"stem":66,"children":67,"page":33},"\u002Fzh\u002Fadvanced","zh\u002F5.advanced",[68,72,76],{"title":69,"path":70,"stem":71},"主題與樣式","\u002Fzh\u002Fadvanced\u002Fthemes-and-styling","zh\u002F5.advanced\u002F1.themes-and-styling",{"title":73,"path":74,"stem":75},"自訂渲染","\u002Fzh\u002Fadvanced\u002Fcustom-rendering","zh\u002F5.advanced\u002F2.custom-rendering",{"title":77,"path":78,"stem":79},"互動","\u002Fzh\u002Fadvanced\u002Finteractions","zh\u002F5.advanced\u002F3.interactions",{"title":81,"path":82,"stem":83},"疑難排解","\u002Fzh\u002Ftroubleshooting","zh\u002F6.troubleshooting",{"title":39,"path":85,"stem":86,"children":87,"page":33},"\u002Fzh\u002Fmigration","zh\u002F7.migration",[88],{"title":89,"path":90,"stem":91},"升級至 v3","\u002Fzh\u002Fmigration\u002Fv3","zh\u002F7.migration\u002F1.v3",{"id":93,"title":22,"body":94,"config":1326,"description":1327,"extension":1328,"meta":1329,"navigation":315,"path":23,"seo":1330,"stem":24,"__hash__":1331},"docs\u002F5.advanced\u002F1.themes-and-styling.md",{"type":95,"value":96,"toc":1314},"minimark",[97,101,110,115,118,204,219,223,229,440,474,481,485,493,568,616,620,623,653,670,690,694,703,751,754,758,761,974,979,1093,1097,1206,1210,1302,1310],[98,99,22],"h1",{"id":100},"themes-and-styling",[102,103,104,105,109],"p",{},"The built-in renderer resolves a Mermaid theme for each render, then exposes CSS variables for its surrounding controls. Theme names affect Mermaid SVG output; ",[106,107,108],"code",{},"--ncm-*"," variables affect the module's wrapper, toolbar, overlays, and zoom UI.",[111,112,114],"h2",{"id":113},"set-light-and-dark-defaults","Set light and dark defaults",[102,116,117],{},"Configure the themes selected by automatic color mode and reserved manual strategies:",[119,120,125],"pre",{"className":121,"code":122,"language":123,"meta":124,"style":124},"language-ts shiki shiki-themes github-light github-dark-high-contrast","export default defineNuxtConfig({\n  contentMermaid: {\n    theme: {\n      light: 'default',\n      dark: 'dark',\n    },\n  },\n})\n","ts","",[106,126,127,147,154,160,173,184,190,198],{"__ignoreMap":124},[128,129,132,136,139,143],"span",{"class":130,"line":131},"line",1,[128,133,135],{"class":134},"s-kum","export",[128,137,138],{"class":134}," default",[128,140,142],{"class":141},"s_Opv"," defineNuxtConfig",[128,144,146],{"class":145},"sjV9Q","({\n",[128,148,150],{"class":130,"line":149},2,[128,151,153],{"class":152},"skGVy","  contentMermaid: {\n",[128,155,157],{"class":130,"line":156},3,[128,158,159],{"class":152},"    theme: {\n",[128,161,163,166,170],{"class":130,"line":162},4,[128,164,165],{"class":152},"      light: ",[128,167,169],{"class":168},"srMev","'default'",[128,171,172],{"class":152},",\n",[128,174,176,179,182],{"class":130,"line":175},5,[128,177,178],{"class":152},"      dark: ",[128,180,181],{"class":168},"'dark'",[128,183,172],{"class":152},[128,185,187],{"class":130,"line":186},6,[128,188,189],{"class":152},"    },\n",[128,191,193,196],{"class":130,"line":192},7,[128,194,195],{"class":152},"  }",[128,197,172],{"class":145},[128,199,201],{"class":130,"line":200},8,[128,202,203],{"class":145},"})\n",[102,205,206,207,210,211,214,215,218],{},"The defaults are ",[106,208,209],{},"light: 'default'"," and ",[106,212,213],{},"dark: 'dark'",". The deprecated ",[106,216,217],{},"theme.useColorModeTheme"," key has no effect.",[111,220,222],{"id":221},"control-a-theme-manually","Control a theme manually",[102,224,225,228],{},[106,226,227],{},"useMermaidTheme()"," is a Nuxt auto-import after the module is enabled. It returns app-scoped reactive state and methods:",[119,230,234],{"className":231,"code":232,"language":233,"meta":124,"style":124},"language-vue shiki shiki-themes github-light github-dark-high-contrast","\u003Cscript setup lang=\"ts\">\nconst {\n  currentTheme,\n  setMermaidTheme,\n  getMermaidTheme,\n  resetMermaidTheme,\n} = useMermaidTheme()\n\nfunction toggleDiagramTheme() {\n  setMermaidTheme(currentTheme.value === 'dark' ? 'light' : 'dark')\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton type=\"button\" @click=\"toggleDiagramTheme\">\n    Toggle diagram theme\n  \u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n","vue",[106,235,236,261,269,277,284,291,298,311,317,329,357,363,373,378,388,415,421,431],{"__ignoreMap":124},[128,237,238,241,245,249,252,255,258],{"class":130,"line":131},[128,239,240],{"class":152},"\u003C",[128,242,244],{"class":243},"sx1sP","script",[128,246,248],{"class":247},"sHg5J"," setup",[128,250,251],{"class":247}," lang",[128,253,254],{"class":152},"=",[128,256,257],{"class":168},"\"ts\"",[128,259,260],{"class":152},">\n",[128,262,263,266],{"class":130,"line":149},[128,264,265],{"class":134},"const",[128,267,268],{"class":152}," {\n",[128,270,271,275],{"class":130,"line":156},[128,272,274],{"class":273},"sP0c6","  currentTheme",[128,276,172],{"class":152},[128,278,279,282],{"class":130,"line":162},[128,280,281],{"class":273},"  setMermaidTheme",[128,283,172],{"class":152},[128,285,286,289],{"class":130,"line":175},[128,287,288],{"class":273},"  getMermaidTheme",[128,290,172],{"class":152},[128,292,293,296],{"class":130,"line":186},[128,294,295],{"class":273},"  resetMermaidTheme",[128,297,172],{"class":152},[128,299,300,303,305,308],{"class":130,"line":192},[128,301,302],{"class":152},"} ",[128,304,254],{"class":134},[128,306,307],{"class":141}," useMermaidTheme",[128,309,310],{"class":152},"()\n",[128,312,313],{"class":130,"line":200},[128,314,316],{"emptyLinePlaceholder":315},true,"\n",[128,318,320,323,326],{"class":130,"line":319},9,[128,321,322],{"class":134},"function",[128,324,325],{"class":141}," toggleDiagramTheme",[128,327,328],{"class":152},"() {\n",[128,330,332,334,337,340,343,346,349,352,354],{"class":130,"line":331},10,[128,333,281],{"class":141},[128,335,336],{"class":152},"(currentTheme.value ",[128,338,339],{"class":134},"===",[128,341,342],{"class":168}," 'dark'",[128,344,345],{"class":134}," ?",[128,347,348],{"class":168}," 'light'",[128,350,351],{"class":134}," :",[128,353,342],{"class":168},[128,355,356],{"class":152},")\n",[128,358,360],{"class":130,"line":359},11,[128,361,362],{"class":152},"}\n",[128,364,366,369,371],{"class":130,"line":365},12,[128,367,368],{"class":152},"\u003C\u002F",[128,370,244],{"class":243},[128,372,260],{"class":152},[128,374,376],{"class":130,"line":375},13,[128,377,316],{"emptyLinePlaceholder":315},[128,379,381,383,386],{"class":130,"line":380},14,[128,382,240],{"class":152},[128,384,385],{"class":243},"template",[128,387,260],{"class":152},[128,389,391,394,397,400,402,405,408,410,413],{"class":130,"line":390},15,[128,392,393],{"class":152},"  \u003C",[128,395,396],{"class":243},"button",[128,398,399],{"class":247}," type",[128,401,254],{"class":152},[128,403,404],{"class":168},"\"button\"",[128,406,407],{"class":247}," @click",[128,409,254],{"class":152},[128,411,412],{"class":168},"\"toggleDiagramTheme\"",[128,414,260],{"class":152},[128,416,418],{"class":130,"line":417},16,[128,419,420],{"class":152},"    Toggle diagram theme\n",[128,422,424,427,429],{"class":130,"line":423},17,[128,425,426],{"class":152},"  \u003C\u002F",[128,428,396],{"class":243},[128,430,260],{"class":152},[128,432,434,436,438],{"class":130,"line":433},18,[128,435,368],{"class":152},[128,437,385],{"class":243},[128,439,260],{"class":152},[441,442,443,454,464],"ul",{},[444,445,446,449,450,453],"li",{},[106,447,448],{},"currentTheme"," is a reactive ",[106,451,452],{},"Ref"," containing the manual override. It represents the current manual mode, which is not necessarily the final theme name passed to Mermaid.",[444,455,456,459,460,463],{},[106,457,458],{},"setMermaidTheme(mode)"," sets it and ",[106,461,462],{},"getMermaidTheme()"," returns it.",[444,465,466,469,470,473],{},[106,467,468],{},"resetMermaidTheme()"," is equivalent to ",[106,471,472],{},"setMermaidTheme(null)",".",[102,475,476,477,480],{},"Pass ",[106,478,479],{},"null"," to return to automatic selection. Do not import this composable from the package root; Nuxt provides the auto-import.",[111,482,484],{"id":483},"distinguish-strategies-from-theme-names","Distinguish strategies from theme names",[102,486,487,210,490,492],{},[106,488,489],{},"'light'",[106,491,181],{}," are reserved strategies, not ordinary direct theme-name values:",[494,495,496,509],"table",{},[497,498,499],"thead",{},[500,501,502,506],"tr",{},[503,504,505],"th",{},"Manual value",[503,507,508],{},"Resolution",[510,511,512,527,540,559],"tbody",{},[500,513,514,519],{},[515,516,517],"td",{},[106,518,489],{},[515,520,521,524,525,473],{},[106,522,523],{},"contentMermaid.theme.light",", otherwise Mermaid ",[106,526,169],{},[500,528,529,533],{},[515,530,531],{},[106,532,181],{},[515,534,535,524,538,473],{},[106,536,537],{},"contentMermaid.theme.dark",[106,539,181],{},[500,541,542,556],{},[515,543,544,545,548,549,552,553],{},"Any other Mermaid theme name, such as ",[106,546,547],{},"'forest'",", ",[106,550,551],{},"'neutral'",", or ",[106,554,555],{},"'base'",[515,557,558],{},"Passed directly to Mermaid.",[500,560,561,565],{},[515,562,563],{},[106,564,479],{},[515,566,567],{},"Removes the manual override.",[119,569,571],{"className":121,"code":570,"language":123,"meta":124,"style":124},"setMermaidTheme('dark') \u002F\u002F configured dark strategy\nsetMermaidTheme('forest') \u002F\u002F direct Mermaid theme\nsetMermaidTheme(null) \u002F\u002F automatic mode\n",[106,572,573,590,603],{"__ignoreMap":124},[128,574,575,578,581,583,586],{"class":130,"line":131},[128,576,577],{"class":141},"setMermaidTheme",[128,579,580],{"class":152},"(",[128,582,181],{"class":168},[128,584,585],{"class":152},") ",[128,587,589],{"class":588},"s-wDw","\u002F\u002F configured dark strategy\n",[128,591,592,594,596,598,600],{"class":130,"line":149},[128,593,577],{"class":141},[128,595,580],{"class":152},[128,597,547],{"class":168},[128,599,585],{"class":152},[128,601,602],{"class":588},"\u002F\u002F direct Mermaid theme\n",[128,604,605,607,609,611,613],{"class":130,"line":156},[128,606,577],{"class":141},[128,608,580],{"class":152},[128,610,479],{"class":273},[128,612,585],{"class":152},[128,614,615],{"class":588},"\u002F\u002F automatic mode\n",[111,617,619],{"id":618},"understand-theme-resolution","Understand theme resolution",[102,621,622],{},"The package's Theme Resolution Policy is, highest to lowest:",[624,625,626,632,637,644],"ol",{},[444,627,628,631],{},[106,629,630],{},"config.theme"," from the selected diagram configuration source: Page Mermaid Config for a Markdown page, or Direct Mermaid Config for a Vue component.",[444,633,634,635,473],{},"The manual mode from ",[106,636,227],{},[444,638,639,640,643],{},"The current ",[106,641,642],{},"@nuxtjs\u002Fcolor-mode"," value, when that module is installed.",[444,645,646,649,650,652],{},[106,647,648],{},"contentMermaid.loader.init.theme"," (falling back to the light configured theme, then ",[106,651,169],{},").",[102,654,655,656,658,659,662,663,665,666,669],{},"The ",[106,657,630],{}," in step 1 comes from page ",[106,660,661],{},"config"," or component ",[106,664,661],{},". Mermaid YAML frontmatter and ",[106,667,668],{},"%%{init: ...}%%"," directives remain source-level configuration interpreted according to Mermaid's own rules, so they are outside this package-owned theme policy.",[102,671,672,673,676,677,680,681,684,685,689],{},"In automatic color-mode selection, ",[106,674,675],{},"dark"," uses ",[106,678,679],{},"theme.dark","; every other detected color-mode value uses ",[106,682,683],{},"theme.light",". Mermaid YAML frontmatter and directives remain Mermaid-owned source syntax, so consult ",[686,687,9],"a",{"href":688},"\u002Fwriting-diagrams#use-mermaid-directives-deliberately"," for their boundary.",[111,691,693],{"id":692},"use-color-mode-and-manual-control-together","Use color mode and manual control together",[102,695,696,697,699,700,702],{},"When ",[106,698,642],{}," is present, diagrams follow it while manual mode is ",[106,701,479],{},". Set a manual mode only when a view needs to override it, then reset it to resume color-mode selection:",[119,704,706],{"className":121,"code":705,"language":123,"meta":124,"style":124},"const { resetMermaidTheme, setMermaidTheme } = useMermaidTheme()\n\nsetMermaidTheme('dark')\nresetMermaidTheme()\n",[106,707,708,731,735,745],{"__ignoreMap":124},[128,709,710,712,715,718,720,722,725,727,729],{"class":130,"line":131},[128,711,265],{"class":134},[128,713,714],{"class":152}," { ",[128,716,717],{"class":273},"resetMermaidTheme",[128,719,548],{"class":152},[128,721,577],{"class":273},[128,723,724],{"class":152}," } ",[128,726,254],{"class":134},[128,728,307],{"class":141},[128,730,310],{"class":152},[128,732,733],{"class":130,"line":149},[128,734,316],{"emptyLinePlaceholder":315},[128,736,737,739,741,743],{"class":130,"line":156},[128,738,577],{"class":141},[128,740,580],{"class":152},[128,742,181],{"class":168},[128,744,356],{"class":152},[128,746,747,749],{"class":130,"line":162},[128,748,717],{"class":141},[128,750,310],{"class":152},[102,752,753],{},"Manual state is app-scoped, so plan a reset when leaving a view that deliberately locks a diagram theme.",[111,755,757],{"id":756},"override-the-built-in-styling-hooks","Override the built-in styling hooks",[102,759,760],{},"Set variables in application CSS. This supplies a compact branded light\u002Fdark palette:",[119,762,766],{"className":763,"code":764,"language":765,"meta":124,"style":124},"language-css shiki shiki-themes github-light github-dark-high-contrast",":root {\n  --ncm-code-bg: #f3f4f6;\n  --ncm-code-bg-hover: #e5e7eb;\n  --ncm-border-color: #d1d5db;\n  --ncm-text: #111827;\n  --ncm-text-muted: #4b5563;\n  --ncm-text-xmuted: #6b7280;\n  --ncm-overlay-bg: #f9fafb;\n}\n\nhtml[data-theme='dark'],\n.dark {\n  --ncm-code-bg: #111827;\n  --ncm-code-bg-hover: #1f2937;\n  --ncm-border-color: #374151;\n  --ncm-text: #f9fafb;\n  --ncm-text-muted: #d1d5db;\n  --ncm-text-xmuted: #9ca3af;\n  --ncm-overlay-bg: #111827;\n}\n","css",[106,767,768,775,790,802,814,826,838,850,862,866,870,888,895,905,916,927,937,947,958,969],{"__ignoreMap":124},[128,769,770,773],{"class":130,"line":131},[128,771,772],{"class":247},":root",[128,774,268],{"class":152},[128,776,777,781,784,787],{"class":130,"line":149},[128,778,780],{"class":779},"sa561","  --ncm-code-bg",[128,782,783],{"class":152},": ",[128,785,786],{"class":273},"#f3f4f6",[128,788,789],{"class":152},";\n",[128,791,792,795,797,800],{"class":130,"line":156},[128,793,794],{"class":779},"  --ncm-code-bg-hover",[128,796,783],{"class":152},[128,798,799],{"class":273},"#e5e7eb",[128,801,789],{"class":152},[128,803,804,807,809,812],{"class":130,"line":162},[128,805,806],{"class":779},"  --ncm-border-color",[128,808,783],{"class":152},[128,810,811],{"class":273},"#d1d5db",[128,813,789],{"class":152},[128,815,816,819,821,824],{"class":130,"line":175},[128,817,818],{"class":779},"  --ncm-text",[128,820,783],{"class":152},[128,822,823],{"class":273},"#111827",[128,825,789],{"class":152},[128,827,828,831,833,836],{"class":130,"line":186},[128,829,830],{"class":779},"  --ncm-text-muted",[128,832,783],{"class":152},[128,834,835],{"class":273},"#4b5563",[128,837,789],{"class":152},[128,839,840,843,845,848],{"class":130,"line":192},[128,841,842],{"class":779},"  --ncm-text-xmuted",[128,844,783],{"class":152},[128,846,847],{"class":273},"#6b7280",[128,849,789],{"class":152},[128,851,852,855,857,860],{"class":130,"line":200},[128,853,854],{"class":779},"  --ncm-overlay-bg",[128,856,783],{"class":152},[128,858,859],{"class":273},"#f9fafb",[128,861,789],{"class":152},[128,863,864],{"class":130,"line":319},[128,865,362],{"class":152},[128,867,868],{"class":130,"line":331},[128,869,316],{"emptyLinePlaceholder":315},[128,871,872,875,878,881,883,885],{"class":130,"line":359},[128,873,874],{"class":243},"html",[128,876,877],{"class":152},"[",[128,879,880],{"class":247},"data-theme",[128,882,254],{"class":134},[128,884,181],{"class":168},[128,886,887],{"class":152},"],\n",[128,889,890,893],{"class":130,"line":365},[128,891,892],{"class":247},".dark",[128,894,268],{"class":152},[128,896,897,899,901,903],{"class":130,"line":375},[128,898,780],{"class":779},[128,900,783],{"class":152},[128,902,823],{"class":273},[128,904,789],{"class":152},[128,906,907,909,911,914],{"class":130,"line":380},[128,908,794],{"class":779},[128,910,783],{"class":152},[128,912,913],{"class":273},"#1f2937",[128,915,789],{"class":152},[128,917,918,920,922,925],{"class":130,"line":390},[128,919,806],{"class":779},[128,921,783],{"class":152},[128,923,924],{"class":273},"#374151",[128,926,789],{"class":152},[128,928,929,931,933,935],{"class":130,"line":417},[128,930,818],{"class":779},[128,932,783],{"class":152},[128,934,859],{"class":273},[128,936,789],{"class":152},[128,938,939,941,943,945],{"class":130,"line":423},[128,940,830],{"class":779},[128,942,783],{"class":152},[128,944,811],{"class":273},[128,946,789],{"class":152},[128,948,949,951,953,956],{"class":130,"line":433},[128,950,842],{"class":779},[128,952,783],{"class":152},[128,954,955],{"class":273},"#9ca3af",[128,957,789],{"class":152},[128,959,961,963,965,967],{"class":130,"line":960},19,[128,962,854],{"class":779},[128,964,783],{"class":152},[128,966,823],{"class":273},[128,968,789],{"class":152},[128,970,972],{"class":130,"line":971},20,[128,973,362],{"class":152},[975,976,978],"h3",{"id":977},"surface-border-and-text-hooks","Surface, border, and text hooks",[494,980,981,991],{},[497,982,983],{},[500,984,985,988],{},[503,986,987],{},"Variable",[503,989,990],{},"Used for",[510,992,993,1003,1013,1023,1033,1043,1053,1063,1073,1083],{},[500,994,995,1000],{},[515,996,997],{},[106,998,999],{},"--ncm-code-bg",[515,1001,1002],{},"Diagram block and toolbar background.",[500,1004,1005,1010],{},[515,1006,1007],{},[106,1008,1009],{},"--ncm-code-bg-hover",[515,1011,1012],{},"Toolbar and zoom-control hover surface.",[500,1014,1015,1020],{},[515,1016,1017],{},[106,1018,1019],{},"--ncm-border-color",[515,1021,1022],{},"Border color component.",[500,1024,1025,1030],{},[515,1026,1027],{},[106,1028,1029],{},"--ncm-border-width",[515,1031,1032],{},"Border width component.",[500,1034,1035,1040],{},[515,1036,1037],{},[106,1038,1039],{},"--ncm-border-style",[515,1041,1042],{},"Border style component.",[500,1044,1045,1050],{},[515,1046,1047],{},[106,1048,1049],{},"--ncm-border",[515,1051,1052],{},"Complete diagram-block border shorthand.",[500,1054,1055,1060],{},[515,1056,1057],{},[106,1058,1059],{},"--ncm-border-bottom",[515,1061,1062],{},"Toolbar bottom border.",[500,1064,1065,1070],{},[515,1066,1067],{},[106,1068,1069],{},"--ncm-text",[515,1071,1072],{},"Primary control text.",[500,1074,1075,1080],{},[515,1076,1077],{},[106,1078,1079],{},"--ncm-text-muted",[515,1081,1082],{},"Toolbar title and secondary text.",[500,1084,1085,1090],{},[515,1086,1087],{},[106,1088,1089],{},"--ncm-text-xmuted",[515,1091,1092],{},"Toolbar icon and subdued text.",[975,1094,1096],{"id":1095},"overlay-cursor-and-hint-hooks","Overlay, cursor, and hint hooks",[494,1098,1099,1107],{},[497,1100,1101],{},[500,1102,1103,1105],{},[503,1104,987],{},[503,1106,990],{},[510,1108,1109,1119,1129,1142,1156,1166,1176,1186,1196],{},[500,1110,1111,1116],{},[515,1112,1113],{},[106,1114,1115],{},"--ncm-overlay-bg",[515,1117,1118],{},"Expand-overlay base background.",[500,1120,1121,1126],{},[515,1122,1123],{},[106,1124,1125],{},"--ncm-overlay-opacity",[515,1127,1128],{},"Visible overlay opacity.",[500,1130,1131,1136],{},[515,1132,1133],{},[106,1134,1135],{},"--ncm-overlay-backdrop",[515,1137,1138,1139,473],{},"Visible overlay ",[106,1140,1141],{},"backdrop-filter",[500,1143,1144,1149],{},[515,1145,1146],{},[106,1147,1148],{},"--ncm-expand-target-bg",[515,1150,1151,1152,1155],{},"Expanded diagram background when ",[106,1153,1154],{},"expand.margin"," leaves space.",[500,1157,1158,1163],{},[515,1159,1160],{},[106,1161,1162],{},"--ncm-cursor-expand",[515,1164,1165],{},"Cursor while a diagram can open the expand overlay.",[500,1167,1168,1173],{},[515,1169,1170],{},[106,1171,1172],{},"--ncm-cursor-collapse",[515,1174,1175],{},"Cursor on a closable overlay.",[500,1177,1178,1183],{},[515,1179,1180],{},[106,1181,1182],{},"--ncm-hint-bg",[515,1184,1185],{},"Zoom hint background.",[500,1187,1188,1193],{},[515,1189,1190],{},[106,1191,1192],{},"--ncm-hint-text",[515,1194,1195],{},"Zoom hint text color.",[500,1197,1198,1203],{},[515,1199,1200],{},[106,1201,1202],{},"--ncm-hint-radius",[515,1204,1205],{},"Zoom hint corner radius.",[975,1207,1209],{"id":1208},"toolbar-and-zoom-layout-hooks","Toolbar and zoom layout hooks",[494,1211,1212,1220],{},[497,1213,1214],{},[500,1215,1216,1218],{},[503,1217,987],{},[503,1219,990],{},[510,1221,1222,1232,1242,1252,1262,1272,1282,1292],{},[500,1223,1224,1229],{},[515,1225,1226],{},[106,1227,1228],{},"--ncm-icon-size",[515,1230,1231],{},"Computed base icon size for the renderer.",[500,1233,1234,1239],{},[515,1235,1236],{},[106,1237,1238],{},"--ncm-toolbar-height",[515,1240,1241],{},"Computed toolbar height used to position fullscreen zoom controls.",[500,1243,1244,1249],{},[515,1245,1246],{},[106,1247,1248],{},"--ncm-zoom-gap",[515,1250,1251],{},"Space between zoom controls.",[500,1253,1254,1259],{},[515,1255,1256],{},[106,1257,1258],{},"--ncm-zoom-padding",[515,1260,1261],{},"Zoom-toolbar padding.",[500,1263,1264,1269],{},[515,1265,1266],{},[106,1267,1268],{},"--ncm-zoom-radius",[515,1270,1271],{},"Zoom-toolbar corner radius.",[500,1273,1274,1279],{},[515,1275,1276],{},[106,1277,1278],{},"--ncm-zoom-font-size",[515,1280,1281],{},"Zoom-toolbar font size.",[500,1283,1284,1289],{},[515,1285,1286],{},[106,1287,1288],{},"--ncm-zoom-btn-padding",[515,1290,1291],{},"Zoom button padding.",[500,1293,1294,1299],{},[515,1295,1296],{},[106,1297,1298],{},"--ncm-zoom-btn-radius",[515,1300,1301],{},"Zoom button corner radius.",[102,1303,1304,1305,548,1307,1309],{},"The renderer sets ",[106,1306,1228],{},[106,1308,1238],{},", and cursor variables dynamically. Override them only when you also account for the matching control size and interaction state.",[1311,1312,1313],"style",{},"html pre.shiki code .s-kum, html code.shiki .s-kum{--shiki-default:#D73A49;--shiki-dark:#FF9492}html pre.shiki code .s_Opv, html code.shiki .s_Opv{--shiki-default:#6F42C1;--shiki-dark:#DBB7FF}html pre.shiki code .sjV9Q, html code.shiki .sjV9Q{--shiki-default:#24292E;--shiki-dark:#FFB757}html pre.shiki code .skGVy, html code.shiki .skGVy{--shiki-default:#24292E;--shiki-dark:#F0F3F6}html pre.shiki code .srMev, html code.shiki .srMev{--shiki-default:#032F62;--shiki-dark:#ADDCFF}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 .sx1sP, html code.shiki .sx1sP{--shiki-default:#22863A;--shiki-dark:#72F088}html pre.shiki code .sHg5J, html code.shiki .sHg5J{--shiki-default:#6F42C1;--shiki-dark:#91CBFF}html pre.shiki code .sP0c6, html code.shiki .sP0c6{--shiki-default:#005CC5;--shiki-dark:#91CBFF}html pre.shiki code .s-wDw, html code.shiki .s-wDw{--shiki-default:#6A737D;--shiki-dark:#BDC4CC}html pre.shiki code .sa561, html code.shiki .sa561{--shiki-default:#E36209;--shiki-dark:#FFB757}",{"title":124,"searchDepth":149,"depth":149,"links":1315},[1316,1317,1318,1319,1320,1321],{"id":113,"depth":149,"text":114},{"id":221,"depth":149,"text":222},{"id":483,"depth":149,"text":484},{"id":618,"depth":149,"text":619},{"id":692,"depth":149,"text":693},{"id":756,"depth":149,"text":757,"children":1322},[1323,1324,1325],{"id":977,"depth":156,"text":978},{"id":1095,"depth":156,"text":1096},{"id":1208,"depth":156,"text":1209},null,"Control Mermaid theme resolution and customize the built-in renderer with CSS variables.","md",{},{"title":22,"description":1327},"kJW4bi3fLISyH7BeKfXg7yjf5rFFUvOpneNKrc5lixQ",[1333,1335,1337,1339,1347,1349],{"title":5,"path":6,"stem":7,"children":1334},[],{"title":9,"path":10,"stem":11,"children":1336},[],{"title":13,"path":14,"stem":15,"children":1338},[],{"title":17,"path":18,"stem":19,"children":1340,"page":33},[1341,1343,1345],{"title":22,"path":23,"stem":24,"children":1342},[],{"title":26,"path":27,"stem":28,"children":1344},[],{"title":30,"path":31,"stem":32,"children":1346},[],{"title":35,"path":36,"stem":37,"children":1348},[],{"title":39,"path":40,"stem":41,"children":1350,"page":33},[1351],{"title":44,"path":45,"stem":46,"children":1352},[],1787059980827]