1"use strict";(self.webpackChunkelectronjs=self.webpackChunkelectronjs||[]).push([["25258"],{17132(e,n,t){t.r(n),t.d(n,{metadata:()=>r,default:()=>u,frontMatter:()=>i,contentTitle:()=>l,toc:()=>c,assets:()=>d});var r=JSON.parse('{"id":"latest/tutorial/dark-mode","title":"Dark Mode","description":"\\"Native interfaces\\" include the file picker, window border, dialogs, context menus, and more - anything where the UI comes from your operating system and not from your app. The default behavior is to opt into this automatic theming from the OS.","source":"@site/docs/latest/tutorial/dark-mode.md","sourceDirName":"latest/tutorial","slug":"/latest/tutorial/dark-mode","permalink":"/docs/latest/tutorial/dark-mode","draft":false,"unlisted":false,"editUrl":"https://github.com/electron/electron/edit/main/docs/tutorial/dark-mode.md","tags":[],"version":"current","frontMatter":{"title":"Dark Mode","description":"\\"Native interfaces\\" include the file picker, window border, dialogs, context menus, and more - anything where the UI comes from your operating system and not from your app. The default behavior is to opt into this automatic theming from the OS.","slug":"dark-mode","hide_title":false},"sidebar":"docs","previous":{"title":"Examples Overview","permalink":"/docs/latest/tutorial/examples"},"next":{"title":"Device Access","permalink":"/docs/latest/tutorial/devices"}}'),o=t(74848),s=t(28453),a=t(78476);let i={title:"Dark Mode",description:'"Native interfaces" include the file picker, window border, dialogs, context menus, and more - anything where the UI comes from your operating system and not from your app. The default behavior is to opt into this automatic theming from the OS.',slug:"dark-mode",hide_title:!1},l="Dark Mode",d={},c=[{value:"Overview",id:"overview",level:2},{value:"Automatically update the native interfaces",id:"automatically-update-the-native-interfaces",level:3},{value:"Automatically update your own interfaces",id:"automatically-update-your-own-interfaces",level:3},{value:"Manually update your own interfaces",id:"manually-update-your-own-interfaces",level:3},{value:"macOS settings",id:"macos-settings",level:2},{value:"Example",id:"example",level:2},{value:"How does this work?",id:"how-does-this-work",level:3}];function h(e){let n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",img:"img",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"dark-mode",children:"Dark Mode"})}),"\n",(0,o.jsx)(n.h2,{id:"overview",children:"Overview"}),"\n",(0,o.jsx)(n.h3,{id:"automatically-update-the-native-interfaces",children:"Automatically update the native interfaces"}),"\n",(0,o.jsx)(n.p,{children:'"Native interfaces" include the file picker, window border, dialogs, context\nmenus, and more - anything where the UI comes from your operating system and\nnot from your app. The default behavior is to opt into this automatic theming\nfrom the OS.'}),"\n",(0,o.jsx)(n.h3,{id:"automatically-update-your-own-interfaces",children:"Automatically update your own interfaces"}),"\n",(0,o.jsxs)(n.p,{children:["If your app has its own dark mode, you should toggle it on and off in sync with\nthe system's dark mode setting. You can do this by using the\n",(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:"prefers-color-scheme"})," CSS media query."]}),"\n",(0,o.jsx)(n.h3,{id:"manually-update-your-own-interfaces",children:"Manually update your own interfaces"}),"\n",(0,o.jsxs)(n.p,{children:["If you want to manually switch between light/dark modes, you can do this by\nsetting the desired mode in the\n",(0,o.jsx)(n.a,{href:"/docs/latest/api/native-theme#nativethemethemesource",children:"themeSource"}),"\nproperty of the ",(0,o.jsx)(n.code,{children:"nativeTheme"})," module. This property's value will be propagated\nto your Renderer process. Any CSS rules related to ",(0,o.jsx)(n.code,{children:"prefers-color-scheme"})," will\nbe updated accordingly."]}),"\n",(0,o.jsx)(n.h2,{id:"macos-settings",children:"macOS settings"}),"\n",(0,o.jsxs)(n.p,{children:["In macOS 10.14 Mojave, Apple introduced a new ",(0,o.jsx)(n.a,{href:"https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/dark-mode/",children:"system-wide dark mode"}),"\nfor all macOS computers. If your Electron app has a dark mode, you can make it\nfollow the system-wide dark mode setting using\n",(0,o.jsxs)(n.a,{href:"/docs/latest/api/native-theme",children:["the ",(0,o.jsx)(n.code,{children:"nativeTheme"})," API"]}),"."]}),"\n",(0,o.jsxs)(n.p,{children:['In macOS 10.15 Catalina, Apple introduced a new "automatic" dark mode option\nfor all macOS computers. In order for the ',(0,o.jsx)(n.code,{children:"nativeTheme.shouldUseDarkColors"})," and\n",(0,o.jsx)(n.code,{children:"Tray"})," APIs to work correctly in this mode on Catalina, you need to use Electron\n",(0,o.jsx)(n.code,{children:">=7.0.0"}),", or set ",(0,o.jsx)(n.code,{children:"NSRequiresAquaSystemAppearance"})," to ",(0,o.jsx)(n.code,{children:"false"})," in your\n",(0,o.jsx)(n.code,{children:"Info.plist"})," file for older versions. Both ",(0,o.jsx)(n.a,{href:"https://github.com/electron/packager",children:"Electron Packager"}),"\nand ",(0,o.jsx)(n.a,{href:"https://www.electronforge.io/",children:"Electron Forge"})," have a\n",(0,o.jsxs)(n.a,{href:"https://electron.github.io/packager/main/interfaces/electronpackager.options.html#darwindarkmodesupport",children:[(0,o.jsx)(n.code,{children:"darwinDarkModeSupport"})," option"]}),"\nto automate the ",(0,o.jsx)(n.code,{children:"Info.plist"})," changes during app build time."]}),"\n",(0,o.jsxs)(n.p,{children:["If you wish to opt-out while using Electron > 8.0.0, you must\nset the ",(0,o.jsx)(n.code,{children:"NSRequiresAquaSystemAppearance"})," key in the ",(0,o.jsx)(n.code,{children:"Info.plist"})," file to\n",(0,o.jsx)(n.code,{children:"true"}),". Please note that Electron 8.0.0 and above will not let you opt-out\nof this theming, due to the use of the macOS 10.14 SDK."]}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,o.jsxs)(n.p,{children:["This example demonstrates an Electron application that derives its theme colors from the\n",(0,o.jsx)(n.code,{children:"nativeTheme"}),". Additionally, it provides theme toggle and reset controls using IPC channels."]}),"\n",(0,o.jsx)(a.A,{files:{"index.html":'<!DOCTYPE html>\n<html>\n<head>\n <meta charset="UTF-8">\n <title>Hello World!</title>\n <meta http-equiv="Content-Security-Policy" content="script-src \'self\' \'unsafe-inline\';" />\n <link rel="stylesheet" type="text/css" href="./styles.css">\n</head>\n<body>\n <h1>Hello World!</h1>\n <p>Current theme source: <strong id="theme-source">System</strong></p>\n\n <button id="toggle-dark-mode">Toggle Dark Mode</button>\n <button id="reset-to-system">Reset to System Theme</button>\n\n <script src="renderer.js"><\/script>\n</body>\n</html>\n',"main.js":"const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron/main')\nconst path = require('node:path')\n\nfunction createWindow () {\n const win = new BrowserWindow({\n width: 800,\n height: 600,\n webPreferences: {\n preload: path.join(__dirname, 'preload.js')\n }\n })\n\n win.loadFile('index.html')\n}\n\nipcMain.handle('dark-mode:toggle', () => {\n if (nativeTheme.shouldUseDarkColors) {\n nativeTheme.themeSource = 'light'\n } else {\n nativeTheme.themeSource = 'dark'\n }\n return nativeTheme.shouldUseDarkColors\n})\n\nipcMain.handle('dark-mode:system', () => {\n nativeTheme.themeSource = 'system'\n})\n\napp.whenReady().then(() =>
1 {\n createWindow()\n\n app.on('activate', () => {\n if (BrowserWindow.getAllWindows().length === 0) {\n createWindow()\n }\n })\n})\n\napp.on('window-all-closed', () => {\n if (process.platform !== 'darwin') {\n app.quit()\n }\n})\n","preload.js":"const { contextBridge, ipcRenderer } = require('electron/renderer')\n\ncontextBridge.exposeInMainWorld('darkMode', {\n toggle: () => ipcRenderer.invoke('dark-mode:toggle'),\n system: () => ipcRenderer.invoke('dark-mode:system')\n})\n","renderer.js":"document.getElementById('toggle-dark-mode').addEventListener('click', async () => {\n const isDarkMode = await window.darkMode.toggle()\n document.getElementById('theme-source').innerHTML = isDarkMode ? 'Dark' : 'Light'\n})\n\ndocument.getElementById('reset-to-system').addEventListener('click', async () => {\n await window.darkMode.system()\n document.getElementById('theme-source').innerHTML = 'System'\n})\n","styles.css":":root {\n color-scheme: light dark;\n}\n\n@media (prefers-color-scheme: dark) {\n body { background: #333; color: white; }\n}\n\n@media (prefers-color-scheme: light) {\n body { background: #ddd; color: black; }\n}\n"},dir:"docs/latest/fiddles/features/dark-mode",version:"44.4.5",focus:"main.js"}),"\n",(0,o.jsx)(n.h3,{id:"how-does-this-work",children:"How does this work?"}),"\n",(0,o.jsxs)(n.p,{children:["Starting with the ",(0,o.jsx)(n.code,{children:"index.html"})," file:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",metastring:"title='index.html'",children:'<!DOCTYPE html>\n<html>\n<head>\n <meta charset="UTF-8">\n <title>Hello World!</title>\n <meta http-equiv="Content-Security-Policy" content="script-src \'self\' \'unsafe-inline\';" />\n <link rel="stylesheet" type="text/css" href="./styles.css">\n</head>\n<body>\n <h1>Hello World!</h1>\n <p>Current theme source: <strong id="theme-source">System</strong></p>\n\n <button id="toggle-dark-mode">Toggle Dark Mode</button>\n <button id="reset-to-system">Reset to System Theme</button>\n\n <script src="renderer.js"><\/script>\n</body>\n</html>\n'})}),"\n",(0,o.jsxs)(n.p,{children:["And the ",(0,o.jsx)(n.code,{children:"styles.css"})," file:"]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-css",metastring:"title='styles.css'",children:"@media (prefers-color-scheme: dark) {\n body { background: #333; color: white; }\n}\n\n@media (prefers-color-scheme: light) {\n body { background: #ddd; color: black; }\n}\n"})}),"\n",(0,o.jsxs)(n.p,{children:["The example renders an HTML page with a couple elements. The ",(0,o.jsx)(n.code,{children:'<strong id="theme-source">'}),"\nelement shows which theme is currently selected, and the two ",(0,o.jsx)(n.code,{children:"<button>"})," elements are the\ncontrols. The CSS file uses the ",(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme",children:(0,o.jsx)(n.code,{children:"prefers-color-scheme"})})," media query\nto set the ",(0,o.jsx)(n.code,{children:"<body>"})," element background and text colors."]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"preload.js"})," script adds a new API to the ",(0,o.jsx)(n.code,{children:"window"})," object called ",(0,o.jsx)(n.code,{children:"darkMode"}),". This API\nexposes two IPC channels to the renderer process, ",(0,o.jsx)(n.code,{children:"'dark-mode:toggle'"})," and ",(0,o.jsx)(n.code,{children:"'dark-mode:system'"}),".\nIt also assigns two methods, ",(0,o.jsx)(n.code,{children:"toggle"})," and ",(0,o.jsx)(n.code,{children:"system"}),", which pass messages from the renderer to the\nmain process."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",metastring:"title='preload.js'",children:"const { contextBridge, ipcRenderer } = require('electron')\n\ncontextBridge.exposeInMainWorld('darkMode', {\n toggle: () => ipcRenderer.invoke('dark-mode:toggle'),\n system: () => ipcRenderer.invoke('dark-mode:system')\n})\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Now the renderer process can communicate with the main process securely and perform the necessary\nmutations to the ",(0,o.jsx)(n.code,{children:"nativeTheme"})," object."]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"renderer.js"})," file is responsible for controlling the ",(0,o.jsx)(n.code,{children:"<button>"})," functionality."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",metastring:"title='renderer.js' @t
1s-expect-error=[2,7]",children:"document.getElementById('toggle-dark-mode').addEventListener('click', async () => {\n const isDarkMode = await window.darkMode.toggle()\n document.getElementById('theme-source').innerHTML = isDarkMode ? 'Dark' : 'Light'\n})\n\ndocument.getElementById('reset-to-system').addEventListener('click', async () => {\n await window.darkMode.system()\n document.getElementById('theme-source').innerHTML = 'System'\n})\n"})}),"\n",(0,o.jsxs)(n.p,{children:["Using ",(0,o.jsx)(n.code,{children:"addEventListener"}),", the ",(0,o.jsx)(n.code,{children:"renderer.js"})," file adds ",(0,o.jsx)(n.code,{children:"'click'"})," ",(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener",children:"event listeners"}),"\nto each button element. Each event listener handler makes calls to the respective ",(0,o.jsx)(n.code,{children:"window.darkMode"}),"\nAPI methods."]}),"\n",(0,o.jsxs)(n.p,{children:["Finally, the ",(0,o.jsx)(n.code,{children:"main.js"})," file represents the main process and contains the actual ",(0,o.jsx)(n.code,{children:"nativeTheme"})," API."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-js",children:"const { app, BrowserWindow, ipcMain, nativeTheme } = require('electron')\n\nconst path = require('node:path')\n\nconst createWindow = () => {\n const win = new BrowserWindow({\n width: 800,\n height: 600,\n webPreferences: {\n preload: path.join(__dirname, 'preload.js')\n }\n })\n\n win.loadFile('index.html')\n\n ipcMain.handle('dark-mode:toggle', () => {\n if (nativeTheme.shouldUseDarkColors) {\n nativeTheme.themeSource = 'light'\n } else {\n nativeTheme.themeSource = 'dark'\n }\n return nativeTheme.shouldUseDarkColors\n })\n\n ipcMain.handle('dark-mode:system', () => {\n nativeTheme.themeSource = 'system'\n })\n}\n\napp.whenReady().then(() => {\n createWindow()\n\n app.on('activate', () => {\n if (BrowserWindow.getAllWindows().length === 0) {\n createWindow()\n }\n })\n})\n\napp.on('window-all-closed', () => {\n if (process.platform !== 'darwin') {\n app.quit()\n }\n})\n"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"ipcMain.handle"})," methods are how the main process responds to the click events from the buttons\non the HTML page."]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"'dark-mode:toggle'"})," IPC channel handler method checks the ",(0,o.jsx)(n.code,{children:"shouldUseDarkColors"})," boolean property,\nsets the corresponding ",(0,o.jsx)(n.code,{children:"themeSource"}),", and then returns the current ",(0,o.jsx)(n.code,{children:"shouldUseDarkColors"})," property.\nLooking back on the renderer process event listener for this IPC channel, the return value from this\nhandler is utilized to assign the correct text to the ",(0,o.jsx)(n.code,{children:"<strong id='theme-source'>"})," element."]}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"'dark-mode:system'"})," IPC channel handler method assigns the string ",(0,o.jsx)(n.code,{children:"'system'"})," to the ",(0,o.jsx)(n.code,{children:"themeSource"}),"\nand returns nothing. This also corresponds with the relative renderer process event listener as the\nmethod is awaited with no return value expected."]}),"\n",(0,o.jsx)(n.p,{children:'Run the example using Electron Fiddle and then click the "Toggle Dark Mode" button; the app should\nstart alternating between a light and dark background color.'}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"Dark Mode",src:t(96828).A+"",width:"810",height:"613"})})]})}function u(e={}){let{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},96828(e,n,t){t.d(n,{A:()=>r});let r=t.p+"assets/images/dark_mode-495e2c44ffc3f1b3a03219255e438870.gif"},57250(e,n,t){t.d(n,{A:()=>i});var r=t(74848);t(96540);var o=t(18215),s=t(57663);function a({children:e,className:n,hidden:t}){return(0,r.jsx)("div",{role:"tabpanel",className:(0,o.A)("tabItem_Ymn6",n),hidden:t,children:e})}function i({children:e,className:n,value:t}){let{selectedValue:o,lazy:l}=(0,s.uc)(),d=t===o;return!d&&l?null:(0,r.jsx)(a,{className:n,hidden:!d,children:e})}},50773(e,n,t){t.d(n,{A:()=>u});var r=t(74848);t(96540);var o=t(18215),s=t(88287),a=t(57663),i=t(28584),l=t(19863);function d({className:e}){let{selectedValue:n,selectValue:t,tabValues:s,block:l}=(0,a.uc)(),c=[],{blockElementScrollPositionUntilNextRender:h}=(0,i.a_)(),u=e=>{let r=e.currentTarget,o=s[c.indexOf(r)].value;o!==n&&(h(r),t(o))},m=e=>{let n=null;switch(e.key){case"Enter":u(e);break;case"ArrowRight":{let t=c.indexOf(e.currentTarget)+1;n=c[t]??c[0];break}case"ArrowLeft":{let t=c.indexOf(e.currentTarget)-1;n=c[t]??c[c.length-1]}}n?.focus()};return(0,r.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,o.A)("tabs",{"tabs--block":l}
1,e),children:s.map(({value:e,label:t,attributes:s})=>(0,r.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{c.push(e)},onKeyDown:m,onClick:u,...s,className:(0,o.A)("tabs__item","tabItem_LNqP",s?.className,{"tabs__item--active":n===e}),children:t??e},e))})}function c({children:e}){return(0,r.jsx)("div",{className:"margin-top--md",children:e})}function h({className:e,children:n}){return(0,r.jsxs)("div",{className:(0,o.A)(s.G.tabs.container,"tabs-container","tabList__CuJ"),children:[(0,r.jsx)(d,{className:e}),(0,r.jsx)(c,{children:n})]})}function u(e){let n=(0,l.A)(),t=(0,a.OC)(e);return(0,r.jsx)(a.O_,{value:t,children:(0,r.jsx)(h,{className:e.className,children:(0,a.vT)(e.children)})},String(n))}},57663(e,n,t){t.d(n,{OC:()=>u,O_:()=>f,uc:()=>p,vT:()=>c});var r=t(74848),o=t(96540),s=t(56347),a=t(99989),i=t(96629),l=t(80618),d=t(41367);function c(e){return o.Children.toArray(e).filter(e=>"\n"!==e)}function h({value:e,tabValues:n}){return n.some(n=>n.value===e)}function u(e){let n,{defaultValue:t,queryString:r=!1,groupId:c}=e,u=function(e){let{values:n,children:t}=e;return(0,o.useMemo)(()=>{let e=n??o.Children.toArray(t).flatMap(e=>{if(!e)return[];if((0,o.isValidElement)(e)&&function(e){let{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return[e];let n="string"==typeof e.type?e.type:e.type.name;throw Error(`Docusaurus error: Bad <Tabs> child <${n}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop. 2If you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:n,attributes:t,default:r}})=>({value:e,label:n,attributes:t,default:r})),r=(0,l.XI)(e,(e,n)=>e.value===n.value);if(r.length>0)throw Error(`Docusaurus error: Duplicate values "${r.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`);return e},[n,t])}(e),[m,p]=(0,o.useState)(()=>(function({defaultValue:e,tabValues:n}){if(0===n.length)throw Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!h({value:e,tabValues:n}))throw Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}let t=n.find(e=>e.default)??n[0];if(!t)throw Error("Unexpected error: 0 tabValues");return t.value})({defaultValue:t,tabValues:u})),[f,g]=function({queryString:e=!1,groupId:n}){let t=(0,s.W6)(),r=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:e,groupId:n});return[(0,i.aZ)(r),(0,o.useCallback)(e=>{if(!r)return;let n=new URLSearchParams(t.location.search);n.set(r,e),t.replace({...t.location,search:n.toString()})},[r,t])]}({queryString:r,groupId:c}),[x,y]=function({groupId:e}){let n=e?`docusaurus.tab.${e}`:null,[t,r]=(0,d.Dv)(n);return[t,(0,o.useCallback)(e=>{n&&r.set(e)},[n,r])]}({groupId:c}),v=h({value:n=f??x,tabValues:u})?n:null;return(0,a.A)(()=>{v&&p(v)},[v]),{selectedValue:m,selectValue:(0,o.useCallback)(e=>{if(!h({value:e,tabValues:u}))throw Error(`Can't select invalid tab value=${e}`);p(e),g(e),y(e)},[g,y,u]),tabValues:u,lazy:e.lazy??!1,block:e.block??!1}}let m=(0,o.createContext)(null);function p(){let e=o.useContext(m);if(!e)throw Error("useTabsContext() must be used within a Tabs component");return e}function f(e){return(0,r.jsx)(m.Provider,{value:e.value,children:e.children})}},78476(e,n,t){t.d(n,{A:()=>c});var r=t(74848);t(96540);var o=t(50773),s=t(57250),a=t(1113);let i="dot_YdbR",l={"main.js":4,"preload.js":3,"index.html":2,"renderer.js":1};function d({children:e,version:n,gitDir:t}){return(0,r.jsxs)("div",{className:"editorWindow_ZQWz",children:[(0,r.jsxs)("div",{className:"editorWindowHeader_GqG7",children:[(0,r.jsxs)("div",{className:"buttons_msmS",children:[(0,r.jsx)("span",{className:i,style:{background:"#f25f58"}}),(0,r.jsx)("span",{className:i,style:{background:"#fbbe3c"}}),(0,r.jsx)("span",{className:i,style:{background:"#58cb42"}})]}),(0,r.jsxs)("a",{className:"editorTitle_buME",href:`https://github.com/electron/electron/tree/v${n}/${t}`,children:[t," (",n,")"]}),(0,r.jsx)("a",{target:"_blank",className:"button button--primary button--md",href:`https://fiddle.electronjs.org/launch?target=electron/v${n}/${t}`,rel:"noreferrer",children:"Open in Fiddle"})]}),(0,r.jsx)("div",{className:"editorWindowBody_R11m",children:e})]})}let c=e=>{let{files:n,focus:t,version:i,dir:c}=e,h=c.replace(/docs\/[a-zA-Z0-9-]+\/fiddles/,"docs/fiddles"),u=Object.keys(n).sort((e,n)=>l[n]-l[e]),m=u.map(e=>({label:e,value:e}));return(0,r.jsx)(d,{version:i,gitDir:h,children:(0,r.jsx)(o.A,{values:m,defaultValue:t||"main.js",children:u.map(e=>(0,r.jsx)(s.A,{value:e,children:(0,r.jsx)(a.A,{className:`language-${e.split(".").pop()}`,children:n[e]})},e))})})}},28453(e,n,t){t.d(n,{R:()=>a,x:()=>i});var r=t(96540);let o={},s=r.createContext(o);function a(e){let n=r.useContext(s);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:a(e.components),r.createElement(s.Provider,{value:n},e.children)}}}]);
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.