var Component=(()=>{var d=Object.create;var t=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var m=(n,s)=>()=>(s||n((s={exports:{}}).exports,s),s.exports),g=(n,s)=>{for(var a in s)t(n,a,{get:s[a],enumerable:!0})},i=(n,s,a,l)=>{if(s&&typeof s=="object"||typeof s=="function")for(let r of p(s))!B.call(n,r)&&r!==a&&t(n,r,{get:()=>s[r],enumerable:!(l=h(s,r))||l.enumerable});return n};var u=(n,s,a)=>(a=n!=null?d(y(n)):{},i(s||!n||!n.__esModule?t(a,"default",{value:n,enumerable:!0}):a,n)),A=n=>i(t({},"__esModule",{value:!0}),n);var o=m((w,c)=>{c.exports=_jsx_runtime});var f={};g(f,{default:()=>x,frontmatter:()=>F});var e=u(o()),F={title:"How to add dark mode to your NextJS site with Tailwind",date:"6-12-2022",published:!0,description:"Adding dark mode to your site in just 15 minutes using next-themes.",tags:["NextJS","Tailwind"]};function C(n={}){let{wrapper:s}=n.components||{};return s?(0,e.jsx)(s,Object.assign({},n,{children:(0,e.jsx)(a,{})})):a();function a(){let l=Object.assign({p:"p",strong:"strong",a:"a",em:"em",img:"img",h3:"h3",ol:"ol",li:"li",hr:"hr",code:"code",div:"div",pre:"pre",span:"span",ul:"ul",br:"br"},n.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(l.p,{children:["Before we start, we ask the question: ",(0,e.jsx)(l.strong,{children:"why dark mode?"})]}),` `,(0,e.jsxs)(l.p,{children:[`The myth that dark mode is `,(0,e.jsx)(l.a,{href:"https://www.nngroup.com/articles/dark-mode/#:~:text=Summary%3A%20In%20people%20with%20normal,may%20be%20associated%20with%20myopia.",children:"better for the eyes has been dispelled by numerous studies."})]}),` `,(0,e.jsx)(l.p,{children:`That said, dark mode is still all the rage these days, with many surveys reporting that users predominantly prefer to use dark themes.`}),` `,(0,e.jsxs)(l.p,{children:["And we all know that developers ",(0,e.jsx)(l.em,{children:"love"})," dark mode."]}),` `,(0,e.jsx)(l.p,{children:(0,e.jsx)(l.img,{src:"/images/darkmode/meme.png",alt:"meme"})}),` `,(0,e.jsx)(l.h3,{children:"Great, so how do I implement dark mode?"}),` `,(0,e.jsx)(l.p,{children:`There's many ways to go about implementing a dark mode, in this article, we'll be using next-themes, a package that makes setting up dark mode a breeze.`}),` `,(0,e.jsx)(l.p,{children:"A dark theme requires a few ingredients:"}),` `,(0,e.jsxs)(l.ol,{children:[` `,(0,e.jsxs)(l.li,{children:[(0,e.jsx)(l.strong,{children:"The state"}),": what is the current theme?"]}),` `,(0,e.jsxs)(l.li,{children:[(0,e.jsx)(l.strong,{children:"A way to toggle the state"}),`: usually in a form of a button, but we'll also take a look at how to get the user's system theme.`]}),` `,(0,e.jsxs)(l.li,{children:[(0,e.jsx)(l.strong,{children:"Styling the dark mode itself"}),`: we'll achieve this with the help of TailwindCSS.`]}),` `]}),` `,(0,e.jsx)(l.hr,{}),` `,(0,e.jsx)(l.h3,{children:"Next-themes"}),` `,(0,e.jsxs)(l.p,{children:[`The easiest way to implement dark mode is through the use of `,(0,e.jsx)(l.a,{href:"https://www.npmjs.com/package/next-themes",children:"a package called next-themes"}),"."]}),` `,(0,e.jsxs)(l.p,{children:["We can install it by running ",(0,e.jsx)(l.code,{children:"npm install next-themes"}),"."]}),` `,(0,e.jsxs)(l.p,{children:["Once it's installed, we need to import the ",(0,e.jsx)(l.code,{children:"ThemeProvider"}),` and wrap our app with it.`]}),` `,(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"default",children:"_app.tsx"}),(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",children:[(0,e.jsxs)(l.span,{className:"line syntax-line syntax-line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ThemeProvider"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"'next-themes'"})]}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"MyApp"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"pageProps"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line syntax-line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ThemeProvider"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"attribute"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"class"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"defaultTheme"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"system"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Component"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"pageProps"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line syntax-line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"MyApp"})]})]})})]}),` `,(0,e.jsxs)(l.p,{children:["We also want to pass in ",(0,e.jsx)(l.code,{children:'attribute="class"'})," and ",(0,e.jsx)(l.code,{children:'defaultTheme="system"'}),"."]}),` `,(0,e.jsxs)(l.ol,{children:[` `,(0,e.jsxs)(l.li,{children:[(0,e.jsx)(l.code,{children:'attribute="class"'}),` enables us to use Tailwind to style using class-based components.`]}),` `,(0,e.jsxs)(l.li,{children:[(0,e.jsx)(l.code,{children:'defaultTheme="system"'}),` allows us to respect the user's system theme. If not, the default theme will be light.`]}),` `]}),` `,(0,e.jsx)(l.p,{children:"With this setup done, we can move onto toggling and reading the current theme."}),` `,(0,e.jsx)(l.h3,{children:"Toggling and storing the theme"}),` `,(0,e.jsx)(l.p,{children:`In this example, we'll create a toggle in the navbar with some material design icons.`}),` `,(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"default",children:"Navbar.tsx"}),(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",children:[(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"MdDarkMode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"MdLightMode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"'react-icons/md'"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"'next-themes'"})]}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"Navbar"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" () "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line syntax-line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"setTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"resolvedTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"()"})]}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"navbar"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"sidebar-icon"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line syntax-line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"resolvedTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"=="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"'dark'"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line syntax-line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"MdLightMode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"'light'"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"22"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line syntax-line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line syntax-line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"MdDarkMode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onClick"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setTheme"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"'dark'"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"size"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"22"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line syntax-line--highlighted",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),` `,(0,e.jsxs)(l.p,{children:["We use ",(0,e.jsx)(l.code,{children:"resolvedTheme"})," here to account for the system theme."]}),` `,(0,e.jsx)(l.p,{children:`We use a simple ternary to check for the resolvedTheme and render the switch accordingly.`}),` `,(0,e.jsx)(l.p,{children:`Now, to check whether this is working, we can head into the chrome dev tools and pull up the application tab.`}),` `,(0,e.jsxs)(l.p,{children:[`Under application > storage > local storage > localhost:3000, we should see a `,(0,e.jsx)(l.code,{children:"theme"})," key with the value: ",(0,e.jsx)(l.code,{children:"light"})," or ",(0,e.jsx)(l.code,{children:"dark"}),", depending on the current theme."]}),` `,(0,e.jsx)(l.p,{children:"Try toggling the button to see if it works."}),` `,(0,e.jsx)(l.p,{children:(0,e.jsx)(l.img,{src:"/images/darkmode/togglegif.gif",alt:"toggle button"})}),` `,(0,e.jsx)(l.p,{children:"Great! Now what's left is the fun part - the styling!"}),` `,(0,e.jsx)(l.h3,{children:"Styling your dark mode"}),` `,(0,e.jsxs)(l.p,{children:["Since we're using Tailwind, we can use the very handy ",(0,e.jsx)(l.code,{children:"dark:"}),` utility to style the dark mode.`]}),` `,(0,e.jsxs)(l.p,{children:["Just like the breakpoint utilities, we use the ",(0,e.jsx)(l.code,{children:"dark"}),` utility to apply classes conditionally based on the theme.`]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"html","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"html","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"body"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"bg-white transition-colors dark:bg-black dark:text-neutral-300"'})]}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {...}"})}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:""})]})]})})}),` `,(0,e.jsxs)(l.p,{children:[`For example, this means that body will normally have a background-color of white, and when dark mode is active, `,(0,e.jsx)(l.code,{children:"bg-black"})," and ",(0,e.jsx)(l.code,{children:"text-neutral-300"}),` will be applied.`]}),` `,(0,e.jsxs)(l.p,{children:["The ",(0,e.jsx)(l.code,{children:"transition-colors"}),` will give a nice transition animation when the theme changes, but you can play around with Tailwind to find what you like.`]}),` `,(0,e.jsx)(l.p,{children:`And with that, dark mode is all setup! Play around with the colors to find out what you like.`}),` `,(0,e.jsx)(l.p,{children:"It's a good idea to refer to some design guidelines to ensure accessibility."}),` `,(0,e.jsxs)(l.ol,{children:[` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://material.io/design/color/dark-theme.html",children:"Google's material design guidelines"})}),` `,(0,e.jsx)(l.li,{children:(0,e.jsx)(l.a,{href:"https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/dark-mode",children:"Apple's human interface guidelines"})}),` `]}),` `,(0,e.jsx)(l.h3,{children:"Side notes"}),` `,(0,e.jsxs)(l.ul,{children:[` `,(0,e.jsxs)(l.li,{children:[` `,(0,e.jsxs)(l.p,{children:[`It's best to apply a filter to images in dark mode. I found this from `,(0,e.jsx)(l.a,{href:"https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#design",children:"CSSTricks"})]}),` `,(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"css","data-theme":"default",children:"globals.css"}),(0,e.jsx)(l.pre,{"data-language":"css","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"css","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"img"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" @apply dark:brightness-["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] dark:contrast-["}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"1.2"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"];"})]}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line syntax-line",children:[(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"body"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" @apply dark:font-light;"})}),` `,(0,e.jsx)(l.span,{className:"line syntax-line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),` `]}),` `,(0,e.jsxs)(l.li,{children:[` `,(0,e.jsxs)(l.p,{children:[(0,e.jsx)(l.strong,{children:"Dark theme does not mean white text on a black background"}),(0,e.jsx)(l.br,{}),` `,`Typography is pretty nuanced and complicated, dark mode makes it harder still. I think `,(0,e.jsx)(l.a,{href:"https://css-tricks.com/dark-mode-and-variable-fonts/",children:"this"}),` is a great article that highlights some things to consider about typography in dark mode.`]}),` `]}),` `]}),` `,(0,e.jsx)(l.p,{children:"That's it! Thanks for reading!"})]})}}var x=C;return A(f);})(); ;return Component;