add support for dark mode (#749)

huggingface · Sep 2, 2024 · 6b3374b · 6b3374b
1 parent 22b3c6b
commit 6b3374b
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 146 deletions.
diff --git a/src/autotrain/app/static/scripts/listeners.js b/src/autotrain/app/static/scripts/listeners.js
@@ -18,7 +18,7 @@ document.addEventListener('DOMContentLoaded', function () {
             params[key] = el.value;
         });
         paramsTextarea.value = JSON.stringify(params, null, 2);
-        paramsTextarea.className = 'p-2.5 w-full text-sm text-gray-600 border-white border-transparent focus:border-transparent focus:ring-0'
+        //paramsTextarea.className = 'p-2.5 w-full text-sm text-gray-600 border-white border-transparent focus:border-transparent focus:ring-0'
         paramsTextarea.style.height = '600px';
     };
     const observeParamChanges = () => {
@@ -75,33 +75,33 @@ document.addEventListener('DOMContentLoaded', function () {
         switch (config.type) {
             case 'number':
                 element = `<div>
-                    <label for="param_${param}" class="text-sm font-medium text-gray-700">${config.label}</label>
+                    <label for="param_${param}" class="text-sm font-medium text-gray-700 dark:text-gray-300">${config.label}</label>
                     <input type="number" name="param_${param}" id="param_${param}" value="${config.default}"
-                        class="mt-1 p-1 text-xs font-medium w-full border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                        class="mt-1 p-1 text-xs font-medium w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                 </div>`;
                 break;
             case 'dropdown':
                 let options = config.options.map(option => `<option value="${option}" ${option === config.default ? 'selected' : ''}>${option}</option>`).join('');
                 element = `<div>
-                    <label for="param_${param}" class="text-sm font-medium text-gray-700">${config.label}</label>
+                    <label for="param_${param}" class="text-sm font-medium text-gray-700 dark:text-gray-300">${config.label}</label>
                     <select name="param_${param}" id="param_${param}"
-                        class="mt-1 p-1 text-xs font-medium w-full border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                        class="mt-1 p-1 text-xs font-medium w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                         ${options}
                     </select>
                 </div>`;
                 break;
             case 'checkbox':
                 element = `<div>
-                    <label for="param_${param}" class="text-sm font-medium text-gray-700">${config.label}</label>
+                    <label for="param_${param}" class="text-sm font-medium text-gray-700 dark:text-gray-300">${config.label}</label>
                     <input type="checkbox" name="param_${param}" id="param_${param}" ${config.default ? 'checked' : ''}
-                        class="mt-1 text-xs font-medium border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                        class="mt-1 text-xs font-medium border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                 </div>`;
                 break;
             case 'string':
                 element = `<div>
-                    <label for="param_${param}" class="text-sm font-medium text-gray-700">${config.label}</label>
+                    <label for="param_${param}" class="text-sm font-medium text-gray-700 dark:text-gray-300">${config.label}</label>
                     <input type="text" name="param_${param}" id="param_${param}" value="${config.default}"
-                        class="mt-1 p-1 text-xs font-medium w-full border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
+                        class="mt-1 p-1 text-xs font-medium w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
                 </div>`;
                 break;
         }

diff --git a/src/autotrain/app/templates/duplicate.html b/src/autotrain/app/templates/duplicate.html
@@ -1,22 +1,30 @@
 <!doctype html>
-<html>
+<html class="dark">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        // Toggle dark mode based on user's system preference
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    </script>
 </head>
 
-<body>
-    <header class="bg-white-800 text-white p-4">
+<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    <header class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-4">
         <div class="container mx-auto flex justify-between items-center">
-            <img src="/static/logo.png" alt="AutoTrain" , class="w-32">
+            <img src="/static/logo.png" alt="AutoTrain" class="w-32">
         </div>
     </header>
 
-    <div class="form-container max-w-lg mx-auto mt-10 p-6 shadow-2xl">
+    <div class="form-container max-w-lg mx-auto mt-10 p-6 shadow-2xl bg-white dark:bg-gray-800">
         <h1 class="text-2xl font-bold mb-10">Error</h1>
-        <p class="text-red-500 text-lg mb-10">Please <a class="text-gray-500"
+        <p class="text-red-500 text-lg mb-10">Please <a class="text-gray-500 dark:text-gray-400"
                 href="https://huggingface.co/spaces/autotrain-projects/autotrain-advanced?duplicate=true"
                 target="_blank">DUPLICATE</a>
             this space in order to use it</p>

diff --git a/src/autotrain/app/templates/error.html b/src/autotrain/app/templates/error.html
@@ -1,22 +1,31 @@
 <!doctype html>
-<html>
+<html class="dark">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    // Toggle dark mode based on user's system preference
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  </script>
 </head>
 
-<body>
-  <header class="bg-white-800 text-white p-4">
+<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+  <header class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-4 shadow-md">
     <div class="container mx-auto flex justify-between items-center">
-      <img src="/static/logo.png" alt="AutoTrain" , class="w-32">
+      <img src="/static/logo.png" alt="AutoTrain" class="w-32">
     </div>
   </header>
 
-  <div class="form-container max-w-lg mx-auto mt-10 p-6 shadow-2xl">
-    <h1 class="text-2xl font-bold mb-10">Error</h1>
-    <p class="text-red-500 text-lg mb-10">HF_TOKEN environment variable is not set.</p>
+  <div class="form-container max-w-lg mx-auto mt-10 p-6 shadow-2xl bg-white dark:bg-gray-800 rounded-lg">
+    <h1 class="text-3xl font-bold mb-6">Error</h1>
+    <p class="text-red-500 text-lg mb-6">HF_TOKEN environment variable is not set.</p>
+    <a href="/" class="text-blue-500 dark:text-blue-400 hover:underline">Go back to Home</a>
   </div>
 </body>