Auto dark mode

client/src/App.tsx

@@ -33,7 +33,7 @@ function App() {
   };
 
   return (
-    <div className="bg-nord-6 text-nord-0 min-h-screen">
+    <div className="bg-nord-6 dark:bg-nord-0 text-nord-0 dark:text-nord-6  min-h-screen">
       <Header />
       <main className="container mx-auto pb-5">
         <article className="text-xl leading-relaxed max-w-prose space-y-2 mx-auto pb-5 px-2">

client/src/ImageInput.tsx

@@ -39,7 +39,26 @@ function ImageInput({ onImageSubmit }: Props) {
           type="file"
           accept="image/png, image/jpeg"
           ref={fileInputRef}
-          className="block w-full mt-1 text-sm text-nord-0 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-nord-4 file:text-nord-0 hover:file:bg-nord-5"
+          className={
+            "block " +
+            "w-full " +
+            "mt-1 " +
+            "text-sm " +
+            "text-nord-0 " +
+            "dark:text-nord-5 " +
+            "file:mr-4 " +
+            "file:py-2 " +
+            "file:px-4 " +
+            "file:border-0 " +
+            "file:text-sm " +
+            "file:font-semibold " +
+            "file:bg-nord-4 " +
+            "dark:file:bg-nord-1 " +
+            "file:text-nord-0 " +
+            "dark:file:text-nord-5 " +
+            "hover:file:bg-nord-5 " +
+            "dark:hover:file:bg-nord-2"
+          }
         />
       </label>
       <label>
@@ -50,7 +69,21 @@ function ImageInput({ onImageSubmit }: Props) {
       <button
         type="submit"
         value="Go"
-        className="block w-32 mx-auto mt-1 py-2 px-4 text-sm text-nord-0 bg-nord-4 hover:bg-nord-5"
+        className={
+          "block " +
+          "w-32 " +
+          "mx-auto " +
+          "mt-1 " +
+          "py-2 " +
+          "px-4 " +
+          "text-sm " +
+          "text-nord-0 " +
+          "dark:text-nord-5 " +
+          "bg-nord-4 " +
+          "dark:bg-nord-1 " +
+          "hover:bg-nord-5 " +
+          "dark:hover:bg-nord-2"
+        }
       >
         Go
       </button>

client/src/ImageOutput.tsx

@@ -29,7 +29,22 @@ function ImageOutput({ imageData }: OutputProps) {
       />
       <button
         onClick={handleClick}
-        className="block w-48 mx-auto mt-1 py-2 px-4 text-sm text-center text-nord-0 bg-nord-4 hover:bg-nord-5"
+        className={
+          "block " +
+          "w-48 " +
+          "mx-auto " +
+          "mt-1 " +
+          "py-2 " +
+          "px-4 " +
+          "text-sm " +
+          "text-center " +
+          "text-nord-0 " +
+          "dark:text-nord-5 " +
+          "bg-nord-4 " +
+          "dark:bg-nord-1 " +
+          "hover:bg-nord-5 " +
+          "dark:hover:bg-nord-2"
+        }
       >
         Download
       </button>
@@ -37,7 +52,22 @@ function ImageOutput({ imageData }: OutputProps) {
         href={imageUrl}
         target="_blank"
         rel="noopener noreferrer"
-        className="block w-48 mx-auto mt-1 py-2 px-4 text-sm text-center text-nord-0 bg-nord-4 hover:bg-nord-5"
+        className={
+          "block " +
+          "w-48 " +
+          "mx-auto " +
+          "mt-1 " +
+          "py-2 " +
+          "px-4 " +
+          "text-sm " +
+          "text-center " +
+          "text-nord-0 " +
+          "dark:text-nord-5 " +
+          "bg-nord-4 " +
+          "dark:bg-nord-1 " +
+          "hover:bg-nord-5 " +
+          "dark:hover:bg-nord-2"
+        }
       >
         Open in new tab
       </a>

client/src/PalettePreview.tsx

@@ -26,7 +26,7 @@ function PalettePreview({ palette }: PalettePreviewProps) {
 
   return (
     <div
-      className="h-5 my-2 border-solid border-2 border-nord-0"
+      className="h-5 my-2 border-solid border-2 border-nord-0 dark:border-nord-5"
       style={{ background: gradientString }}
     ></div>
   );

client/src/PaletteSelect.tsx

@@ -24,7 +24,16 @@ function PaletteSelect({ value, onChange }: PaletteSelectProps) {
     <select
       value={valueIndex}
       onChange={handlePaletteChange}
-      className="form-select block w-full mt-1"
+      className={
+        "form-select " +
+        "dark:text-nord-5 " +
+        "dark:bg-nord-1 " +
+        "focus:ring-nord-7 " +
+        "focus:border-nord-7 " +
+        "block " +
+        "w-full " +
+        "mt-1"
+      }
     >
       {paletteOptions}
     </select>