Add dark mode support

resources/css/app.css

@@ -1,5 +1,9 @@
 @tailwind base;
 
+html{
+  color-scheme: dark light;
+}
+
 /* Fonts */
 
 @font-face {

resources/js/Components/A.jsx

@@ -1,7 +1,7 @@
 import { Link } from '@inertiajs/react'
 
 export default function A({ color, ...props }) {
-  const classes = color === 'orange' ? 'text-orange-600 hover:text-orange-800' : 'text-blue-700 hover:text-orange-700'
+  const classes = color === 'orange' ? 'text-orange-600 hover:text-orange-800' : 'text-blue-700 dark:text-blue-500 hover:text-orange-700 hover:text-orange-500'
   return props.href.startsWith('http') || props.href.startsWith('#') ? (
     <a {...props} className={`${classes} font-medium underline`} />
   ) : (

resources/js/Components/Code.jsx

@@ -1,4 +1,4 @@
 export default function Code({ color, ...props }) {
-  const bgClass = color === 'orange' ? 'bg-orange-300' : 'bg-gray-200'
+  const bgClass = color === 'orange' ? 'bg-orange-300' : 'bg-gray-200 dark:bg-gray-800/80'
   return <code {...props} className={`whitespace-nowrap rounded p-1 font-mono text-sm ${bgClass}`} />
 }

resources/js/Components/H1.jsx

@@ -1,3 +1,3 @@
 export default function H1(props) {
-  return <h1 {...props} className="mb-12 text-4xl font-bold leading-none text-gray-700" />
+  return <h1 {...props} className="mb-12 text-4xl font-bold leading-none text-gray-700 dark:text-gray-400" />
 }

resources/js/Components/H2.jsx

@@ -12,7 +12,7 @@ export default function H2(props) {
     <h2
       {...props}
       id={props.id || kebabCase(slot)}
-      className="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700"
+      className="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700 dark:text-gray-400"
     />
   )
 }

resources/js/Components/H3.jsx

@@ -12,7 +12,7 @@ export default function H3(props) {
     <h3
       {...props}
       id={props.id || kebabCase(slot)}
-      className="mt-16 mb-4 text-xl font-bold leading-tight text-gray-700"
+      className="mt-16 mb-4 text-xl font-bold leading-tight text-gray-700 dark:text-gray-400"
     />
   )
 }

resources/js/Components/Layout.jsx

@@ -94,7 +94,7 @@ export default function Layout({ meta, children }) {
             </svg>
           </button>
           {showMobileNav && (
-            <Nav className="absolute top-0 right-0 z-50 -mt-4 whitespace-nowrap rounded bg-white px-6 pb-6 shadow-xl" />
+            <Nav className="absolute top-0 right-0 z-50 -mt-4 whitespace-nowrap rounded bg-white dark:bg-gray-900 px-6 pb-6 shadow-xl" />
           )}
         </div>
         <div className="hidden items-center text-white md:flex">
@@ -198,24 +198,24 @@ export default function Layout({ meta, children }) {
 
   function Sponsors() {
     return (
-      <div className="bg-gray-200">
+      <div className="bg-gray-200 dark:bg-gray-900">
         <div className="mx-auto flex max-w-6xl items-center justify-start gap-8 overflow-x-auto px-6 py-4 md:px-12 lg:gap-12 xl:px-0">
-          <div className="text-md font-medium text-gray-600">
+          <div className="text-md font-medium text-gray-600 dark:text-gray-500">
             <div className="md:hidden">Sponsors:</div>
             <div className="hidden whitespace-nowrap md:block">Our sponsors:</div>
           </div>
-          <a className="text-gray-600 hover:text-gray-800" href="https://forge.laravel.com" title="Laravel Forge">
+          <a className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100" href="https://forge.laravel.com" title="Laravel Forge">
             <svg className="h-3.5 w-auto fill-current" viewBox="0 0 217.38 39.97">
               <path d="M77.94.32c4.13 0 6.03.74 7.2 2.22 1.68 2.22 2.64 6.66-.11 17.55S79.2 35.3 76.36 37.64c-1.9 1.48-4.23 2.22-8.36 2.22H54.8c-4.13 0-6.13-.74-7.2-2.22-1.68-2.22-2.63-6.66.22-17.55 2.75-10.9 5.92-15.23 8.78-17.55C58.49 1.06 60.8.32 64.94.32h13zM58.7 30.24c.21.32.74.42 2.43.42h5.08c1.69 0 2.32-.1 2.75-.42.52-.42 1.48-1.48 3.59-10.15 2.22-8.67 1.8-9.73 1.48-10.15-.21-.32-.74-.42-2.43-.42h-4.97c-1.7 0-2.33.1-2.75.42-.53.42-1.48 1.48-3.6 10.15-2.32 8.77-1.9 9.73-1.58 10.15zm51.28-3.17c-.42-.53-.85-.74-3.38-.74h-4.97c-.53 0-1.06.42-1.17.95L97.61 38.9c-.1.53-.64.95-1.16.95H86.19c-.53 0-.85-.42-.74-.95l9.4-37.64c.11-.53.64-.95 1.17-.95h24.1c3.92 0 6.03.53 7.2 2 1.27 1.8 1.69 3.7.32 9.2-1.8 7.4-4.55 9.52-9.3 10.47v.1c3.7.96 5.7 2.23 4.43 7.94-.74 3.27-1.27 6.55-1.58 8.77-.11.53-.64 1.06-1.17 1.06h-10.46c-.43 0-.85-.32-.74-.85.31-2.43.74-4.86 1.37-7.93.42-2.85.21-3.38-.21-4.01zm-.74-9.3c2.22 0 2.85-.11 3.28-.43.74-.53 1.26-1.48 1.8-3.8s.42-3.18 0-3.7c-.32-.32-.85-.43-3.07-.43h-5.5c-.53 0-1.06.42-1.16.95L103 16.92c-.1.53.21.95.74.95h5.5v-.1zM160.94 0c4.23 0 6.45.53 7.72 2 1.48 1.8 2 4.56.84 10.69-.1.53-.63.95-1.16.95h-9.83c-.53 0-.85-.42-.74-.85.42-2.43-.1-2.75-.43-3.17-.2-.32-.63-.42-2.43-.42h-5.07c-1.8 0-2.33.1-2.75.42-.64.53-1.8 2.33-3.7 10.36s-1.59 9.94-1.27 10.47c.21.32.74.42 2.54.42h5.39c1.59 0 2.22-.1 2.64-.42.53-.42 1.59-1.48 2.22-4.33l.1-.32h-7.6c-.53 0-.85-.43-.74-.95l1.48-6.35c.1-.53.63-.95 1.16-.95h18.3c.52 0 .84.42.73.95l-.95 3.91c-2.22 9.63-4.86 13-7.61 15.23-2.01 1.7-4.87 2.33-8.57 2.33H138c-4.13 0-6.14-.74-7.3-2.33-1.8-2.33-2.75-6.66-.1-17.66s5.7-15.43 8.56-17.65C141.06.74 143.39 0 147.51 0h13.43zm41.23 39.97h-31.6c-.54 0-.85-.43-.75-.96L178.7.95c.1-.53.64-.95 1.17-.95h36.79c.63 0 .95.63.53 1.27-1.59 2.54-7.72 7.93-14.6 7.93H189.8c-.52 0-1.05.42-1.16.95l-.95 4.23c-.1.53.21.95.74.95h17.23c.53 0 .85.42.74.95l-1.48 6.66c-.1.53-.63.95-1.16.95h-17.23c-.53 0-1.06.43-1.17.96l-1.16 4.86c-.1.53.21.95.74.95h19.35c.53 0 .84.42.74.95l-1.7 7.3c-.1.63-.63 1.06-1.16 1.06zM50.24.32H6.9c-.53 0-1.05.42-1.16.95l-1.06 3.8c-.1.43.1.75.43.96 1.69.53 10.78.74 9.4 5.81l-.31 1.38-3.7 13.85-.32 1.37c-1.37 5.08-6.24 5.29-8.25 5.82-.42.1-.74.52-.84.95L.02 39c-.1.53.21.96.74.96h17.66c.53 0 1.05-.43 1.16-.96l3.17-12.26c.1-.53.64-.95 1.16-.95h11.32c.53 0 1.06-.43 1.16-.95l1.7-6.56c.1-.53-.22-.95-.75-.95H26.03c-.53 0-.85-.42-.74-.95l1.59-5.92c.1-.53.63-.95 1.16-.95h17.02c.53 0 1.06-.43 1.16-.96l4.55-7.19c.21-.63 0-1.05-.53-1.05z" />
             </svg>
           </a>
-          <a className="text-gray-600 hover:text-gray-800" href="https://ploi.io" title="Ploi">
+          <a className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100" href="https://ploi.io" title="Ploi">
             <svg className="h-5 w-auto fill-current" viewBox="0 0 253 93.3">
               <path d="M25.7 66a11.4 11.4 0 01-9.5-4.7q-3.6-4.7-3.7-12.6T16.2 36a11.4 11.4 0 019.5-4.7 11.4 11.4 0 019.6 4.7Q39 40.7 39 48.7t-3.6 12.6a11.5 11.5 0 01-9.6 4.7zm3.8-45.1a18.9 18.9 0 00-10.2 2.7 18 18 0 00-6.7 7.5h-.3v-9.3H0v71.5h12.6V66.5h.3a17 17 0 006.6 7.2 19.4 19.4 0 0010.2 2.6q10.2 0 16.1-7.4t6-20.3q0-12.9-6-20.4T29.5 21zM59.2 75.5h12.6V2.5H59.2v73.1zM105.3 66.6a11.5 11.5 0 01-9.6-4.7Q92 57.2 92 48.7t3.6-13.3a12.1 12.1 0 0119.2 0q3.6 4.7 3.6 13.3t-3.6 13.2a11.5 11.5 0 01-9.6 4.7zm0 10q11.8 0 19-7.4t7-20.6q0-13-7.1-20.4t-19-7.5q-11.7 0-18.8 7.5t-7.1 20.4q0 13.2 7 20.6t19 7.4zM145 13.7a6.7 6.7 0 004.9-2 6.6 6.6 0 002-4.8 6.6 6.6 0 00-2-4.9 6.8 6.8 0 00-5-2 6.7 6.7 0 00-4.8 2 6.5 6.5 0 00-2 4.9 6.5 6.5 0 002 4.8 6.6 6.6 0 004.8 2zm-6.3 61.9h12.6V21.8h-12.7v53.8zM168.8 76a5.7 5.7 0 10-4.1-1.6 5.6 5.6 0 004 1.7zM191.5 13.4a5.3 5.3 0 004-1.6A5.3 5.3 0 00197 8a5.5 5.5 0 10-11 0 5.3 5.3 0 001.5 4 5.3 5.3 0 004 1.5zm-4.4 62.1h8.8V22.8H187v52.8zM228.6 68.7a13.8 13.8 0 01-11.2-5q-4.3-5.2-4.3-14.5t4.3-14.4a14.9 14.9 0 0122.4 0q4.2 5 4.2 14.4t-4.2 14.4a13.8 13.8 0 01-11.2 5.1zm0 7.8q10.9 0 17.6-7.4t6.8-20q0-12.5-6.8-19.9T228.7 22q-11 0-17.7 7.3t-6.7 20q0 12.6 6.7 20t17.7 7.3z" />
             </svg>
           </a>
           <a
-            className="text-gray-600 hover:text-gray-800"
+            className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100"
             href="https://www.landersystems.com/?utm_source=inertiajs"
             title="Lander Systems"
           >
@@ -235,7 +235,7 @@ export default function Layout({ meta, children }) {
               <path d="M217.82 6.23023C217.02 5.58023 215.94 5.24023 214.6 5.24023C213.34 5.24023 212.18 5.53023 211.13 6.11023C210.27 6.59023 209.52 7.25023 208.88 8.09023C208.59 7.29023 208.13 6.64023 207.52 6.16023C206.74 5.55023 205.71 5.24023 204.45 5.24023C203.29 5.24023 202.22 5.50023 201.26 6.02023C200.75 6.30023 200.27 6.65023 199.83 7.07023L200.18 5.24023H194.47L191.09 22.7002H196.98L198.52 14.8002C198.69 13.8502 198.94 12.9902 199.26 12.2402C199.57 11.5102 199.97 10.9102 200.45 10.4602C200.9 10.0302 201.43 9.83023 202.05 9.83023C202.91 9.83023 203.13 10.2102 203.22 10.5402C203.39 11.1402 203.36 12.0502 203.15 13.2202L201.32 22.7002H207.16L208.75 14.4502C209.04 13.0602 209.47 11.9202 210.05 11.0402C210.58 10.2302 211.27 9.83023 212.17 9.83023C212.81 9.83023 213.17 10.0602 213.33 10.5902C213.52 11.2102 213.51 12.1002 213.31 13.2302L211.47 22.7102H217.38L219.27 12.9802C219.54 11.4602 219.57 10.1202 219.36 8.99023C219.14 7.82023 218.63 6.89023 217.83 6.23023H217.82Z" />
             </svg>
           </a>
-          <a className="text-gray-600 hover:text-gray-800" href="https://laracasts.com" title="Laracasts">
+          <a className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100" href="https://laracasts.com" title="Laracasts">
             <svg className="h-[0.8125rem] w-auto fill-current" viewBox="0 0 206 24">
               <path d="M0 3.4h4.47v15.677h9.683v3.643H0V3.4zm34.146 15.18H25.18l-1.71 4.14h-4.58L27.496 3.4h4.415l8.635 19.32h-4.69l-1.71-4.14zm-1.407-3.395l-3.062-7.397-3.063 7.397h6.125zm26.725 7.535l-3.724-5.382h-4.111v5.382h-4.47V3.4h8.36c1.71 0 3.196.285 4.456.855 1.26.57 2.23 1.38 2.91 2.43.68 1.048 1.021 2.29 1.021 3.725 0 1.436-.345 2.673-1.035 3.713s-1.669 1.835-2.938 2.387l4.332 6.21h-4.8zm-.083-12.31c0-1.085-.35-1.918-1.048-2.498-.699-.58-1.72-.869-3.062-.869h-3.642v6.735h3.642c1.342 0 2.363-.295 3.062-.884.699-.588 1.048-1.416 1.048-2.484zm25.373 8.17h-8.966l-1.71 4.14h-4.58L78.104 3.4h4.415l8.635 19.32h-4.69l-1.71-4.14zm-1.407-3.395l-3.062-7.397-3.063 7.397h6.125zm23.387 7.867c-1.968 0-3.748-.428-5.339-1.284-1.59-.855-2.841-2.042-3.752-3.56-.91-1.518-1.366-3.234-1.366-5.148 0-1.914.456-3.63 1.366-5.148.91-1.518 2.161-2.704 3.752-3.56 1.591-.856 3.38-1.284 5.366-1.284 1.674 0 3.187.295 4.539.884a9.09 9.09 0 0 1 3.407 2.539l-2.87 2.65c-1.305-1.51-2.924-2.264-4.855-2.264-1.195 0-2.262.263-3.2.787a5.59 5.59 0 0 0-2.194 2.194c-.524.939-.786 2.006-.786 3.202 0 1.196.262 2.263.786 3.202a5.59 5.59 0 0 0 2.194 2.194c.938.524 2.005.787 3.2.787 1.931 0 3.55-.764 4.856-2.291l2.87 2.65a8.944 8.944 0 0 1-3.422 2.566c-1.361.59-2.878.884-4.552.884zm47.27 0c-1.527 0-3.003-.207-4.429-.621-1.425-.414-2.57-.953-3.435-1.615l1.518-3.367c.828.607 1.812 1.094 2.952 1.462 1.14.368 2.28.552 3.421.552 1.27 0 2.207-.188 2.814-.565.607-.378.91-.879.91-1.505 0-.46-.179-.841-.537-1.145-.36-.304-.819-.547-1.38-.731a27.449 27.449 0 0 0-2.276-.608c-1.471-.35-2.676-.699-3.614-1.049a5.872 5.872 0 0 1-2.414-1.683c-.672-.773-1.007-1.803-1.007-3.091 0-1.123.303-2.14.91-3.05.607-.911 1.522-1.633 2.745-2.167 1.223-.534 2.718-.8 4.484-.8 1.232 0 2.437.147 3.614.441 1.177.295 2.207.718 3.09 1.27l-1.38 3.395c-1.784-1.012-3.568-1.518-5.352-1.518-1.25 0-2.175.202-2.773.607-.598.405-.896.938-.896 1.6 0 .663.344 1.155 1.034 1.477.69.322 1.743.64 3.16.953 1.47.35 2.675.699 3.613 1.048.938.35 1.743.902 2.414 1.656.672.755 1.007 1.776 1.007 3.064a5.277 5.277 0 0 1-.924 3.022c-.616.911-1.54 1.634-2.773 2.167-1.232.534-2.73.8-4.497.8zm19.579-16.009h-6.18V3.4h16.83v3.643h-6.18V22.72h-4.47V7.043zm23.855 16.009c-1.526 0-3.002-.207-4.428-.621-1.425-.414-2.57-.953-3.435-1.615l1.518-3.367c.827.607 1.811 1.094 2.952 1.462 1.14.368 2.28.552 3.42.552 1.27 0 2.208-.188 2.815-.565.607-.378.91-.879.91-1.505 0-.46-.18-.841-.538-1.145-.358-.304-.818-.547-1.38-.731a27.449 27.449 0 0 0-2.275-.608c-1.472-.35-2.676-.699-3.614-1.049a5.872 5.872 0 0 1-2.415-1.683c-.67-.773-1.007-1.803-1.007-3.091 0-1.123.304-2.14.91-3.05.608-.911 1.523-1.633 2.746-2.167 1.223-.534 2.718-.8 4.483-.8 1.233 0 2.437.147 3.614.441 1.178.295 2.208.718 3.09 1.27l-1.379 3.395c-1.784-1.012-3.568-1.518-5.352-1.518-1.251 0-2.175.202-2.773.607-.598.405-.897.938-.897 1.6 0 .663.345 1.155 1.035 1.477.69.322 1.743.64 3.159.953 1.471.35 2.676.699 3.614 1.048.938.35 1.743.902 2.414 1.656.671.755 1.007 1.776 1.007 3.064a5.277 5.277 0 0 1-.924 3.022c-.616.911-1.54 1.634-2.773 2.167-1.232.534-2.731.8-4.497.8z" />
               <path d="M123.42 6.017l3.147 3.146a1.661 1.661 0 1 1-2.35 2.35l-3.146-3.146a1.661 1.661 0 1 1 2.35-2.35zM130.15 12.746l6.742 6.742a1.661 1.661 0 1 1-2.35 2.35l-6.742-6.742a1.661 1.661 0 1 1 2.35-2.35z" />
@@ -244,7 +244,7 @@ export default function Layout({ meta, children }) {
             </svg>
           </a>
           <a
-            className="text-gray-600 hover:text-gray-800"
+            className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-100"
             href="https://www.bairesdev.com/sponsoring-open-source-projects/"
             title="BairesDev"
           >
@@ -272,7 +272,7 @@ export default function Layout({ meta, children }) {
         {meta.twitterCardImage && <meta name="twitter:description" content={meta.description} />}
         {meta.twitterCardImage && <meta name="twitter:image" content={meta.twitterCardImage} />}
       </Head>
-      <div onClick={() => setShowMobileNav(false)} className="font-sans leading-none text-gray-800 antialiased">
+      <div onClick={() => setShowMobileNav(false)} className="font-sans leading-none text-gray-800 dark:text-gray-300 antialiased">
         <div className="text-white" style={{ background: 'linear-gradient(to right, #9553e9, #6d74ed)' }}>
           <div className="relative mx-auto max-w-6xl px-6 md:px-12 xl:px-0">
             <HeaderBackground />
@@ -284,7 +284,7 @@ export default function Layout({ meta, children }) {
         {meta.sponsor && <Sponsors />}
 
         <div className="mx-auto flex max-w-6xl py-12 md:px-12 md:py-24 xl:px-0">
-          <Nav className="hidden flex-shrink-0 border-r md:block md:w-48 lg:w-56" />
+          <Nav className="hidden flex-shrink-0 border-r dark:border-gray-900 md:block md:w-48 lg:w-56" />
           <div
             className="flex-1 overflow-hidden px-6 text-lg leading-relaxed md:pl-12 md:pr-0 lg:pl-16 xl:pl-16 xl:pr-20"
             id="top"
@@ -299,7 +299,7 @@ export default function Layout({ meta, children }) {
                   <ul>
                     {meta.links.map((link, index) => (
                       <li className="mt-4" key={index}>
-                        <a href={link.url} className="font-medium text-gray-700 hover:text-blue-700 hover:underline">
+                        <a href={link.url} className="font-medium text-gray-700 dark:text-gray-400 hover:text-blue-700 hover:underline">
                           {link.name}
                         </a>
                       </li>
@@ -316,7 +316,7 @@ export default function Layout({ meta, children }) {
                   />
                 </svg>
               </a>
-              <div className="mt-12 border-t pt-12" id="ad" />
+              <div className="mt-12 border-t dark:border-gray-900 pt-12" id="ad" />
             </div>
           </div>
         </div>

resources/js/Components/Nav.jsx

@@ -5,13 +5,13 @@ const Nav = ({ className }) => {
 
   function linkClass(path) {
     return (path === '/' && path === page.url) || (path !== '/' && page.url.startsWith(path))
-      ? `block -ml-3 pl-3 pr-2 py-1 md:py-2 font-medium border-l-4 rounded-r border-purple-400 bg-purple-100 text-purple-700`
-      : `inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700`
+      ? `block -ml-3 pl-3 pr-2 py-1 md:py-2 font-medium border-l-4 rounded-r border-purple-400 dark:border-purple-600 bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-300`
+      : `inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700 dark:text-gray-400`
   }
 
   return (
     <nav className={className}>
-      <div className="-mx-6 mt-4 mb-6 flex justify-center border-b pb-4 md:hidden">
+      <div className="-mx-6 mt-4 mb-6 flex justify-center border-b dark:border-gray-700 pb-4 md:hidden">
         <a className="mr-5 flex items-center text-gray-500 hover:text-gray-700" href="https://github.com/inertiajs">
           <svg className="h-5 w-5 fill-current" viewBox="0 0 20 20">
             <title>GitHub</title>

resources/js/Components/Strong.jsx

@@ -1,3 +1,3 @@
 export default function Strong(props) {
-  return <strong {...props} className="font-bold text-gray-700" />
+  return <strong {...props} className="font-bold text-gray-700 dark:text-gray-400" />
 }

resources/js/Pages/error-handling.jsx

@@ -27,7 +27,7 @@ export default function () {
         Inertia solves this issue by showing all non-Inertia responses in a modal. This means you get the same beautiful
         error-reporting you're accustomed to, even though you've made that request over XHR.
       </P>
-      <div className="relative my-6 overflow-hidden rounded bg-gray-500" style={{ paddingTop: '80.5%' }}>
+      <div className="relative my-6 overflow-hidden rounded bg-gray-500 dark:bg-gray-900" style={{ paddingTop: '80.5%' }}>
         <div className="absolute inset-0 flex h-full w-full items-center justify-center text-sm">Loading&hellip;</div>
         <iframe
           className="absolute inset-0 h-full w-full"

tailwind.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   mode: 'jit',
   purge: ['./resources/js/**/*.jsx'],
-  darkMode: false, // or 'media' or 'class'
+  darkMode: 'media', // or false or 'class'
   theme: {
     colors: {
       transparent: 'transparent',