1// Has to be in the head tag, otherwise a flicker effect will occur. 2 3// Toggle through light, dark, and system theme settings. 4let toggleThemeSetting = () => { 5 let themeSetting = determineThemeSetting(); 6 if (themeSetting == "system") { 7 setThemeSetting("light"); 8 } else if (themeSetting == "light") { 9 setThemeSetting("dark"); 10 } else { 11 setThemeSetting("system"); 12 } 13}; 14 15// Change the theme setting and apply the theme. 16let setThemeSetting = (themeSetting) => { 17 localStorage.setItem("theme", themeSetting); 18 19 document.documentElement.setAttribute("data-theme-setting", themeSetting); 20 21 applyTheme(); 22}; 23 24// Apply the computed dark or light theme to the website. 25let applyTheme = () => { 26 let theme = determineComputedTheme(); 27 28 transTheme(); 29 setHighlight(theme); 30 setGiscusTheme(theme); 31 setSearchTheme(theme); 32 updateCalendarUrl(); 33 34 // if mermaid is not defined, do nothing 35 if (typeof mermaid !== "undefined") { 36 setMermaidTheme(theme); 37 } 38 39 // if diff2html is not defined, do nothing 40 if (typeof Diff2HtmlUI !== "undefined") { 41 setDiff2htmlTheme(theme); 42 } 43 44 // if echarts is not defined, do nothing 45 if (typeof echarts !== "undefined") { 46 setEchartsTheme(theme); 47 } 48 49 // if Plotly is not defined, do nothing 50 if (typeof Plotly !== "undefined") { 51 setPlotlyTheme(theme); 52 } 53 54 // if vegaEmbed is not defined, do nothing 55 if (typeof vegaEmbed !== "undefined") { 56 setVegaLiteTheme(theme); 57 } 58 59 document.documentElement.setAttribute("data-theme", theme); 60 61 // Add class to tables. 62 let tables = document.getElementsByTagName("table"); 63 for (let i = 0; i < tables.length; i++) { 64 if (theme == "dark") { 65 tables[i].classList.add("table-dark"); 66 } else { 67 tables[i].classList.remove("table-dark"); 68 } 69 } 70 71 // Set jupyter notebooks themes. 72 let jupyterNotebooks = document.getElementsByClassName("jupyter-notebook-iframe-container"); 73 for (let i = 0; i < jupyterNotebooks.length; i++) { 74 let bodyElement = jupyterNotebooks[i].getElementsByTagName("iframe")[0].contentWindow.document.body; 75 if (theme == "dark") { 76 bodyElement.setAttribute("data-jp-theme-light", "false"); 77 bodyElement.setAttribute("data-jp-theme-name", "JupyterLab Dark"); 78 } else { 79 bodyElement.setAttribute("data-jp-theme-light", "true"); 80 bodyElement.setAttribute("data-jp-theme-name", "JupyterLab Light"); 81 } 82 } 83 84 // Updates the background of medium-zoom overlay. 85 if (typeof medium_zoom !== "undefined") { 86 medium_zoom.update({ 87 background: getComputedStyle(document.documentElement).getPropertyValue("--global-bg-color") + "ee", // + 'ee' for trasparency. 88 }); 89 } 90}; 91 92let setHighlight = (theme) => { 93 if (theme == "dark") { 94 document.getElementById("highlight_theme_light").media = "none"; 95 document.getElementById("highlight_theme_dark").media = ""; 96 } else { 97 document.getElementById("highlight_theme_dark").media = "none"; 98 document.getElementById("highlight_theme_light").media = ""; 99 } 100}; 101 102let setGiscusTheme = (theme) => { 103 function sendMessage(message) { 104 const iframe = document.querySelector("iframe.giscus-frame"); 105 if (!iframe) return; 106 iframe.contentWindow.postMessage({ giscus: message }, "https://giscus.app"); 107 } 108 109 sendMessage({ 110 setConfig: { 111 theme: theme, 112 }, 113 }); 114}; 115 116let addMermaidZoom = (records, observer) => { 117 var svgs = d3.selectAll(".mermaid svg"); 118 svgs.each(function () { 119 var svg = d3.select(this); 120 svg.html("<g>" + svg.html() + "</g>"); 121 var inner = svg.select("g"); 122 var zoom = d3.zoom().on("zoom", function (event) { 123 inner.attr("transform", event.transform); 124 }); 125 svg.call(zoom); 126 }); 127 observer.disconnect(); 128}; 129 130let setMermaidTheme = (theme) => { 131 if (theme == "light") { 132 // light theme name in mermaid is 'default' 133 // https://mermaid.js.org/config/theming.html#available-themes 134 theme = "default"; 135 } 136 137 /* Re-render the SVG, based on https://github.com/cotes2020/jekyll-theme-chirpy/blob/master/_includes/mermaid.html */ 138 document.querySelectorAll(".mermaid").forEach((elem) => { 139 // Get the code block content from previous element, since it is the mermaid code itself as defined in Markdown, but it is hidden 140 let svgCode = elem.previousSibling.childNodes[0].innerHTML; 141 elem.removeAttribute("data-processed"); 142 elem.innerHTML = svgCode; 143 }); 144 145 mermaid.initialize({ theme: theme }); 146 window.mermaid.init(undefined, document.querySelectorAll(".mermaid")); 147 148 const observable = document.querySelector(".mermaid svg"); 149 if (observable !== null) { 150 var observer = new MutationObserver(addMermaidZoom); 151 const observerOptions = { childList: true }; 152 observer.observe(observable, observerOptions); 153 } 154}; 155 156let setDiff2htmlTheme = (theme) => { 157 document.querySelectorAll(".diff2html").forEach((elem) => { 158 // Get the code block content from previous element, since it is the diff code itself as defined in Markdown, but it is hidden 159 let textData = elem.previousSibling.childNodes[0].innerHTML; 160 elem.innerHTML = ""; 161 const configuration = { colorScheme: theme, drawFileList: true, highlight: true, matching: "lines" }; 162 const diff2htmlUi = new Diff2HtmlUI(elem, textData, configuration); 163 diff2htmlUi.draw(); 164 }); 165}; 166 167let setEchartsTheme = (theme) => { 168 document.querySelectorAll(".echarts").forEach((elem) => { 169 // Get the code block content from previous element, since it is the echarts code itself as defined in Markdown, but it is hidden 170 let jsonData = elem.previousSibling.childNodes[0].innerHTML; 171 echarts.dispose(elem); 172 173 if (theme === "dark") { 174 var chart = echarts.init(elem, "dark-fresh-cut"); 175 } else { 176 var chart = echarts.init(elem); 177 } 178 179 chart.setOption(JSON.parse(jsonData)); 180 }); 181}; 182 183let setPlotlyTheme = (theme) => { 184 document.querySelectorAll(".js-plotly-plot").forEach((elem) => { 185 // Get the code block content from previous element, since it is the plotly code itself as defined in Markdown, but it is hidden 186 let jsonData = JSON.parse(elem.previousSibling.childNodes[0].innerHTML); 187 188 if (theme === "dark") { 189 // dark theme extracted from https://github.com/plotly/plotly.py/blob/main/plotly/package_data/templates/plotly_dark.json?raw=true 190 // prettier-ignore 191 const plotlyDarkLayout = {"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#f2f5fa"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"rgb(17,17,17)","plot_bgcolor":"rgb(17,17,17)","polar":{"bgcolor":"rgb(17,17,17)","angularaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"radialaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""}},"ternary":{"bgcolor":"rgb(17,17,17)","aaxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"baxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""},"caxis":{"gridcolor":"#506784","linecolor":"#506784","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"#283442","linecolor":"#506784","ticks":"","title":{"standoff":15},"zerolinecolor":"#283442","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"#283442","linecolor":"#506784","ticks":"","title":{"standoff":15},"zerolinecolor":"#283442","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2},"yaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2},"zaxis":{"backgroundcolor":"rgb(17,17,17)","gridcolor":"#506784","linecolor":"#506784","showbackground":true,"ticks":"","zerolinecolor":"#C8D4E3","gridwidth":2}},"shapedefaults":{"line":{"color":"#f2f5fa"}},"annotationdefaults":{"arrowcolor":"#f2f5fa","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"rgb(17,17,17)","landcolor":"rgb(17,17,17)","subunitcolor":"#506784","showland":true,"showlakes":true,"lakecolor":"rgb(17,17,17)"},"title":{"x":0.05},"updatemenudefaults":{"bgcolor":"#506784","borderwidth":0},"sliderdefaults":{"bgcolor":"#C8D4E3","borderwidth":1,"bordercolor":"rgb(17,17,17)","tickwidth":0},"mapbox":{"style":"dark"}},"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"marker":{"line":{"color":"#283442"}},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#f2f5fa"},"error_y":{"color":"#f2f5fa"},"marker":{"line":{"color":"rgb(17,17,17)","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"marker":{"line":{"color":"#283442"}},"type":"scattergl"}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermap":[{"type":"scattermap","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#A2B1C6","gridcolor":"#506784","linecolor":"#506784","minorgridcolor":"#506784","startlinecolor":"#A2B1C6"},"baxis":{"endlinecolor":"#A2B1C6","gridcolor":"#506784","linecolor":"#506784","minorgridcolor":"#506784","startlinecolor":"#A2B1C6"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#506784"},"line":{"color":"rgb(17,17,17)"}},"header":{"fill":{"color":"#2a3f5f"},"line":{"color":"rgb(17,17,17)"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"rgb(17,17,17)","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]}}; 192 193 // if jsonData.layout exists, then update the theme 194 if (jsonData.layout) { 195 if (jsonData.layout.template) { 196 jsonData.layout.template = { ...plotlyDarkLayout, ...jsonData.layout.template }; 197 } else { 198 jsonData.layout.template = plotlyDarkLayout; 199 } 200 } else { 201 jsonData.layout = { template: plotlyDarkLayout }; 202 } 203 } else { 204 // light theme extracted from https://github.com/plotly/plotly.py/blob/main/plotly/package_data/templates/plotly_white.json?raw=true 205 // prettier-ignore 206 const plotlyLightLayout = {"layout":{"autotypenumbers":"strict","colorway":["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],"font":{"color":"#2a3f5f"},"hovermode":"closest","hoverlabel":{"align":"left"},"paper_bgcolor":"white","plot_bgcolor":"white","polar":{"bgcolor":"white","angularaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":""},"radialaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":""}},"ternary":{"bgcolor":"white","aaxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""},"baxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""},"caxis":{"gridcolor":"#DFE8F3","linecolor":"#A2B1C6","ticks":""}},"coloraxis":{"colorbar":{"outlinewidth":0,"ticks":""}},"colorscale":{"sequential":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"sequentialminus":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]],"diverging":[[0,"#8e0152"],[0.1,"#c51b7d"],[0.2,"#de77ae"],[0.3,"#f1b6da"],[0.4,"#fde0ef"],[0.5,"#f7f7f7"],[0.6,"#e6f5d0"],[0.7,"#b8e186"],[0.8,"#7fbc41"],[0.9,"#4d9221"],[1,"#276419"]]},"xaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":"","title":{"standoff":15},"zerolinecolor":"#EBF0F8","automargin":true,"zerolinewidth":2},"yaxis":{"gridcolor":"#EBF0F8","linecolor":"#EBF0F8","ticks":"","title":{"standoff":15},"zerolinecolor":"#EBF0F8","automargin":true,"zerolinewidth":2},"scene":{"xaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2},"yaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2},"zaxis":{"backgroundcolor":"white","gridcolor":"#DFE8F3","linecolor":"#EBF0F8","showbackground":true,"ticks":"","zerolinecolor":"#EBF0F8","gridwidth":2}},"shapedefaults":{"line":{"color":"#2a3f5f"}},"annotationdefaults":{"arrowcolor":"#2a3f5f","arrowhead":0,"arrowwidth":1},"geo":{"bgcolor":"white","landcolor":"white","subunitcolor":"#C8D4E3","showland":true,"showlakes":true,"lakecolor":"white"},"title":{"x":0.05},"mapbox
206":{"style":"light"}},"data":{"histogram2dcontour":[{"type":"histogram2dcontour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"choropleth":[{"type":"choropleth","colorbar":{"outlinewidth":0,"ticks":""}}],"histogram2d":[{"type":"histogram2d","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"heatmap":[{"type":"heatmap","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"contourcarpet":[{"type":"contourcarpet","colorbar":{"outlinewidth":0,"ticks":""}}],"contour":[{"type":"contour","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"surface":[{"type":"surface","colorbar":{"outlinewidth":0,"ticks":""},"colorscale":[[0.0,"#0d0887"],[0.1111111111111111,"#46039f"],[0.2222222222222222,"#7201a8"],[0.3333333333333333,"#9c179e"],[0.4444444444444444,"#bd3786"],[0.5555555555555556,"#d8576b"],[0.6666666666666666,"#ed7953"],[0.7777777777777778,"#fb9f3a"],[0.8888888888888888,"#fdca26"],[1.0,"#f0f921"]]}],"mesh3d":[{"type":"mesh3d","colorbar":{"outlinewidth":0,"ticks":""}}],"scatter":[{"fillpattern":{"fillmode":"overlay","size":10,"solidity":0.2},"type":"scatter"}],"parcoords":[{"type":"parcoords","line":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolargl":[{"type":"scatterpolargl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"bar":[{"error_x":{"color":"#2a3f5f"},"error_y":{"color":"#2a3f5f"},"marker":{"line":{"color":"white","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"bar"}],"scattergeo":[{"type":"scattergeo","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterpolar":[{"type":"scatterpolar","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"histogram":[{"marker":{"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"histogram"}],"scattergl":[{"type":"scattergl","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatter3d":[{"type":"scatter3d","line":{"colorbar":{"outlinewidth":0,"ticks":""}},"marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermap":[{"type":"scattermap","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattermapbox":[{"type":"scattermapbox","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scatterternary":[{"type":"scatterternary","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"scattercarpet":[{"type":"scattercarpet","marker":{"colorbar":{"outlinewidth":0,"ticks":""}}}],"carpet":[{"aaxis":{"endlinecolor":"#2a3f5f","gridcolor":"#C8D4E3","linecolor":"#C8D4E3","minorgridcolor":"#C8D4E3","startlinecolor":"#2a3f5f"},"baxis":{"endlinecolor":"#2a3f5f","gridcolor":"#C8D4E3","linecolor":"#C8D4E3","minorgridcolor":"#C8D4E3","startlinecolor":"#2a3f5f"},"type":"carpet"}],"table":[{"cells":{"fill":{"color":"#EBF0F8"},"line":{"color":"white"}},"header":{"fill":{"color":"#C8D4E3"},"line":{"color":"white"}},"type":"table"}],"barpolar":[{"marker":{"line":{"color":"white","width":0.5},"pattern":{"fillmode":"overlay","size":10,"solidity":0.2}},"type":"barpolar"}],"pie":[{"automargin":true,"type":"pie"}]}}; 207 208 // if jsonData.layout exists, then update the theme 209 if (jsonData.layout) { 210 if (jsonData.layout.template) { 211 jsonData.layout.template = { ...plotlyLightLayout, ...jsonData.layout.template }; 212 } else { 213 jsonData.layout.template = plotlyLightLayout; 214 } 215 } else { 216 jsonData.layout = { template: plotlyLightLayout }; 217 } 218 } 219 220 Plotly.relayout(elem, jsonData.layout); 221 }); 222}; 223 224let setVegaLiteTheme = (theme) => { 225 document.querySelectorAll(".vega-lite").forEach((elem) => { 226 // Get the code block content from previous element, since it is the vega lite code itself as defined in Markdown, but it is hidden 227 let jsonData = elem.previousSibling.childNodes[0].innerHTML; 228 elem.innerHTML = ""; 229 if (theme === "dark") { 230 vegaEmbed(elem, JSON.parse(jsonData), { theme: "dark" }); 231 } else { 232 vegaEmbed(elem, JSON.parse(jsonData)); 233 } 234 }); 235}; 236 237let setSearchTheme = (theme) => { 238 const ninjaKeys = document.querySelector("ninja-keys"); 239 if (!ninjaKeys) return; 240 241 if (theme === "dark") { 242 ninjaKeys.classList.add("dark"); 243 } else { 244 ninjaKeys.classList.remove("dark"); 245 } 246}; 247 248let transTheme = () => { 249 document.documentElement.classList.add("transition"); 250 window.setTimeout(() => { 251 document.documentElement.classList.remove("transition"); 252 }, 260); 253}; 254 255// Determine the expected state of the theme toggle, which can be "dark", "light", or
256// "system". Default is "system". 257let determineThemeSetting = () => { 258 let themeSetting = localStorage.getItem("theme"); 259 if (themeSetting != "dark" && themeSetting != "light" && themeSetting != "system") { 260 themeSetting = "system"; 261 } 262 return themeSetting; 263}; 264 265// Determine the computed theme, which can be "dark" or "light". If the theme setting is 266// "system", the computed theme is determined based on the user's system preference. 267let determineComputedTheme = () => { 268 let themeSetting = determineThemeSetting(); 269 if (themeSetting == "system") { 270 const userPref = window.matchMedia; 271 if (userPref && userPref("(prefers-color-scheme: dark)").matches) { 272 return "dark"; 273 } else { 274 return "light"; 275 } 276 } else { 277 return themeSetting; 278 } 279}; 280 281let initTheme = () => { 282 let themeSetting = determineThemeSetting(); 283 284 setThemeSetting(themeSetting); 285 286 // Add event listener to the theme toggle button. 287 document.addEventListener("DOMContentLoaded", function () { 288 const mode_toggle = document.getElementById("light-toggle"); 289 290 mode_toggle.addEventListener("click", function () { 291 toggleThemeSetting(); 292 }); 293 }); 294 295 // Add event listener to the system theme preference change. 296 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches }) => { 297 applyTheme(); 298 }); 299}; 300 301// Get the appropriate background color for Google Calendar based on current theme 302let getCalendarBgColor = () => { 303 let theme = determineComputedTheme(); 304 return theme === "dark" ? "333333" : "f9f9f9"; 305}; 306 307// Get the Google Calendar embed URL with the correct background color 308let getCalendarUrl = (calendarId, timezone = "UTC") => { 309 const baseUrl = "https://calendar.google.com/calendar/embed"; 310 const params = new URLSearchParams({ 311 src: calendarId, 312 ctz: timezone, 313 mode: "WEEK", 314 showTitle: "0", 315 showPrint: "0", 316 showCalendars: "0", 317 showTabs: "0", 318 bgcolor: getCalendarBgColor(), 319 }); 320 return `${baseUrl}?${params.toString()}`; 321}; 322 323// Update the calendar iframe src to apply theme changes 324let updateCalendarUrl = () => { 325 const iframe = document.getElementById("calendar-iframe"); 326 if (iframe && iframe.dataset.calendarId) { 327 iframe.src = getCalendarUrl(iframe.dataset.calendarId, iframe.dataset.timezone || "UTC"); 328 } 329};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.