Set the text and background colour for dark-mode

maizzle/src/templates/reset-password.html

@@ -1,11 +1,11 @@
 ---
 title: Reset password instructions
 preheader: "Please click the button below and follow the instructions. We'll have you up and running with a new password in no time."
-bodyClass: bg-white
+bodyClass: bg-white dark-mode:bg-black
 ---
 
 <x-main>
-  <div class="font-sans text-lg sm:px-4 text-navy">
+  <div class="font-sans text-lg sm:px-4 text-navy dark-mode:text-white">
     <table align="center">
       <tr>
         <td class="w-[552px] max-w-full">
@@ -63,13 +63,13 @@ <h1 class="m-0 text-4xl font-extrabold text-white xs:text-2xl">Planning Alerts</
           <x-divider space-y="32px" class="bg-slate-200" />
 
           <p>
-            <a href="https://www.planningalerts.org.au" class="no-underline text-navy hover:underline"><strong>Planning Alerts</strong></a>
+            <a href="https://www.planningalerts.org.au" class="no-underline text-navy dark-mode:text-white hover:underline"><strong>Planning Alerts</strong></a>
             is a free service where anyone can find out what is being built and knocked down in their area.
           </p>
           <p>
             The service
             is run by the independent charity
-            <a href="https://www.oaf.org.au/" class="no-underline text-navy hover:underline">OpenAustralia Foundation</a>.
+            <a href="https://www.oaf.org.au/" class="no-underline text-navy dark-mode:text-white hover:underline">OpenAustralia Foundation</a>.
           </p>
 
           <p>

maizzle/tailwind.config.js

@@ -4,6 +4,7 @@ module.exports = {
     screens: {
       sm: {max: '600px'},
       xs: {max: '425px'},
+      "dark-mode": { raw: "(prefers-color-scheme: dark)" }
     },
     extend: {
       colors: {