From b1c87474b874af4e0d7fece16242683a781903bb Mon Sep 17 00:00:00 2001
From: mergehez <argesozdogan@gmail.com>
Date: Tue, 1 Oct 2024 16:37:32 +0200
Subject: [PATCH] added dark mode support

---
 resources/css/app.css                 |  4 ++++
 resources/js/Components/A.jsx         |  2 +-
 resources/js/Components/Code.jsx      |  2 +-
 resources/js/Components/H1.jsx        |  2 +-
 resources/js/Components/H2.jsx        |  2 +-
 resources/js/Components/H3.jsx        |  2 +-
 resources/js/Components/Layout.jsx    | 24 ++++++++++++------------
 resources/js/Components/Nav.jsx       |  6 +++---
 resources/js/Components/Strong.jsx    |  2 +-
 resources/js/Pages/error-handling.jsx |  2 +-
 tailwind.config.js                    |  2 +-
 11 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 892af9a1..4f98a94b 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,5 +1,9 @@
 @tailwind base;
 
+html{
+  color-scheme: dark light;
+}
+
 /* Fonts */
 
 @font-face {
diff --git a/resources/js/Components/A.jsx b/resources/js/Components/A.jsx
index bbdbb27f..bb9d7ff7 100644
--- a/resources/js/Components/A.jsx
+++ b/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`} />
   ) : (
diff --git a/resources/js/Components/Code.jsx b/resources/js/Components/Code.jsx
index e1bd281a..a1882a28 100644
--- a/resources/js/Components/Code.jsx
+++ b/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}`} />
 }
diff --git a/resources/js/Components/H1.jsx b/resources/js/Components/H1.jsx
index bde6bdd9..0c3e4508 100644
--- a/resources/js/Components/H1.jsx
+++ b/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" />
 }
diff --git a/resources/js/Components/H2.jsx b/resources/js/Components/H2.jsx
index 10a9a2bb..51c3de75 100644
--- a/resources/js/Components/H2.jsx
+++ b/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"
     />
   )
 }
diff --git a/resources/js/Components/H3.jsx b/resources/js/Components/H3.jsx
index 29d34f5c..c866b869 100644
--- a/resources/js/Components/H3.jsx
+++ b/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"
     />
   )
 }
diff --git a/resources/js/Components/Layout.jsx b/resources/js/Components/Layout.jsx
index 79d8ee3b..f6deabe4 100644
--- a/resources/js/Components/Layout.jsx
+++ b/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>
diff --git a/resources/js/Components/Nav.jsx b/resources/js/Components/Nav.jsx
index 74ef5500..f81235d5 100644
--- a/resources/js/Components/Nav.jsx
+++ b/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>
diff --git a/resources/js/Components/Strong.jsx b/resources/js/Components/Strong.jsx
index 615e17b3..1d5928cd 100644
--- a/resources/js/Components/Strong.jsx
+++ b/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" />
 }
diff --git a/resources/js/Pages/error-handling.jsx b/resources/js/Pages/error-handling.jsx
index e7a3da25..92508fe7 100644
--- a/resources/js/Pages/error-handling.jsx
+++ b/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"
diff --git a/tailwind.config.js b/tailwind.config.js
index 1b11b722..3f2ea605 100644
--- a/tailwind.config.js
+++ b/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',