https://www.builder.io/assets/dark-mode-styles-Dn9U7o39.js

1import{r as a,a as o,j as l,F as k}from"./components-tbqp4LHE.js";import{t as n}from"./theme-BOLGN68F.js";import{T as h,g as s}from"./_mui-stubs-C6qXw3RW.js";import{s as u,m as p,l as g}from"./breakpoints-CkxSFSio.js";import{a as f,s as b}from"./init-referrer-cookie-DVq9jfzJ.js";const c=s.default||s,v=e=>o(c,{...e,children:l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24","stroke-width":"2",stroke:"currentColor",fill:"none","stroke-linecap":"round","stroke-linejoin":"round",children:[o("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o("circle",{cx:"12",cy:"12",r:"4"}),o("path",{d:"M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"})]})}),M=e=>l(c,{...e,children:[o("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),o("path",{d:"M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"})]}),w="builder.darkMode";function i(){const e=navigator?navigator.userAgent.toLowerCase():"";if(e.includes("android")||e.includes("iphone"))return null;const t=f(w);return!t||typeof t!="string"?window?.matchMedia("(prefers-color-scheme: dark)").matches:t==="true"}function m(e){b("builder.darkMode",String(e),365*10,location.hostname.endsWith("builder.io")?";domain=builder.io":void 0)}function x(e){const[t,r]=a.useState(null);return a.useEffect(()=>{const d=i();r(d),d&&document.documentElement.classList.add("dark-mode")},[]),o("button",{css:{all:"unset",cursor:"pointer",position:"fixed",top:128,right:40,zIndex:101,[g]:{top:118,right:40},[p]:{top:170,right:32},[u]:{top:170,right:9}},className:e.className,onClick:()=>{i()?(document.documentElement.classList.remove("dark-mode"),m(!1),r(!1)):(document.documentElement.classList.add("dark-mode"),m(!0),r(!0)),document.dispatchEvent(new Event("builder.toggleDarkMode"))},children:t!==null&&o(h,{title:"Toggle Dark Mode",children:t?o(v,{css:{width:"0.7em",height:"0.7em"}}):o(M,{css:{width:"0.7em",height:"0.7em"}})})})}function S(e){return a.useEffect(()=>{i()&&document.documentElement.classList.add("dark-mode")},[]),l(k,{children:[!e.hideToggle&&o(x,{className:e.className}),o("style",{children:`
2      html.dark-mode {
3        filter: ${n.darkModeFilter};
4      }
5      html.dark-mode :is(.builder-brand-tokens, .dark-mode, .dark-mode-invert, .monaco-editor, img, video, iframe) {
6        filter: ${n.darkModeFilterReverse};
7      }
8      html.dark-mode .builder-brand-tokens :is(img, video, iframe) {
9        filter: none;
10      }
11      /* backdrop-filter samples already-inverted content, then the reverse filter re-inverts
12         it — a double-inversion that brightens the transparent background. Kill the blur and
13         make semi-transparent backgrounds fully opaque so content doesn't bleed through. */
14      html.dark-mode .builder-brand-tokens {
15        backdrop-filter: none;
16      }
17      html.dark-mode .docs-header {
18        background: #0A0A0A;
19      }
20      html.dark-mode [data-megamenu-portal] .builder-brand-tokens::before {
21        background: #0A0A0A;
22      }
23      html.dark-mode :is(video:fullscreen) {
24        filter: invert(0%);
25      }
26      html.dark-mode .no-filter {
27        filter: none !important;
28      }
29      /* Shadows look weird with inverted colors */
30      html.dark-mode * {
31        box-shadow: none !important;
32      }
33
34      .code-block {
35        margin: 0 -20px;
36        padding: 20px;
37        box-shadow: none !important;
38      }
39
40      .code-block {
41        background: #1e2129;
42      }
43
44      html.dark-mode .code-block {
45        filter: ${n.darkModeFilterReverse};
46        margin: 0 -20px;
47        padding: 20px;
48        background: black;
49        border: 1px solid #222;
50      }
51
52      html.dark-mode .dark-mode-no-filter {
53        filter: none !important;
54      }
55
56      html.dark-mode .dark-mode-no-filter-images img {
57        filter: none !important;
58      }
59
60      .code-block pre {
61        background-color: transparent !important;
62      }
63
64      html.dark-mode .dark-mode-hidden {
65        display: none !important;
66      }
67
68      html:not(.dark-mode) .light-mode-hidden {
69        display: none !important;
70      }
71    `})]})}

71export{S as D};