var Component=(()=>{var d=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var k=(a,n)=>()=>(n||a((n={exports:{}}).exports,n),n.exports),g=(a,n)=>{for(var s in n)c(a,s,{get:n[s],enumerable:!0})},i=(a,n,s,t)=>{if(n&&typeof n=="object"||typeof n=="function")for(let l of h(n))!N.call(a,l)&&l!==s&&c(a,l,{get:()=>n[l],enumerable:!(t=m(n,l))||t.enumerable});return a};var b=(a,n,s)=>(s=a!=null?d(u(a)):{},i(n||!a||!a.__esModule?c(s,"default",{value:a,enumerable:!0}):s,a)),v=a=>i(c({},"__esModule",{value:!0}),a);var r=k((S,o)=>{o.exports=_jsx_runtime});var M={};g(M,{default:()=>y,frontmatter:()=>x});var e=b(r()),x={title:"Use MUI CSS theme variables to prevent dark-mode SSR flickering in Next.js App",description:"A Step-by-Step Guide to Implementing Dark Mode with MUI and Next.js Without Flickering Issues",tags:["react","next.js","mui","css"],backgroundType:"5",createdAt:new Date(1683361891e3),updatedAt:new Date(1683361891e3)};function p(a){let n=Object.assign({section:"section",h2:"h2",a:"a",span:"span",p:"p",h3:"h3",pre:"pre",code:"code",aside:"aside",div:"div",ul:"ul",li:"li",ol:"ol"},a.components),{MDXLinkPreview:s}=n;return s||w("MDXLinkPreview",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(n.section,{className:"article-section","data-heading-rank":"2",id:"introduction-section",children:[(0,e.jsxs)(n.h2,{id:"introduction",children:[(0,e.jsx)(n.a,{className:"heading-anchor",href:"#introduction",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Introduction"]}),` `,(0,e.jsxs)(n.p,{children:["When building modern web applications, dark mode has become a popular feature that many users appreciate. However, implementing dark mode in a ",(0,e.jsx)(n.a,{href:"https://nextjs.org",children:"Next.js"})," app with ",(0,e.jsx)(n.a,{href:"https://mui.com",children:"Material UI"})," (MUI) can sometimes lead to flickering issues during Server-Side Rendering (SSR). In this blog post, we'll explore how to use MUI ",(0,e.jsx)(n.a,{href:"https://mui.com/material-ui/experimental-api/css-theme-variables/overview",children:"CSS theme variables"})," to prevent dark-mode SSR flickering in your Next.js application."]}),` `,(0,e.jsxs)(n.p,{children:["Here is a demo of what we are going to build: ",(0,e.jsx)(n.a,{href:"https://nextjs-mui-dark-mode.vercel.app/",children:"https://nextjs-mui-dark-mode.vercel.app/"}),"."]}),` `,(0,e.jsxs)(n.p,{children:["Here is the link to the repository of the final project: ",(0,e.jsx)(n.a,{href:"https://github.com/arlenxuzj/nextjs-mui-dark-mode",children:"https://github.com/arlenxuzj/nextjs-mui-dark-mode"}),"."]}),` `]}),(0,e.jsxs)(n.section,{className:"article-section","data-heading-rank":"2",id:"mui-css-theme-variables-section",children:[(0,e.jsxs)(n.h2,{id:"mui-css-theme-variables",children:[(0,e.jsx)(n.a,{className:"heading-anchor",href:"#mui-css-theme-variables",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"MUI CSS Theme Variables"]}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",children:"CSS variables"}),", or custom properties, are a powerful feature of CSS that allows developers to define reusable values for styling properties. By defining a value once and using it in multiple places throughout a stylesheet, developers can create consistent styling across an application, as well as make global changes to styling elements._action_1n6lm_13"]}),` `,(0,e.jsx)(n.p,{children:"MUI CSS theme variables is an experimental feature that allows developers to define custom properties and use them in MUI components. One of the advantages of using MUI CSS theme variables is that they can be used to define a dark mode theme for your application and prevent flickering issues during SSR."}),` `]}),(0,e.jsxs)(n.section,{className:"article-section","data-heading-rank":"2",id:"implementing-dark-mode-with-nextjs-and-mui-section",children:[(0,e.jsxs)(n.h2,{id:"implementing-dark-mode-with-nextjs-and-mui",children:[(0,e.jsx)(n.a,{className:"heading-anchor",href:"#implementing-dark-mode-with-nextjs-and-mui",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Implementing Dark Mode with Next.js and MUI"]}),` `,(0,e.jsxs)(n.section,{className:"article-section","data-heading-rank":"3",id:"download-the-starter-code-section",children:[(0,e.jsxs)(n.h3,{id:"download-the-starter-code",children:[(0,e.jsx)(n.a,{className:"heading-anchor",href:"#download-the-starter-code",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Download the Starter Code"]}),` `,(0,e.jsx)(n.p,{children:"To get started, download the starter code from MUI GitHub repository:"}),` `,(0,e.jsx)(s,{link:"https://github.com/mui/material-ui/tree/master/examples/material-next-ts"}),` `,(0,e.jsx)(n.p,{children:"You can download this code by executing the following command in your terminal:"}),` `,(0,e.jsx)(n.pre,{language:"bash",className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token function",children:"curl"})," https://codeload.github.com/mui/material-ui/tar.gz/master ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token function",children:"tar"})," ",(0,e.jsx)(n.span,{className:"token parameter variable",children:"-xz"})," ",(0,e.jsx)(n.span,{className:"token parameter variable",children:"--strip"}),(0,e.jsx)(n.span,{className:"token operator",children:"="}),(0,e.jsx)(n.span,{className:"token number",children:"2"}),` material-ui-master/examples/material-next-ts `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token builtin class-name",children:"cd"}),` material-next-ts `]})]})}),` `,(0,e.jsx)(n.p,{children:"Install it and run:"}),` `,(0,e.jsx)(n.pre,{language:"bash",className:"language-bash",children:(0,e.jsxs)(n.code,{className:"language-bash code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token function",children:"npm"})," ",(0,e.jsx)(n.span,{className:"token function",children:"install"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token function",children:"npm"}),` run dev `]})]})}),` `]}),(0,e.jsxs)(n.section,{className:"article-section","data-heading-rank":"3",id:"add-custom-theme-section",children:[(0,e.jsxs)(n.h3,{id:"add-custom-theme",children:[(0,e.jsx)(n.a,{className:"heading-anchor",href:"#add-custom-theme",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Add Custom Theme"]}),` `,(0,e.jsxs)(n.p,{children:["Then in the project, replace the contents of ",(0,e.jsx)(n.code,{children:"src/theme.ts"})," with the following code:"]}),` `,(0,e.jsx)(n.pre,{title:"src/theme.ts",className:"language-ts",children:(0,e.jsxs)(n.code,{className:"language-ts code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," purple ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@mui/material/colors'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," experimental_extendTheme ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"})," extendTheme ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@mui/material/styles'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"3",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," theme ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"extendTheme"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" colorSchemes",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" light",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// palette for light mode"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[" palette",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[" primary",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[" main",(0,e.jsx)(n.span,{className:"token operator",children:":"})," purple",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"700"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[" dark",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" ",(0,e.jsx)(n.span,{className:"token comment",children:"// palette for dark mode"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[" palette",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[" primary",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[" main",(0,e.jsx)(n.span,{className:"token operator",children:":"})," purple",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token number",children:"200"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"20",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"22",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"23",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"24",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"25",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," theme",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"26",children:` `})]})}),` `,(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"experimental_extendTheme"})," is an API that allows you to extend the default MUI theme with your own customizations. In this case, we are extending the default MUI theme with a custom color scheme for light and dark mode."]}),` `,(0,e.jsxs)(n.aside,{className:"callout callout-warning",children:[(0,e.jsxs)(n.div,{className:"callout-indicator",children:[(0,e.jsx)(n.div,{className:"callout-icon",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsxs)(n.div,{children:[(0,e.jsx)(n.div,{}),(0,e.jsx)(n.div,{}),(0,e.jsx)(n.div,{})]})})}),(0,e.jsx)(n.div,{className:"callout-title",children:"Warning"})]}),(0,e.jsxs)(n.div,{className:"callout-content",children:[(0,e.jsxs)(n.p,{children:[(0,e.jsx)(n.code,{children:"experimental_extendTheme"})," returns a theme that can only be used by the ",(0,e.jsx)(n.code,{children:"Experimental_CssVarsProvider"})," component, which we will use later in this blog post."]}),(0,e.jsxs)(n.p,{children:["Check ",(0,e.jsx)(n.a,{href:"https://mui.com/material-ui/experimental-api/css-theme-variables/customization/#theming",children:"here"})," for more information."]})]})]}),` `]}),(0,e.jsxs)(n.section,{className:"article-section","data-heading-rank":"3",id:"add-css-variables-provider-section",children:[(0,e.jsxs)(n.h3,{id:"add-css-variables-provider",children:[(0,e.jsx)(n.a,{className:"heading-anchor",href:"#add-css-variables-provider",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Add CSS Variables Provider"]}),` `,(0,e.jsxs)(n.p,{children:["Next, replace the contents of ",(0,e.jsx)(n.code,{children:"pages/_app.tsx"})," with the following code:"]}),` `,(0,e.jsx)(n.pre,{title:"pages/_app.tsx",className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"CacheProvider"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"EmotionCache"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@emotion/react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"CssBaseline"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@mui/material/CssBaseline'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Experimental_CssVarsProvider"})," ",(0,e.jsx)(n.span,{className:"token keyword module",children:"as"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"CssVarsProvider"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@mui/material/styles'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"type"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@mui/material/themeCssVarsAugmentation'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"AppProps"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/app'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Head"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'next/head'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:"createEmotionCache"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../src/createEmotionCache'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:"theme"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'../src/theme'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"9",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// Client-side cache, shared for the whole session of the user in the browser."}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," clientSideEmotionCache ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"createEmotionCache"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"12",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"interface"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"MyAppProps"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"extends"})," ",(0,e.jsx)(n.span,{className:"token class-name",children:"AppProps"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[" emotionCache",(0,e.jsx)(n.span,{className:"token operator",children:"?"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"EmotionCache"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"16",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"MyApp"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"props",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MyAppProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Component"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," emotionCache ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," clientSideEmotionCache",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," pageProps ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," props",(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"20",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"CacheProvider"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"value"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"emotionCache",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Head"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"22",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"viewport",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"initial-scale=1, width=device-width",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"23",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"24",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"CssVarsProvider"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"theme"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"theme",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"defaultMode"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"system",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"25",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token comment",children:"/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"26",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"CssBaseline"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"27",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Component"})]})," ",(0,e.jsxs)(n.span,{className:"token spread",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token spread operator",children:"..."}),"pageProps",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"28",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"29",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"30",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"31",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["The theme we created earlier is passed to the ",(0,e.jsx)(n.code,{children:"Experimental_CssVarsProvider"})," component as a prop. The ",(0,e.jsx)(n.code,{children:"defaultMode"})," prop is set to ",(0,e.jsx)(n.code,{children:"system"}),", which means that the theme will be set to dark mode if the user's operating system is set to dark mode."]}),` `,(0,e.jsxs)(n.p,{children:["Based on the ",(0,e.jsx)(n.a,{href:"https://mui.com/material-ui/experimental-api/css-theme-variables/usage/#typescript",children:"MUI document"}),", the theme variables type is not enabled by default. You need to import the module augmentation to enable the typings by ",(0,e.jsx)(n.code,{children:"import type {} from '@mui/material/themeCssVarsAugmentation';"}),", which is in line 4 of the code above. The import can be in any file that is included in your ",(0,e.jsx)(n.code,{children:"tsconfig.json"})," file."]}),` `]}),(0,e.jsxs)(n.section,{className:"article-section","data-heading-rank":"3",id:"server-side-rendering-section",children:[(0,e.jsxs)(n.h3,{id:"server-side-rendering",children:[(0,e.jsx)(n.a,{className:"heading-anchor",href:"#server-side-rendering",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Server-Side Rendering"]}),` `,(0,e.jsxs)(n.p,{children:["Now, update the ",(0,e.jsx)(n.code,{children:"MyDocument"})," component in ",(0,e.jsx)(n.code,{children:"pages/_document.tsx"})," to the following:"]}),` `,(0,e.jsx)(n.pre,{title:"pages/_document.tsx",className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// ..."}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"2",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," getInitColorSchemeScript ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@mui/material/styles'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"4",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"MyDocument"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," emotionStyleTags ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MyDocumentProps"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"6",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Html"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"lang"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"en",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Head"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"link"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"rel"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"shortcut icon",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"href"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"/favicon.ico",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"meta"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"name"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"emotion-insertion-point",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"content"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"emotionStyleTags",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"13",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"body"]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token function",children:"getInitColorSchemeScript"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" defaultMode",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'system'"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Main"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"NextScript"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"20",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"22",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"23",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"24",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// ..."}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.code,{children:"getInitColorSchemeScript"}),` function is used to generate a script that will be injected into the HTML document. Placing this function before the `,(0,e.jsx)(n.code,{children:"Main"})," component can prevent the dark-mode SSR flickering during the hydration phase."]}),` `]}),(0,e.jsxs)(n.section,{className:"article-section","data-heading-rank":"3",id:"add-example-code-section",children:[(0,e.jsxs)(n.h3,{id:"add-example-code",children:[(0,e.jsx)(n.a,{className:"heading-anchor",href:"#add-example-code",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Add Example Code"]}),` `,(0,e.jsxs)(n.p,{children:["Finally, replace the contents of ",(0,e.jsx)(n.code,{children:"pages/index.tsx"})," with the following code:"]}),` `,(0,e.jsx)(n.pre,{title:"pages/index.tsx",className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"DarkModeIcon"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@mui/icons-material/DarkMode'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"2",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"LightModeIcon"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@mui/icons-material/LightMode'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"4",children:(0,e.jsxs)(n.span,{className:"token imports",children:[" ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Box"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"5",children:(0,e.jsxs)(n.span,{className:"token imports",children:[" ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Button"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"6",children:(0,e.jsxs)(n.span,{className:"token imports",children:[" ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"MenuItem"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"7",children:(0,e.jsxs)(n.span,{className:"token imports",children:[" ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Select"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"8",children:(0,e.jsxs)(n.span,{className:"token imports",children:[" ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Stack"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"9",children:(0,e.jsxs)(n.span,{className:"token imports",children:[" ",(0,e.jsx)(n.span,{className:"token maybe-class-name",children:"Typography"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"10",children:(0,e.jsx)(n.span,{className:"token imports",children:` useColorScheme `})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"11",children:[(0,e.jsx)(n.span,{className:"token imports",children:(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'@mui/material'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"12",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"import"})," ",(0,e.jsxs)(n.span,{className:"token imports",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," useEffect",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," useState ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"from"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'react'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"13",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"14",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"Home"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"15",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," mode",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setMode",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," systemMode ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useColorScheme"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"16",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"currentMode",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setCurrentMode",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsxs)(n.span,{className:"token generic-function",children:[(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsxs)(n.span,{className:"token generic class-name",children:[(0,e.jsx)(n.span,{className:"token operator",children:"<"}),` `]})]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"17",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:"'light'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'dark'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'system'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"undefined"}),` `]})})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:">"})]})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token keyword",children:"undefined"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"resolvedMode",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setResolvedMode",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsxs)(n.span,{className:"token generic-function",children:[(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsxs)(n.span,{className:"token generic class-name",children:[(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token builtin",children:"string"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"undefined"}),(0,e.jsx)(n.span,{className:"token operator",children:">"})]})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"20",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"undefined"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"21",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"22",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"23",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"24",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setCurrentMode"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"mode",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"25",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setResolvedMode"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"systemMode ",(0,e.jsx)(n.span,{className:"token operator",children:"||"})," mode",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"26",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"mode",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"27",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"28",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"29",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Box"})]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"30",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"component"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"main",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"31",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"sx"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"32",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" display",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'flex'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"33",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" flexDirection",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'column'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"34",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" height",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'100vh'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"35",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" width",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'100%'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"36",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" alignItems",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'center'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"37",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" justifyContent",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'center'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"38",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" alignItem",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'center'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"39",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" p",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"3"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"40",children:(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"41",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"42",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Box"})]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"43",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"sx"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"44",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" display",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'flex'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"45",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" gap",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"4"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"46",children:(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"47",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"48",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"svg"]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"49",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"200"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"50",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"200"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"51",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"fill"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"var(--mui-palette-text-primary)",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"52",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"viewBox"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"0 0 128 128",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"53",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"xmlns"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"http://www.w3.org/2000/svg",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"54",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"55",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"path"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"d"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"M30.2 45.9h24.1v1.9H32.4v14.4H53v1.9H32.4v15.8h22.2v1.9H30.2V45.9zm26.3 0h2.6l11.4 15.8L82 45.9l15.8-20-26 37.5 13.4 18.4h-2.7L70.4 65 58.2 81.8h-2.6l13.5-18.4-12.6-17.5zm29.7 1.9v-1.9h27.5v1.9H101v34h-2.2v-34H86.2zM0 45.9h2.7l38.2 56.8-15.8-20.9L2.3 48.6l-.1 33.2H0zm113.5 33.4c.5 0 .8-.3.8-.8s-.3-.8-.8-.8-.8.3-.8.8.4.8.8.8zm2.2-2.1c0 1.3 1 2.2 2.4 2.2 1.5 0 2.4-.9 2.4-2.5v-5.5h-1.2v5.5c0 .9-.4 1.3-1.2 1.3-.7 0-1.2-.4-1.2-1.1h-1.2zm6.3-.1c.1 1.4 1.2 2.3 3 2.3s3-.9 3-2.4c0-1.2-.7-1.8-2.2-2.2l-.9-.2c-1-.2-1.4-.6-1.4-1.1 0-.7.6-1.2 1.6-1.2.9 0 1.5.4 1.6 1.2h1.2c-.1-1.3-1.2-2.2-2.8-2.2-1.7 0-2.8.9-2.8 2.3 0 1.1.6 1.8 2 2.1l1 .2c1 .2 1.5.6 1.5 1.2 0 .7-.7 1.2-1.7 1.2s-1.8-.5-1.9-1.2H122z",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"56",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"57",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Typography"})]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"58",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"variant"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"h1",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"59",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"fontWeight"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"400",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"60",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"sx"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"61",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" alignSelf",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'center'"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"62",children:(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"63",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"64",children:(0,e.jsx)(n.span,{className:"token plain-text",children:` + `})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"65",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"66",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"svg"]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"67",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"width"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"120"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"68",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"height"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"120"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"69",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"viewBox"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"0 0 128 128",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"70",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"style"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"71",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" alignSelf",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'center'"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"72",children:(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"73",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"74",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"path"]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"75",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"fill"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"#1FA6CA",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"76",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"d"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"M.2 68.6V13.4L48 41v18.4L16.1 41v36.8L.2 68.6z",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"77",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"78",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"path"]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"79",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"fill"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"#1C7FB6",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"80",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"d"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"M48 41l47.9-27.6v55.3L64 87l-16-9.2 32-18.4V41L48 59.4V41z",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"81",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"82",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"path"]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"fill"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"#1FA6CA",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"d"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"M48 77.8v18.4l32 18.4V96.2L48 77.8z",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"83",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),"path"]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"84",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"fill"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"#1C7FB6",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"85",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"d"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"M80 114.6L127.8 87V50.2l-16 9.2v18.4L80 96.2v18.4zM111.9 41V22.6l16-9.2v18.4l-16 9.2z",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"86",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"87",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"88",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"89",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Stack"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"spacing"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token number",children:"2"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"90",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Typography"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"variant"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"h4",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"91",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" Persisted "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"currentMode",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"92",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"currentMode ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token string",children:"'system'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"&&"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:" ("}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"resolvedMode",(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:")"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` mode `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"93",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"94",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Select"})]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"95",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"value"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"currentMode ",(0,e.jsx)(n.span,{className:"token operator",children:"||"})," ",(0,e.jsx)(n.span,{className:"token string",children:"''"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"96",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"fullWidth"}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"97",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"onChange"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"e ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"98",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setMode"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"e",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"target"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),(0,e.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"as"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'light'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'dark'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'system'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"99",children:(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"100",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"101",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"MenuItem"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"value"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"system",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"System"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"102",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"MenuItem"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"value"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"light",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Light"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"103",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"MenuItem"})]})," ",(0,e.jsx)(n.span,{className:"token attr-name",children:"value"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"dark",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:"Dark"}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"104",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"105",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Button"})]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"106",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"variant"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"contained",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"107",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"endIcon"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"108",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" resolvedMode ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token string",children:"'dark'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"LightModeIcon"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"DarkModeIcon"})]})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"/>"})]}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"109",children:(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"110",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"sx"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"theme ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"111",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" textTransform",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'none'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"112",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" background",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsxs)(n.span,{className:"token template-string",children:[(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,e.jsx)(n.span,{className:"token string",children:"linear-gradient(to top right, #0a7ffe 0%, "}),(0,e.jsxs)(n.span,{className:"token interpolation",children:[(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"theme",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"vars",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"palette",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"primary",(0,e.jsx)(n.span,{className:"token punctuation",children:"."}),"main",(0,e.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,e.jsx)(n.span,{className:"token string",children:" 100%)"}),(0,e.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"113",children:(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"114",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"onClick"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"115",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setMode"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"resolvedMode ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token string",children:"'dark'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'light'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'dark'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"116",children:(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"117",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"118",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" Toggle "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),"resolvedMode ",(0,e.jsx)(n.span,{className:"token operator",children:"==="})," ",(0,e.jsx)(n.span,{className:"token string",children:"'dark'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'Light'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'Dark'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` Mode `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"119",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"120",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"121",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"122",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"123",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.code,{children:"useColorScheme"})," hook in line 15 is used to read and update the current mode. It returns an object, and three properties are used:"]}),` `,(0,e.jsxs)(n.ul,{children:[` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"mode"}),": The current mode. Can be ",(0,e.jsx)(n.code,{children:"'light'"}),", ",(0,e.jsx)(n.code,{children:"'dark'"})," or ",(0,e.jsx)(n.code,{children:"'system'"}),". Note: on the server, ",(0,e.jsx)(n.code,{children:"mode"})," is always ",(0,e.jsx)(n.code,{children:"undefined"}),"."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"setMode"}),": A function to set the current mode. Accepts ",(0,e.jsx)(n.code,{children:"'light'"}),", ",(0,e.jsx)(n.code,{children:"'dark'"})," or ",(0,e.jsx)(n.code,{children:"'system'"}),"."]}),` `,(0,e.jsxs)(n.li,{children:[(0,e.jsx)(n.code,{children:"systemMode"}),": The current system mode. Can be ",(0,e.jsx)(n.code,{children:"'light'"})," or ",(0,e.jsx)(n.code,{children:"'dark'"}),". If the ",(0,e.jsx)(n.code,{children:"mode"})," is not ",(0,e.jsx)(n.code,{children:"'system'"}),", this will be ",(0,e.jsx)(n.code,{children:"undefined"}),"."]}),` `]}),` `,(0,e.jsxs)(n.p,{children:["If you want to use theme variables, you can use the ",(0,e.jsx)(n.code,{children:"theme.vars"})," which is shown in line 104. It is an object that refers to the CSS theme variables."]}),` `]})]}),(0,e.jsxs)(n.section,{className:"article-section","data-heading-rank":"2",id:"test-dark-mode-flickering-section",children:[(0,e.jsxs)(n.h2,{id:"test-dark-mode-flickering",children:[(0,e.jsx)(n.a,{className:"heading-anchor",href:"#test-dark-mode-flickering",children:(0,e.jsx)(n.span,{className:"icon icon-link"})}),"Test Dark Mode Flickering"]}),` `,(0,e.jsxs)(n.aside,{className:"callout callout-note",children:[(0,e.jsxs)(n.div,{className:"callout-indicator",children:[(0,e.jsx)(n.div,{className:"callout-icon",children:(0,e.jsx)(e.Fragment,{children:(0,e.jsxs)(n.div,{children:[(0,e.jsx)(n.div,{}),(0,e.jsx)(n.div,{})]})})}),(0,e.jsx)(n.div,{className:"callout-title",children:"Notice"})]}),(0,e.jsx)(n.div,{className:"callout-content",children:(0,e.jsx)(n.p,{children:"In Next.js dev mode, the page may still flicker. When you build your app in production mode, the flickering should be gone."})})]}),` `,(0,e.jsxs)(n.ol,{children:[` `,(0,e.jsx)(n.li,{children:"Toggle dark mode in your application."}),` `,(0,e.jsxs)(n.li,{children:["Open DevTools and set the ",(0,e.jsx)(n.a,{href:"https://developer.chrome.com/docs/devtools/performance/#simulate_a_mobile_cpu",children:"CPU throttling"})," to the lowest value (don't close the DevTools)."]}),` `,(0,e.jsx)(n.li,{children:"Refresh the page. You should see all the components in dark mode at first glance."}),` `]}),` `,(0,e.jsxs)(n.p,{children:["Also, you can see some contents will change after the page is loaded. This is because the ",(0,e.jsx)(n.code,{children:"mode"})," is always ",(0,e.jsx)(n.code,{children:"undefined"})," on the server. So some contents of page must be updated on the client."]}),` `,(0,e.jsxs)(n.p,{children:["To avoid this, you can add following code to ",(0,e.jsx)(n.code,{children:"pages/index.tsx"}),":"]}),` `,(0,e.jsx)(n.pre,{title:"pages/index.tsx",className:"language-tsx",children:(0,e.jsxs)(n.code,{className:"language-diff-tsx code-highlight",children:[(0,e.jsxs)(n.span,{className:"code-line line-number",line:"1",children:[(0,e.jsx)(n.span,{className:"token comment",children:"// ..."}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"2",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"3",children:[(0,e.jsx)(n.span,{className:"token keyword",children:"export"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"default"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"function"})," ",(0,e.jsx)(n.span,{className:"token function",children:"Home"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"4",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"})," mode",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setMode",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," systemMode ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useColorScheme"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"5",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"currentMode",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setCurrentMode",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsxs)(n.span,{className:"token generic-function",children:[(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsxs)(n.span,{className:"token generic class-name",children:[(0,e.jsx)(n.span,{className:"token operator",children:"<"}),` `]})]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"6",children:(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" ",(0,e.jsx)(n.span,{className:"token string",children:"'light'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'dark'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'system'"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"undefined"}),` `]})})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"7",children:[(0,e.jsx)(n.span,{className:"token generic-function",children:(0,e.jsxs)(n.span,{className:"token generic class-name",children:[" ",(0,e.jsx)(n.span,{className:"token operator",children:">"})]})}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token keyword",children:"undefined"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"8",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"resolvedMode",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setResolvedMode",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsxs)(n.span,{className:"token generic-function",children:[(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsxs)(n.span,{className:"token generic class-name",children:[(0,e.jsx)(n.span,{className:"token operator",children:"<"}),(0,e.jsx)(n.span,{className:"token builtin",children:"string"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"|"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"undefined"}),(0,e.jsx)(n.span,{className:"token operator",children:">"})]})]}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"9",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"undefined"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"10",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number inserted",line:"11",children:[(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"mounted",(0,e.jsx)(n.span,{className:"token punctuation",children:","})," setMounted",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,e.jsx)(n.span,{className:"token operator",children:"="})," ",(0,e.jsx)(n.span,{className:"token function",children:"useState"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token boolean",children:"false"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"12",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number inserted",line:"13",children:[(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number inserted",line:"14",children:[(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token function",children:"setMounted"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token boolean",children:"true"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number inserted",line:"15",children:[(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"16",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"17",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"useEffect"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"18",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setCurrentMode"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"mode",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"19",children:[" ",(0,e.jsx)(n.span,{className:"token function",children:"setResolvedMode"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),"systemMode ",(0,e.jsx)(n.span,{className:"token operator",children:"||"})," mode",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"20",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"["}),"mode",(0,e.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"21",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number inserted",line:"22",children:[(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"if"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),(0,e.jsx)(n.span,{className:"token operator",children:"!"}),"mounted",(0,e.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number inserted",line:"23",children:[(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token keyword",children:"null"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number inserted",line:"24",children:[(0,e.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"25",children:` `}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"26",children:[" ",(0,e.jsx)(n.span,{className:"token keyword",children:"return"})," ",(0,e.jsx)(n.span,{className:"token punctuation",children:"("}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"27",children:[" ",(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"<"}),(0,e.jsx)(n.span,{className:"token class-name",children:"Box"})]}),` `]})]}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"28",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"component"}),(0,e.jsxs)(n.span,{className:"token attr-value",children:[(0,e.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"'"}),"main",(0,e.jsx)(n.span,{className:"token punctuation",children:"'"})]}),` `]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"29",children:(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token attr-name",children:"sx"}),(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[(0,e.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),` `]})]})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"30",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" display",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'flex'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"31",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" flexDirection",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'column'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"32",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" height",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'100vh'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"33",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" width",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'100%'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"34",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" alignItems",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'center'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"35",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" justifyContent",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'center'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"36",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" alignItem",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token string",children:"'center'"}),(0,e.jsx)(n.span,{className:"token punctuation",children:","}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"37",children:(0,e.jsx)(n.span,{className:"token tag",children:(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" p",(0,e.jsx)(n.span,{className:"token operator",children:":"})," ",(0,e.jsx)(n.span,{className:"token number",children:"3"}),` `]})})}),(0,e.jsx)(n.span,{className:"code-line line-number",line:"38",children:(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token script language-javascript",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"})]}),` `]})}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"39",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"40",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,e.jsx)(n.span,{className:"token comment",children:"/* ... */"}),(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,e.jsx)(n.span,{className:"token plain-text",children:` `})]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"41",children:[(0,e.jsx)(n.span,{className:"token plain-text",children:" "}),(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsxs)(n.span,{className:"token tag",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:""})]}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"42",children:[" ",(0,e.jsx)(n.span,{className:"token punctuation",children:")"}),(0,e.jsx)(n.span,{className:"token punctuation",children:";"}),` `]}),(0,e.jsxs)(n.span,{className:"code-line line-number",line:"43",children:[(0,e.jsx)(n.span,{className:"token punctuation",children:"}"}),` `]})]})}),` `,(0,e.jsx)(n.p,{children:"However, it will make your website SEO unfriendly. If you are building a blog website and only have a mode icon in the header, it is not a problem."})]})]})}function f(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(p,a)})):p(a)}var y=f;function w(a,n){throw new Error("Expected "+(n?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(M);})(); ;return Component;

Tag: #react

Posts