var Component=(()=>{var y=Object.create;var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var D=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),f=(n,l)=>{for(var r in l)t(n,r,{get:l[r],enumerable:!0})},d=(n,l,r,c)=>{if(l&&typeof l=="object"||typeof l=="function")for(let s of C(l))!g.call(n,s)&&s!==r&&t(n,s,{get:()=>l[s],enumerable:!(c=m(l,s))||c.enumerable});return n};var w=(n,l,r)=>(r=n!=null?y(u(n)):{},d(l||!n||!n.__esModule?t(r,"default",{value:n,enumerable:!0}):r,n)),b=n=>d(t({},"__esModule",{value:!0}),n);var p=D((T,h)=>{h.exports=_jsx_runtime});var k={};f(k,{default:()=>v,frontmatter:()=>N});var e=w(p()),N={title:"How to implement Dark mode with Next.js and CSS variables",excerpt:"next-themes is a package for implementing Dark mode into your application. This article will guide you to create a toggle theme component with CSS variables.",publishedAt:new Date(16767828e5),category:"Next.js",tags:["Dark Mode","CSS Variables","next-themes"],image:"/images/posts/how-to-implement-light-dark-mode-css-vars-next-js/thumb.png",isPublished:!0,isFeatured:!1};function E(n){let l=Object.assign({p:"p",h2:"h2",a:"a",code:"code",div:"div",pre:"pre",span:"span",ol:"ol",li:"li",h3:"h3",h4:"h4"},n.components),{Box:r,UnorderedList:c,CodeHead:s,ThemeSwitch:i,BlogImage:o}=l;return o||a("BlogImage",!0),r||a("Box",!0),s||a("CodeHead",!0),i||a("ThemeSwitch",!0),c||a("UnorderedList",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l.p,{children:"Having a dark mode is a common feature for modern websites. It would be great for user experience to have an option to toggle between light / dark mode depending on user's preference."}),` `,(0,e.jsx)(l.p,{children:"In this article, I'll show you how to implement a dark mode in your Next.js apps."}),` `,(0,e.jsx)(l.h2,{id:"prerequisite",children:"Prerequisite"}),` `,(0,e.jsx)(r,{type:"success_l",children:(0,e.jsxs)(c,{children:[(0,e.jsxs)("li",{children:["You use ",(0,e.jsx)(l.a,{href:"https://nextjs.org/",children:"Next.js"})," for your site or app"]}),(0,e.jsx)("li",{children:(0,e.jsxs)(l.p,{children:["You use ",(0,e.jsx)(l.a,{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties",children:`CSS Variables`}),` for managing colors`]})})]})}),` `,(0,e.jsx)(l.h2,{id:"what-we-build",children:"What we build"}),` `,(0,e.jsx)(l.p,{children:"These are the features of what we are gonna build."}),` `,(0,e.jsx)(r,{type:"success_l",children:(0,e.jsxs)(c,{children:[(0,e.jsx)("li",{children:"The user can toggle to switch between Light and Dark mode."}),(0,e.jsx)("li",{children:"The user's system settings will be applied for their first visit."}),(0,e.jsx)("li",{children:(0,e.jsxs)(l.p,{children:["The prefered theme setting will be preserved in ",(0,e.jsx)(l.code,{children:"localStorage"}),` for their next visit.`]})})]})}),` `,(0,e.jsx)(l.p,{children:"If this is what you want, follow along this tutorial."}),` `,(0,e.jsx)(l.h2,{id:"step-1-install-next-themes-package",children:"Step 1. Install next-themes package"}),` `,(0,e.jsx)(l.p,{children:"We need only 1 package for implementing Dark mode."}),` `,(0,e.jsxs)(l.p,{children:["Open the terminal and install ",(0,e.jsx)(l.code,{children:"next-themes"})," package."]}),` `,(0,e.jsx)(s,{lang:"console"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"console","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"console","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"$"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"install"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"next-themes"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"# or"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"$"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"yarn"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"add"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"next-themes"})]})]})})}),` `,(0,e.jsx)(l.h2,{id:"step-2-create-a-css-file-for-managing-colors",children:"Step 2. Create a CSS file for managing colors"}),` `,(0,e.jsxs)(l.p,{children:["Now, we need to create a CSS file to store all the colors in Light / Dark mode. Create ",(0,e.jsx)(l.code,{children:"/styles/colors.css"})," file and set your colors like this:"]}),` `,(0,e.jsx)(s,{name:"/styles/colors.css",lang:"css"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"css","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"css","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D7BA7D"},children:":root"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"/* Your default theme */"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"--background"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"white"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"--foreground"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"black"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"data-theme"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"dark"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"] {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"--background"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"black"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"--foreground"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:"white"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})})]})})}),` `,(0,e.jsxs)(l.p,{children:["The ",(0,e.jsx)(l.code,{children:"root"})," pseudo-class selects the root element which is ",(0,e.jsx)(l.code,{children:"html"})," tag. The variables in this scope will be applied to Light mode."]}),` `,(0,e.jsxs)(l.p,{children:["And as you can guess, ",(0,e.jsx)(l.code,{children:"[data-theme='dark']"})," will be applied to Dark mode. This ",(0,e.jsx)(l.code,{children:"data-theme"})," attribute is added and updated whenever the user toggles the theme."]}),` `,(0,e.jsx)(l.h2,{id:"step-3-use-css-variables-in-your-css-files",children:"Step 3. Use CSS variables in your .css files"}),` `,(0,e.jsx)(l.p,{children:"Skip this section if you already know how to use CSS variables."}),` `,(0,e.jsxs)(l.p,{children:["Previously we created a ",(0,e.jsx)(l.code,{children:"colors.css"})," and configured colors for Light / Dark mode. Now, we need to apply those CSS variables in the stylesheets."]}),` `,(0,e.jsx)(l.p,{children:"Here's an exapmle of how you write CSS variables."}),` `,(0,e.jsx)(s,{name:"/styles/globals.css",lang:"css"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"css","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"css","data-theme":"default","data-line-numbers-max-digits":"1",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D7BA7D"},children:"body"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"background-color"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"var"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"--background"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"color"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"var"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"--foreground"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:"Like the example code above, replace all the hard-coded colors with CSS variables."}),` `,(0,e.jsx)(l.h2,{id:"step-4-add-themeprovider-in-_appjs",children:"Step 4. add ThemeProvider in _app.js"}),` `,(0,e.jsxs)(l.p,{children:["To enable dark mode, we need to do 2 things in ",(0,e.jsx)(l.code,{children:"_app.js"})," file which are the following:"]}),` `,(0,e.jsxs)(l.ol,{children:[` `,(0,e.jsxs)(l.li,{children:["Wrap the whole app with ",(0,e.jsx)(l.code,{children:"ThemeProvider"})]}),` `,(0,e.jsxs)(l.li,{children:["Import ",(0,e.jsx)(l.code,{children:"colors.css"})]}),` `]}),` `,(0,e.jsx)(s,{name:"_app.js",lang:"js"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"js","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"@/styles/colors.css"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"ThemeProvider"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"next-themes"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"App"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"pageProps"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#4EC9B0"},children:"ThemeProvider"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#4EC9B0"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"pageProps"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:"That's it! Now your Next.js app supports dark mode."}),` `,(0,e.jsxs)(l.p,{children:["If you refresh the page, you'll see ",(0,e.jsx)(l.code,{children:"data-theme"})," attribute on ",(0,e.jsx)(l.code,{children:"html"})," tag. The value would be either ",(0,e.jsx)(l.code,{children:"light"})," or ",(0,e.jsx)(l.code,{children:"dark"})," depending on your system settings."]}),` `,(0,e.jsx)(l.h2,{id:"step-5-create-theme-switch-component",children:"Step 5. create Theme Switch component"}),` `,(0,e.jsxs)(l.p,{children:["Now that we've implemented a dark mode, let's create a component to toggle between ",(0,e.jsx)(l.code,{children:"light"})," and ",(0,e.jsx)(l.code,{children:"dark"})," mode."]}),` `,(0,e.jsxs)(l.p,{children:["Create ",(0,e.jsx)(l.code,{children:"/components/theme-switch.jsx"})," file and paste the code below:"]}),` `,(0,e.jsx)(s,{name:"/components/theme-switch.jsx",lang:"jsx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default","data-line-numbers-max-digits":"2",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"useTheme"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"next-themes"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"ThemeSwitch"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mounted"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"setMounted"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"resolvedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"setTheme"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"useTheme"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"();"})]}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"// useEffect only runs on the client, so now we can safely show the UI"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"setMounted"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }, []);"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mounted"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"Current theme: "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"resolvedTheme"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"setTheme"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"resolvedTheme"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:" === "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"light"'}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:" ? "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"dark"'}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:" : "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"light"'}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"Toggle Theme"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})})]})})}),` `,(0,e.jsx)(l.p,{children:'I prepared the live demo of this code. You can try it out by clicking the "Toggle Theme" button.'}),` `,(0,e.jsx)(i,{}),` `,(0,e.jsxs)(l.p,{children:["Every time you click on the button, the value of ",(0,e.jsx)(l.code,{children:"data-theme"})," attribute on ",(0,e.jsx)(l.code,{children:"html"})," element will be switched."]}),` `,(0,e.jsx)(l.h3,{id:"code-explanation",children:"Code explanation"}),` `,(0,e.jsx)(l.p,{children:"First of all, we need to write a code to avoid hydration mismatch error."}),` `,(0,e.jsx)(s,{lang:"jsx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"useEffect"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"(() "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"setMounted"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}, []);"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"if"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"!"}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"mounted"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:") {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line"}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C586C0"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:"/* component here */"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"};"})})]})})}),` `,(0,e.jsxs)(l.p,{children:["This is officially recommended way so if you wanna know more about it, please check out the ",(0,e.jsx)(l.a,{href:"https://github.com/pacocoursey/next-themes",children:"next-themes GitHub page"}),"."]}),` `,(0,e.jsx)(l.h4,{id:"settheme",children:"setTheme"}),` `,(0,e.jsxs)(l.p,{children:["To set the theme, we use ",(0,e.jsx)(l.code,{children:"setTheme"})," function prepared by ",(0,e.jsx)(l.code,{children:"next-themes"}),"."]}),` `,(0,e.jsx)(s,{lang:"jsx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default","data-line-numbers-max-digits":"1",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#6A9955"},children:'// Set [data-theme="light"]'})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"setTheme"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"light"'}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})]})]})})}),` `,(0,e.jsxs)(l.p,{children:["You can simply pass the theme name as a string, and it will set it to ",(0,e.jsx)(l.code,{children:"data-theme"})," attribute of the root element."]}),` `,(0,e.jsx)(l.p,{children:"Since we wanna toggle the themes, we can write like this:"}),` `,(0,e.jsx)(s,{lang:"jsx"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"jsx","data-theme":"default","data-line-numbers-max-digits":"1",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#808080"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"button"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"setTheme"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"resolvedTheme"}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:" === "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"light"'}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:" ? "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"dark"'}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:" : "}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"light"'}),(0,e.jsx)(l.span,{style:{color:"#D4D4D4"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#569CD6"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#808080"},children:">"})})]})})}),` `,(0,e.jsxs)(l.p,{children:["If the current theme is ",(0,e.jsx)(l.code,{children:"light"}),", switch it to ",(0,e.jsx)(l.code,{children:"dark"}),", otherwise set is as ",(0,e.jsx)(l.code,{children:"light"}),"."]}),` `,(0,e.jsx)(l.h4,{id:"resolvedtheme",children:"resolvedTheme"}),` `,(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.code,{children:"next-themes"})," provides ",(0,e.jsx)(l.code,{children:"theme"})," and ",(0,e.jsx)(l.code,{children:"resolvedTheme"})," that return the active theme name."]}),` `,(0,e.jsxs)(l.p,{children:["These two behave almost the same but the difference is whether it supports ",(0,e.jsx)(l.code,{children:"system"})," theme or not."]}),` `,(0,e.jsx)(s,{lang:"js"}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-line-numbers":"","data-language":"js","data-theme":"default","data-line-numbers-max-digits":"1",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"console"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"log"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"theme: "'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"theme"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"console"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#DCDCAA"},children:"log"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#CE9178"},children:'"resolvedTheme:"'}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#9CDCFE"},children:"resolvedTheme"}),(0,e.jsx)(l.span,{style:{color:"#E6E6E6"},children:");"})]})]})})}),` `,(0,e.jsx)(o,{src:"/images/posts/how-to-implement-light-dark-mode-css-vars-next-js/log-result.png",alt:"The result of console.log",width:1666,height:74,hasBorder:!0,hasShadow:!0,children:(0,e.jsx)(l.p,{children:"I changed my Mac OS setting to 'dark' and this is the result:"})}),` `,(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.code,{children:"theme"})," understands that the current theme is ",(0,e.jsx)(l.code,{children:"system"}),", but it doesn't know whether the system setting is ",(0,e.jsx)(l.code,{children:"light"})," or ",(0,e.jsx)(l.code,{children:"dark"}),"."]}),` `,(0,e.jsxs)(l.p,{children:["So if you want to support the system setting, use ",(0,e.jsx)(l.code,{children:"resolvedTheme"}),"."]}),` `,(0,e.jsx)(l.h2,{id:"testing",children:"Testing"}),` `,(0,e.jsxs)(l.p,{children:["Now, let's see if the code is working. When you visit the site for the first time, ",(0,e.jsx)(l.code,{children:"next-themes"})," stores the active theme value in ",(0,e.jsx)(l.code,{children:"localStorage"}),"."]}),` `,(0,e.jsx)(l.p,{children:"To see this, open your developer tool in your browser (In my case, I use Google Chrome). Click on [Application] tab and choose [Local Storage] from the left menu bar."}),` `,(0,e.jsx)(o,{src:"/images/posts/how-to-implement-light-dark-mode-css-vars-next-js/local-storage.png",alt:"Local storage",width:1440,height:551,hasBorder:!0,hasShadow:!0}),` `,(0,e.jsxs)(l.p,{children:["For the first visitor, ",(0,e.jsx)(l.code,{children:"theme:system"})," is stored in here. Try checking if the system setting is reflected by switching the appearance mode."]}),` `,(0,e.jsx)(o,{src:"/images/posts/how-to-implement-light-dark-mode-css-vars-next-js/system-light.png",alt:"Whene system setting is light",width:1440,height:845,hasBorder:!0,hasShadow:!0,children:(0,e.jsx)(l.p,{children:"System Settings > Appearance: Light"})}),` `,(0,e.jsx)(o,{src:"/images/posts/how-to-implement-light-dark-mode-css-vars-next-js/system-dark.png",alt:"Whene system setting is dark",width:1440,height:845,hasBorder:!0,hasShadow:!0,children:(0,e.jsx)(l.p,{children:"System Settings > Appearance: Dark"})}),` `,(0,e.jsxs)(l.p,{children:["If the visitor clicks on the toggle button, ",(0,e.jsx)(l.code,{children:"theme"})," value will be updated and stored in the storage."]}),` `,(0,e.jsx)(l.p,{children:"You can check it yourself by clicking the button below:"}),` `,(0,e.jsx)(i,{}),` `,(0,e.jsx)(l.p,{children:"That's it! Now your website supports the system theme, and is capable of switching between Light / Dark mode."}),` `,(0,e.jsxs)(l.p,{children:["In this article, I showed you the most basic example. If you wanna know more about ",(0,e.jsx)(l.code,{children:"next-themes"}),", please check out ",(0,e.jsx)(l.a,{href:"https://github.com/pacocoursey/next-themes",children:"their official page"}),"."]})]})}function x(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(E,n)})):E(n)}var v=x;function a(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(k);})(); ;return Component;

- TAG -CSS Variables

How to implement Dark mode with Next.js and CSS variables