[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Flearn-how-to-utilize-chakra-uis-color-mode-in-your-nextjs-application":663,"blog-author-\u002Fblog\u002Flearn-how-to-utilize-chakra-uis-color-mode-in-your-nextjs-application":1196,"i-material-symbols:arrow-back-rounded":1208},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Sign in","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","VdirGIa8cUm6xLprbBeTKcw914JfyJjWfF-9hSVOX5Y",{"id":87,"extension":5,"links":88,"meta":660,"stem":661,"__hash__":662},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,295,299,303,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,453,457,461,465,469,473,477,480,483,486,489,493,497,500,504,508,512,516,520,524,528,532,536,540,544,548,551,555,559,563,567,571,574,577,580,584,587,591,595,599,603,606,610,614,617,620,623,627,631,635,638,641,644,648,652,656],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":209,"label":210,"href":211},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":213,"label":214,"href":215},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":217,"label":218,"href":219},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":221,"label":222,"href":223},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":225,"label":226,"href":227},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":229,"label":230,"href":231},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":233,"label":234,"href":235},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":237,"label":238,"href":239},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":241,"label":242,"href":243},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":245,"label":246,"href":247},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":249,"label":250,"href":251},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":253,"label":254,"href":255},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":257,"label":258,"href":259},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":261,"label":262,"href":263},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":265,"label":266,"href":267},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":269,"label":270,"href":271},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":273,"label":274,"href":275},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":277,"label":278,"href":279},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":281,"label":282,"href":283},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":285,"label":286,"href":287},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":289,"label":290,"href":291},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":293,"label":294,"href":92},"docs.desktop.download","Desktop download docs",{"key":296,"label":297,"href":298},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":300,"label":301,"href":302},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":304,"label":305,"href":207},"docs.piecesOS.install","PiecesOS install docs",{"key":307,"label":308,"href":309},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":311,"label":312,"href":313},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":315,"label":316,"href":317},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":319,"label":320,"href":321},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":323,"label":324,"href":325},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":327,"label":328,"href":329},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":331,"label":332,"href":333},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":335,"label":336,"href":337},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":343,"label":344,"href":345},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":347,"label":348,"href":349},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":351,"label":352,"href":353},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":355,"label":356,"href":357},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":359,"label":360,"href":361},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":363,"label":364,"href":365},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":367,"label":368,"href":369},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":371,"label":372,"href":373},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":375,"label":376,"href":377},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":379,"label":380,"href":381},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":383,"label":384,"href":385},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":387,"label":388,"href":389},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":391,"label":392,"href":393},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":395,"label":396,"href":397},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":399,"label":400,"href":401},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":403,"label":404,"href":405},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":407,"label":408,"href":409},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":411,"label":412,"href":413},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":415,"label":416,"href":417},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":419,"label":420,"href":421},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":423,"label":424,"href":425},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":427,"label":428,"href":429},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":431,"label":432,"href":433},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":435,"label":436,"href":437},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":439,"label":440,"href":441},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":443,"label":444,"href":445},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":447,"label":448,"href":449},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":451,"label":58,"href":452},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":454,"label":455,"href":456},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":458,"label":459,"href":460},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":462,"label":463,"href":464},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":466,"label":467,"href":468},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":470,"label":471,"href":472},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":474,"label":475,"href":476},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":478,"label":34,"href":479},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":481,"label":43,"href":482},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":484,"label":46,"href":485},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":487,"label":488,"href":485},"social.twitter","Twitter",{"key":490,"label":491,"href":492},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":494,"label":495,"href":496},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":498,"label":49,"href":499},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":501,"label":502,"href":503},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":505,"label":506,"href":507},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":509,"label":510,"href":511},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":513,"label":514,"href":515},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":517,"label":518,"href":519},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":521,"label":522,"href":523},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":525,"label":526,"href":527},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":529,"label":530,"href":531},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":533,"label":534,"href":535},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":537,"label":538,"href":539},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":541,"label":542,"href":543},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":545,"label":546,"href":547},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":549,"label":550,"href":247},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":552,"label":553,"href":554},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":556,"label":557,"href":558},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":560,"label":561,"href":562},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":564,"label":565,"href":566},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":568,"label":569,"href":570},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":572,"label":573,"href":66},"legal.privacyPolicy","Privacy policy",{"key":575,"label":576,"href":69},"legal.refundPolicy","Refund policy",{"key":578,"label":579,"href":72},"legal.terms","Terms",{"key":581,"label":582,"href":583},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":585,"label":586,"href":503},"videos.youtubeChannel","YouTube channel",{"key":588,"label":589,"href":590},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":592,"label":593,"href":594},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":596,"label":597,"href":598},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":600,"label":601,"href":602},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":604,"label":605,"href":519},"sales.feedback","Feedback discussions",{"key":607,"label":608,"href":609},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":611,"label":612,"href":613},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":615,"label":616,"href":19},"routes.home","Home route",{"key":618,"label":619,"href":56},"routes.about","About route",{"key":621,"label":622,"href":12},"routes.downloads","Downloads route",{"key":624,"label":625,"href":626},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":628,"label":629,"href":630},"routes.pricing","Pricing route","\u002Fpricing",{"key":632,"label":633,"href":634},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":636,"label":637,"href":22},"routes.enterprise","Enterprise route",{"key":639,"label":640,"href":62},"routes.contact","Contact route",{"key":642,"label":643,"href":59},"routes.updates","Updates route",{"key":645,"label":646,"href":647},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":649,"label":650,"href":651},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":653,"label":654,"href":655},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":657,"label":658,"href":659},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","NLkVE1lIUws518K-1QsSB6T-GvlXYIzcRL1HDhqarGQ",{"id":664,"title":665,"author":666,"authorPhoto":667,"authorPhotoAlt":668,"authorSlug":669,"body":670,"buttonText":668,"buttonUrl":668,"category":1182,"date":1183,"description":1184,"draft":1185,"editorsPick":1185,"extension":1186,"featured":1185,"image":1187,"imageAlt":1188,"meta":1189,"navigation":32,"ogImage":668,"ogImageAlt":668,"path":1190,"seo":1191,"stem":1192,"tags":1193,"__hash__":1195},"blog\u002Fblog\u002Flearn-how-to-utilize-chakra-uis-color-mode-in-your-nextjs-application.md","Learn How to Utilize Chakra UI’s Color Mode in Your Next.Js Application","Clarence Bakosi","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Freact-form-validation-informed\u002Fauthor.png",null,"clarence-bakosi",{"type":671,"value":672,"toc":1167},"minimark",[673,685,688,693,701,706,709,720,727,732,735,741,747,750,756,761,764,768,779,785,791,795,802,808,814,843,850,854,869,875,881,887,912,923,929,935,945,955,961,967,973,976,980,986,992,998,1001,1015,1022,1028,1034,1040,1046,1052,1058,1064,1070,1076,1083,1091,1097,1103,1107,1113,1119,1125,1131,1137,1140,1144],[674,675,676,677,684],"p",{},"Next.js is a React framework that optimizes your application, speeding up the development and production phases. It provides server-side rendering, search engine optimization, and a variety of other unique capabilities in your web application. On their ",[678,679,683],"a",{"href":680,"rel":681},"https:\u002F\u002Fnextjs.org\u002F",[682],"nofollow","official website",", you can learn more about what Next.js has to offer.",[674,686,687],{},"Styles can help you create amazing layouts and a distinctive user experience for your web application. This allows easier navigation within the application. In this article, we'll look at how to use one of the various style frameworks and libraries available to create a customized theme.",[689,690,692],"h2",{"id":691},"what-is-chakra-ui","What is Chakra UI?",[674,694,695,700],{},[678,696,699],{"href":697,"rel":698},"https:\u002F\u002Fchakra-ui.com\u002F",[682],"Chakra UI"," is a basic component-level-based React library. It features a number of components that are adaptable and simple to utilize in your application. When developing the user experience of a web application, Chakra UI speeds up the development process.",[702,703,705],"h3",{"id":704},"getting-started","Getting Started",[674,707,708],{},"To successfully create a Next.js application, use the following command:",[710,711,716],"pre",{"className":712,"code":714,"language":715},[713],"language-text","npx create-next-app@latest\n","text",[717,718,714],"code",{"__ignoreMap":719},"",[674,721,722],{},[678,723,726],{"href":724,"rel":725},"https:\u002F\u002Fmariah.pieces.cloud\u002F?p=9fe2429cae",[682],"Save this code",[728,729,731],"h4",{"id":730},"install-dependencies","Install Dependencies",[674,733,734],{},"Following that, we'll look at how to add the Chakra UI library to a Next.Js application. We’ll use one of the instructions provided in the code blocks below:",[710,736,739],{"className":737,"code":738,"language":715},[713],"yarn add @chakra-ui\u002Freact @chakra-ui\u002Ficons @emotion\u002Freact@^11 @emotion\u002Fstyled@^11 framer-motion@^6\n",[717,740,738],{"__ignoreMap":719},[674,742,743],{},[678,744,726],{"href":745,"rel":746},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiI3YmI5MWFlMi0yODNlLTRiYTYtYjQwYS1hNWRjNzIyODdmNTQiLCJhc3NldCI6ImVhMTA3YmUwLTU1YzUtNDcwYy1iNzEzLTk2MTY4ZmMzOWNmZSIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJDaGFrcmEgVUkgYW5kIEZyYW1lciBNb3Rpb24gSW5zdGFsbGF0aW9uLiIsImRlc2NyaXB0aW9uIjoiVGhpcyBpbnN0YWxscyBzZXZlcmFsIHBhY2thZ2VzIGluY2x1ZGluZyBDaGFrcmEgVUksIEVtb3Rpb24sIGFuZCBGcmFtZXIgTW90aW9uIGZvciB1c2UgaW4gYSBSZWFjdCBwcm9qZWN0IHVzaW5nIHRoZSBZYXJuIHBhY2thZ2UgbWFuYWdlci4iLCJ1c2VyIjp7InNjaGVtYSI6eyJtaWdyYXRpb24iOjAsInNlbWFudGljIjoiTUFKT1JfMF9NSU5PUl8wX1BBVENIXzEifSwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hLS9BRmRadWNwZjA4YjZzNDJyeTJsT015ZzBRVnUxOTdQS2RJWDFjMFZobTlqWD1zOTYtYyIsImVtYWlsIjoibWFyaWFoQHBpZWNlcy5hcHAiLCJjcmVhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxNDoxMjo1Ny45MjBaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxNDoxMjo1OC45NDBaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwiYWVzdGhldGljcyI6eyJ0aGVtZSI6eyJkYXJrIjp0cnVlfSwiZm9udCI6eyJzaXplIjoxNn19LCJhbGxvY2F0aW9uIjp7InNjaGVtYSI6eyJtaWdyYXRpb24iOjAsInNlbWFudGljIjoiTUFKT1JfMF9NSU5PUl8wX1BBVENIXzEifSwiaWQiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1c2VyIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwidXJscyI6eyJiYXNlIjp7InN0YXR1cyI6IlJVTk5JTkciLCJ1cmwiOiJodHRwczovL3VzZXItODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLWZoY21iaGVrbHEtdWMuYS5ydW4uYXBwIn0sImlkIjp7InN0YXR1cyI6IlJVTk5JTkciLCJ1cmwiOiJodHRwczovLzg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYS5waWVjZXMuY2xvdWQifSwidmFuaXR5Ijp7InN0YXR1cyI6IlJVTk5JTkciLCJ1cmwiOiJodHRwczovL21hcmlhaC5waWVjZXMuY2xvdWQifX0sInN0YXR1cyI6eyJjbG91ZCI6IlJVTk5JTkcifSwicHJvamVjdCI6InJ1bnRpbWUtdXNlci1jbG91ZC1ncm91cC0wIiwidXBkYXRlZCI6eyJ2YWx1ZSI6IjIwMjItMDgtMjJUMTg6MzA6MDIuODMyOTc2WiIsInJlYWRhYmxlIjoiMiB5ZWFycyBhZ28ifSwidmVyc2lvbiI6IjQuMi4wIn19fQ==&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[674,748,749],{},"or",[710,751,754],{"className":752,"code":753,"language":715},[713],"npm i @chakra-ui\u002Freact @chakra-ui\u002Ficons @emotion\u002Freact@^11 @emotion\u002Fstyled@^11 framer-motion@^6\n",[717,755,753],{"__ignoreMap":719},[674,757,758],{},[678,759,726],{"href":724,"rel":760},[682],[674,762,763],{},"The instructions in the code block above will be used to configure Chakra UI in our Next.js application.",[728,765,767],{"id":766},"chakra-ui-set-up","Chakra UI Set up",[674,769,770,771,774,775,778],{},"To utilize Chakra UI in your Next.js application, add the following code block to ",[717,772,773],{},"\u002Fpages\u002F_app.js"," to import ",[717,776,777],{},"ChakraProvider"," at the root of your application:",[710,780,783],{"className":781,"code":782,"language":715},[713],"import { ChakraProvider } from '@chakra-ui\u002Freact'\nfunction MyApp({ Component, pageProps }) {\n  return (\n  )\n}\nexport default MyApp\n",[717,784,782],{"__ignoreMap":719},[674,786,787],{},[678,788,726],{"href":789,"rel":790},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiJiZTRmZWRhZS0yMDdiLTRlYzUtOThkOC05ZDA5MGI4ODUzMjUiLCJhc3NldCI6IjRlMzIyY2U5LTJmZGMtNGU4MC1hNDJiLWJlYmIwMTk1ZmViMCIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJKYXZhU2NyaXB0IFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[689,792,794],{"id":793},"styling-a-nextjs-app-with-chakra-ui","Styling a Next.js app With Chakra UI",[674,796,797,798,801],{},"By leveraging the capabilities the library offers, Chakra UI makes it extremely simple to style components in your Next.js application. We’ll import components from Chakra UI and style them using the code block below in ",[717,799,800],{},"\u002Fpages\u002Findex.js",":",[710,803,806],{"className":804,"code":805,"language":715},[713],"import { Container, Box } from '@chakra-ui\u002Freact'\nimport Head from \"next\u002Fhead\";\nexport default function Home() {\n return (\n          This is the Box\n );\n}\n",[717,807,805],{"__ignoreMap":719},[674,809,810],{},[678,811,726],{"href":812,"rel":813},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiJkNmIxNzYwNi1kY2IyLTRkMDYtOWViZi1kYTkxYWNhYzI3N2IiLCJhc3NldCI6IjI4ZDhhZjZjLTRlNzktNGEyYS1iNjNhLTZiOWQzNmNhMTNlZiIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJKYXZhU2NyaXB0IFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[674,815,816,817,820,821,824,825,828,829,831,832,835,836,839,840,842],{},"The ",[717,818,819],{},"Container"," and ",[717,822,823],{},"Box"," components were imported from ",[717,826,827],{},"@chakra-ui\u002Freact"," as seen in the code block above. The ",[717,830,823],{}," component is utilizing the style props that Chakra UI provides. We used the following props: ",[717,833,834],{},"bg"," (short for background), ",[717,837,838],{},"w"," (short for width), and ",[717,841,674],{}," (short for padding).",[674,844,845],{},[846,847],"img",{"alt":848,"src":849},"chakra user interface showing a container and a box","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Flearn-how-to-utilize-chakra-uis-color-mode-in-your-nextjs-application\u002Fimg-001.jpg",[702,851,853],{"id":852},"color-mode-in-nextjs","Color Mode in Next.js",[674,855,856,857,860,861,864,865,868],{},"By default, the Chakra UI Color Mode feature allows you to alter the color mode in your application. We can utilize the functionality to theme our application to specify the color we want to appear in ",[717,858,859],{},"dark mode",", ",[717,862,863],{},"light Mode",", or ",[717,866,867],{},"system theme"," for our layout or components.",[674,870,871,872,801],{},"The following code block will be pasted into the newly created file ",[717,873,874],{},"\u002Fstyles\u002Ftheme.js",[710,876,879],{"className":877,"code":878,"language":715},[713],"import { extendTheme } from \"@chakra-ui\u002Freact\";\nexport const theme = extendTheme({\n  initialColorMode: \"dark\",\n  useSystemColorMode: false,\n});\nexport default theme;\n",[717,880,878],{"__ignoreMap":719},[674,882,883],{},[678,884,726],{"href":885,"rel":886},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiIyODU3MjQyOS02YjE0LTQ0MTMtYTZlZi0zNDg0YmYzNDM1OTUiLCJhc3NldCI6IjUzY2FmMTY5LWE0ZGUtNDAyYi04N2E3LWQ1NDY0Mjc3ZDJiZiIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJKYXZhU2NyaXB0IFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[674,888,889,890,893,894,897,898,860,901,864,904,907,908,911],{},"From the code block above, we imported ",[717,891,892],{},"extendTheme",", which accepts an object used to quickly override or modify the Chakra UI theme. The ",[717,895,896],{},"initialColorMode",", which can be adjusted to ",[717,899,900],{},"dark",[717,902,903],{},"light",[717,905,906],{},"system",", allows us to choose the theme of our application. Additionally, ",[717,909,910],{},"useSystemColorMode"," accepts a boolean value, allowing use of the system’s theme.",[674,913,914,915,918,919,922],{},"To utilize ",[717,916,917],{},"theme.js",", we’ll create a new component, ",[717,920,921],{},"\u002Fpages\u002F_document.js",", and insert the following code block into it:",[710,924,927],{"className":925,"code":926,"language":715},[713],"import { ColorModeScript } from '@chakra-ui\u002Freact'\nimport NextDocument, { Html, Head, Main, NextScript } from 'next\u002Fdocument'\nimport theme from '..\u002Fstyles\u002Ftheme'\nexport default class Document extends NextDocument {\n  render() {\n    return (\n    )\n  }\n}\n",[717,928,926],{"__ignoreMap":719},[674,930,931],{},[678,932,726],{"href":933,"rel":934},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiJiNDljMzMwYy1mNGU2LTQ3YjQtYjVmZC1jOGEyNGY0OGJmNjUiLCJhc3NldCI6IjMwMWM2M2RiLTJhNjktNDBhYy1iNjFkLWYwOTliOGM4ZTFmNCIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJKYXZhU2NyaXB0IFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[674,936,937,938,941,942,944],{},"The code block above shows ",[717,939,940],{},"ColorModeScript",", which accepts a prop ",[717,943,896],{},". This allows us to toggle between light and dark themes with ease.",[674,946,947,948,950,951,954],{},"Next, we’ll modify ",[717,949,800],{}," to use the ",[717,952,953],{},"useColorMode"," hook, which gives access to the current color mode. To use it, add the following code block:",[710,956,959],{"className":957,"code":958,"language":715},[713],"import { Container, Box, Button, useColorMode } from '@chakra-ui\u002Freact'\nimport Head from \"next\u002Fhead\";\nexport default function Home() {\nconst { colorMode, toggleColorMode } = useColorMode();\n return (\n          {colorMode === \"light\" ? \"Dark mode\": \"Light mode\"}\n          This is the Box\n );\n}\n",[717,960,958],{"__ignoreMap":719},[674,962,963],{},[678,964,726],{"href":965,"rel":966},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiIxMWJlZDYyNy1hZWYwLTRiZmUtOWI3Yy1lYjcxNGJhY2Y3NmYiLCJhc3NldCI6IjEyMmMwMjJmLTg4MWEtNDA2MS1iNzE4LWRjNTc1M2Y2ZmRlOSIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJKYXZhU2NyaXB0IFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[674,968,969],{},[846,970],{"alt":971,"src":972},"Charkra UI light more dark mode toggle","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Flearn-how-to-utilize-chakra-uis-color-mode-in-your-nextjs-application\u002Fimg-002.gif",[674,974,975],{},"Toggling on darkMode and lightMode",[702,977,979],{"id":978},"custom-styles-with-chakra-ui","Custom Styles with Chakra UI",[674,981,982,983,985],{},"In this section, we'll look at how to create custom styles for the Chakra UI components. This will allow us to control which colors appear when we switch between light and dark modes. Moving on, we will modify ",[717,984,917],{}," to add custom colors to our application:",[710,987,990],{"className":988,"code":989,"language":715},[713],"export const theme = extendTheme({\n  initialColorMode: \"dark\",\n  useSystemColorMode: false,\n  colors: {\n    primary: {\n      dark: \"#003100\",\n      light: \"#e6f6e6\",\n    },\n    secondary: \"#009400\",\n    text: {\n      dark: \"#000\",\n      light: \"#fff\"\n     },\n    icon: '#ffd700',\n  },\n});\n",[717,991,989],{"__ignoreMap":719},[674,993,994],{},[678,995,726],{"href":996,"rel":997},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiIyMjNhMmMyMS0xMDcyLTRhYTUtOTQ0OC0zZThmYzYzZWZkY2QiLCJhc3NldCI6ImJkMGVkYTVmLTg1NzYtNDdiZS04YzhmLTAwMDFjNDkzNWIyMiIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJKYXZhU2NyaXB0IFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[674,999,1000],{},"We now have custom colors of primary and secondary with dark and light color values in the code block above.",[674,1002,1003,1004,820,1007,1010,1011,1014],{},"After that, we'll design unique styles for the ",[717,1005,1006],{},"Text",[717,1008,1009],{},"Button"," components. The ",[717,1012,1013],{},"mode"," function in Chakra UI accepts two arguments for dark and light modes.",[674,1016,1017,1018,1021],{},"Moving forward, we’ll now create ",[717,1019,1020],{},"\u002Fstyles\u002FButtonStyles.js"," using the code block below:",[710,1023,1026],{"className":1024,"code":1025,"language":715},[713],"import { mode } from \"@chakra-ui\u002Ftheme-tools\";\nexport const ButtonStyle = {\n  baseStyle: {},\n  sizes: {},\n  variants: {\n    primary: (props) => ({\n      color: mode(\"text.light\", \"white\")(props),\n      bg: mode(\"primary.dark\", \"secondary\")(props),\n    }),\n  },\n  defaultProps: {},\n};\n",[717,1027,1025],{"__ignoreMap":719},[674,1029,1030],{},[678,1031,726],{"href":1032,"rel":1033},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiJlNmI3OTcyMi0wMmI0LTQ5YjItYmRhYi03MTdlMDNmM2ZhZTIiLCJhc3NldCI6IjRhNmRkNjU0LTM1ZjEtNDY0Zi04ZGE4LWVjNWZmMGVkYjI1MSIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJKYXZhU2NyaXB0IFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[674,1035,1036,1037,801],{},"Also, we will create ",[717,1038,1039],{},"\u002Fstyles\u002FTextStyles.js",[710,1041,1044],{"className":1042,"code":1043,"language":715},[713],"import { mode } from \"@chakra-ui\u002Ftheme-tools\";\nexport const TextStyle = {\n  baseStyle: {},\n  sizes: {},\n  variants: {\n    primary: (props) => ({\n      color: mode(\"text.dark\", \"text.light\")(props),\n    }),\n  },\n  defaultProps: {},\n};\n",[717,1045,1043],{"__ignoreMap":719},[674,1047,1048],{},[678,1049,726],{"href":1050,"rel":1051},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiI1ZWM5OTk0OS03MDczLTQ2YzMtOTliOC0wMGRkM2JjNTVhNWQiLCJhc3NldCI6IjQ1N2YyMDFlLWZhYmUtNDdkMy1iYzAwLTgzYTczMjkzNGRhYyIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJKYXZhU2NyaXB0IFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[674,1053,1054,1055,1057],{},"The variants object takes in a primary function with a prop that indicates whether the current color mode is dark or light, and the function also returns an object from the above code block. We then utilize the ",[717,1056,1013],{}," function provided by Chakra UI to define what color appears when we flip between dark and light modes.",[674,1059,1060,1061,1063],{},"To utilize the custom component styles from the preceding code blocks, we’ll import them into ",[717,1062,917],{}," and apply the styles to the components object in the following code block:",[710,1065,1068],{"className":1066,"code":1067,"language":715},[713],"...\nimport { TextStyle as Text } from \".\u002FTextStyles\";\nimport { ButtonStyle as Button } from \".\u002FButtonStyles\";\n...\n components: {\n    Text,\n    Button,\n  },\n...\n",[717,1069,1067],{"__ignoreMap":719},[674,1071,1072],{},[678,1073,726],{"href":1074,"rel":1075},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiJiN2IzNmUwZS03NDk4LTQwZTYtYmE1MC1hNzgyMzhjMTgxYjUiLCJhc3NldCI6IjI3YWUzMGVkLWQ1MTEtNGM0Ny1hNjViLTY5MTUxMjc3Mjk5ZCIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJUeXBlU2NyaXB0IFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[702,1077,1079,1080],{"id":1078},"customize-a-component-using-usecolormodevalue","Customize a Component Using ",[717,1081,1082],{},"useColorModeValue",[674,1084,816,1085,1087,1088,801],{},[717,1086,1082],{}," hook accepts two arguments: the light mode value and the dark mode value. It is used to switch between styles based on the color mode. Using the code block below, we will import the hook and modify ",[717,1089,1090],{},"index.js",[710,1092,1095],{"className":1093,"code":1094,"language":715},[713],"...\nconst bg = useColorModeValue(\"primary.light\", \"primary.dark\");\n...\n...\n This is the Box\n...\n",[717,1096,1094],{"__ignoreMap":719},[674,1098,1099],{},[678,1100,726],{"href":1101,"rel":1102},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiI3Y2JmYTg0Ny01NTIwLTQ2ODUtODI1Mi1mZjQzZDJhYTIwZGQiLCJhc3NldCI6ImMwMTI4MTY3LTM4N2UtNDFiZi04NjliLTVlMzQ0ODRmZWUxNCIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJIVE1MIFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[702,1104,1106],{"id":1105},"chakra-ui-theme-using-color-mode","Chakra UI Theme Using Color Mode",[674,1108,1109,1110,1112],{},"In this section, we’ll theme our application using the custom styles we created. Next, ",[717,1111,800],{}," will be modified:",[710,1114,1117],{"className":1115,"code":1116,"language":715},[713],"import {\n  Box,\n  Button,\n  Container,\n  Text,\n  useColorMode,\n  useColorModeValue,\n} from \"@chakra-ui\u002Freact\";\nimport Head from \"next\u002Fhead\";\nimport { MoonIcon, SunIcon } from \"@chakra-ui\u002Ficons\";\nexport default function Home() {\n  const { colorMode, toggleColorMode } = useColorMode();\n  const bg = useColorModeValue(\"primary.light\", \"primary.dark\");\n  return (\n    \n      h=\"100vh\"\n      display=\"flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      maxW='container.sm'\n    >\n          {colorMode === \"light\" ?  : }        \n        \n          bg={bg}\n          w=\"100%\"\n          p={4}\n          display=\"flex\"\n          mt=\"4\"\n          alignItems=\"center\"\n          cursor=\"pointer\"\n          borderLeft=\"6px solid\"\n          borderColor=\"secondary\"\n          borderRadius=\"5px\"\n          boxShadow='dark-lg'\n        >\n            Chakra-UI Color mode in Next.Js\n            😀 open\n  );\n}\n",[717,1118,1116],{"__ignoreMap":719},[674,1120,1121],{},[678,1122,726],{"href":1123,"rel":1124},"https:\u002F\u002Fshared.code.pieces.app\u002F?compressed=eyJiYXNlIjoiaHR0cHM6Ly9tYXJpYWgucGllY2VzLmNsb3VkIiwic2hhcmUiOiJjMmQ1NjA2MC1hNTJmLTRlMjEtOWQ1OC05ODBkOTMxZmMwMmIiLCJhc3NldCI6IjVhNzdjNGZmLTA1YTctNGI2Mi05ODY2LWFlNmNlNjNiOGMwYiIsIm5hbWUiOiJNYXJpYWggQ2xlbW93IiwidGl0bGUiOiJKYXZhU2NyaXB0IFNuaXBwZXQiLCJkZXNjcmlwdGlvbiI6IiIsInVzZXIiOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJwaWN0dXJlIjoiaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FGZFp1Y3BmMDhiNnM0MnJ5MmxPTXlnMFFWdTE5N1BLZElYMWMwVmhtOWpYPXM5Ni1jIiwiZW1haWwiOiJtYXJpYWhAcGllY2VzLmFwcCIsImNyZWF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU3LjkyMFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sInVwZGF0ZWQiOnsidmFsdWUiOiIyMDIyLTA4LTIyVDE0OjEyOjU4Ljk0MFoiLCJyZWFkYWJsZSI6IjIgeWVhcnMgYWdvIn0sImlkIjoiODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhIiwibmFtZSI6Ik1hcmlhaCBDbGVtb3ciLCJhZXN0aGV0aWNzIjp7InRoZW1lIjp7ImRhcmsiOnRydWV9LCJmb250Ijp7InNpemUiOjE2fX0sImFsbG9jYXRpb24iOnsic2NoZW1hIjp7Im1pZ3JhdGlvbiI6MCwic2VtYW50aWMiOiJNQUpPUl8wX01JTk9SXzBfUEFUQ0hfMSJ9LCJpZCI6Ijg1ZDNhNzg4LTk2MTctNGEzMS04NjJiLWJjMjZjNjQ5YWNjYSIsInVzZXIiOiI4NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EiLCJ1cmxzIjp7ImJhc2UiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vdXNlci04NWQzYTc4OC05NjE3LTRhMzEtODYyYi1iYzI2YzY0OWFjY2EtZmhjbWJoZWtscS11Yy5hLnJ1bi5hcHAifSwiaWQiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vODVkM2E3ODgtOTYxNy00YTMxLTg2MmItYmMyNmM2NDlhY2NhLnBpZWNlcy5jbG91ZCJ9LCJ2YW5pdHkiOnsic3RhdHVzIjoiUlVOTklORyIsInVybCI6Imh0dHBzOi8vbWFyaWFoLnBpZWNlcy5jbG91ZCJ9fSwic3RhdHVzIjp7ImNsb3VkIjoiUlVOTklORyJ9LCJwcm9qZWN0IjoicnVudGltZS11c2VyLWNsb3VkLWdyb3VwLTAiLCJ1cGRhdGVkIjp7InZhbHVlIjoiMjAyMi0wOC0yMlQxODozMDowMi44MzI5NzZaIiwicmVhZGFibGUiOiIyIHllYXJzIGFnbyJ9LCJ2ZXJzaW9uIjoiNC4yLjAifX19&user=85d3a788-9617-4a31-862b-bc26c649acca",[682],[674,1126,1127,1128,1130],{},"For the aim of switching between light mode and dark mode, the ",[717,1129,1082],{}," hook and the custom component styles are used in the code block above.",[674,1132,1133],{},[846,1134],{"alt":1135,"src":1136},"web page showing chakra ui custom styles in action","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Flearn-how-to-utilize-chakra-uis-color-mode-in-your-nextjs-application\u002Fimg-003.gif",[674,1138,1139],{},"Fully themed app",[702,1141,1143],{"id":1142},"conclusion","Conclusion",[674,1145,1146,1147,1149,1150,1154,1155,1160,1161,1166],{},"This article explored how to style a Next.js application using Chakra UI, and how to create custom styles for the components the library offers. In addition, we used the Chakra UI color mode feature to create custom themes using the ",[717,1148,892],{}," function. To learn more about the library, visit the ",[678,1151,1153],{"href":697,"rel":1152},[682],"official documentation"," of Chakra UI. Also, you can get all of the code for this article on my ",[678,1156,1159],{"href":1157,"rel":1158},"https:\u002F\u002Fgithub.com\u002Fclarencepenz\u002Fcolor-mode",[682],"GitHub repository",". Visit ",[678,1162,1165],{"href":1163,"rel":1164},"https:\u002F\u002Fchakra-ui-color-mode.netlify.app\u002F",[682],"chakra-ui-color-mode"," to test out the live version.",{"title":719,"searchDepth":1168,"depth":1168,"links":1169},2,[1170,1174],{"id":691,"depth":1168,"text":692,"children":1171},[1172],{"id":704,"depth":1173,"text":705},3,{"id":793,"depth":1168,"text":794,"children":1175},[1176,1177,1178,1180,1181],{"id":852,"depth":1173,"text":853},{"id":978,"depth":1173,"text":979},{"id":1078,"depth":1173,"text":1179},"Customize a Component Using useColorModeValue",{"id":1105,"depth":1173,"text":1106},{"id":1142,"depth":1173,"text":1143},"Software Development","2023-01-09T00:00:00.000Z","Let's learn how to use Chakra UI to create a cohesive user experience in your next Next.js project. It's a super useful library for web developers.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Flearn-how-to-utilize-chakra-uis-color-mode-in-your-nextjs-application\u002Fhero.jpeg","decorative cover image showing a web developer working with Next.Js",{},"\u002Fblog\u002Flearn-how-to-utilize-chakra-uis-color-mode-in-your-nextjs-application",{"title":665,"description":1184},"blog\u002Flearn-how-to-utilize-chakra-uis-color-mode-in-your-nextjs-application",[1194],"ui; nextjs-bf","W1-MjCn7B5Lt_FCTaqMNQuAeDlRvIhnhoLKiII0caKo",{"id":1197,"title":666,"body":1198,"description":719,"draft":1185,"extension":1186,"meta":1202,"navigation":32,"path":1203,"photo":1204,"photoAlt":668,"seo":1205,"stem":1206,"__hash__":1207},"authors\u002Fauthors\u002Fclarence-bakosi.md",{"type":671,"value":1199,"toc":1200},[],{"title":719,"searchDepth":1168,"depth":1168,"links":1201},[],{},"\u002Fauthors\u002Fclarence-bakosi","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fclarence-bakosi.jpg",{"title":666,"description":719},"authors\u002Fclarence-bakosi","qCgIEKGgPAwvBNLGno6tCK7JWX32ibTV3mFxlTrvsNE",{"left":1209,"top":1209,"width":1210,"height":1210,"rotate":1209,"vFlip":1185,"hFlip":1185,"body":1211},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]