add ugly dark theme

static/404.html

@@ -105,6 +105,16 @@
                         </svg>
                         <span class="mx-3 font-medium">Visit Main Website</span>
                     </a>
+
+                    <button class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        onclick="change_theme()">
+                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
+                                fill="currentColor"></path>
+                        </svg>
+                        <span id='theme-span' class="mx-3 font-medium">Set Light Theme</span>
+                    </button>
                 </div>
             </nav>
         </div>
@@ -138,7 +148,7 @@
                                 </style>
 
                                 <input id="search" x-model="search" type="text"
-                                    class="w-64 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    class="w-44 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
                                     placeholder="Find anything...">
                             </div>
 
@@ -194,15 +204,15 @@
                                 <img class="flex-shrink-0 object-cover w-8 h-8 rounded-full" src="images/github-mark.svg" alt="github-mark">
                             </button>
                 
-                            <div class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
-                                <a target="_blank" href="https://github.com/Djacon/text2feature" class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform hover:bg-gray-100">
+                            <a href="https://github.com/Djacon/text2feature" target="_blank" class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0 hover:bg-gray-100" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
+                                <div class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform">
                                     <img class="flex-shrink-0 object-cover mx-1 rounded-full w-9 h-9" src="images/github-mark.svg" alt="github-mark">
                                     <div class="mx-1">
                                         <h1 class="text-sm font-semibold text-gray-700">Made By Djacon</h1>
                                         <p class="text-sm text-gray-500">github.com/Djacon</p>
                                     </div>
-                                </a>
-                            </div>
+                                </div>
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -249,6 +259,29 @@
             </main>
         </div>
     </div>
-</body>
 
+    <script>
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            localStorage.theme = 'dark';
+            document.documentElement.classList.add('dark');
+            document.getElementById('theme-span').innerText = 'Set Light Theme';
+        } else {
+            localStorage.theme = 'light';
+            document.documentElement.classList.remove('dark');
+            document.getElementById('theme-span').innerText = 'Set Dark Theme';
+        }
+
+        function change_theme() {
+            if (localStorage.theme === 'dark') {
+                localStorage.theme = 'light';
+                document.documentElement.classList.remove('dark');
+                document.getElementById('theme-span').innerText = 'Set Dark Theme';
+            } else {
+                localStorage.theme = 'dark';
+                document.documentElement.classList.add('dark');
+                document.getElementById('theme-span').innerText = 'Set Light Theme';
+            }
+        }
+    </script>
+</body>
 </html>

static/css/main.css

@@ -797,6 +797,10 @@ select {
     width: 8rem
 }
 
+.w-44 {
+    width: 11rem
+}
+
 .w-6 {
     width: 1.5rem
 }
@@ -2390,3 +2394,16 @@ select {
         max-width: 42rem
     }
 }
+
+
+/* .dark-bg {
+    background-color: #1a1a1a;
+}
+
+.dark-nav {
+    background-color: #282828;
+} */
+
+.dark {
+    filter: invert(90%);
+}

static/emotion_detection.html

@@ -104,6 +104,16 @@
                         </svg>
                         <span class="mx-3 font-medium">Visit Main Website</span>
                     </a>
+
+                    <button class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        onclick="change_theme()">
+                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
+                                fill="currentColor"></path>
+                        </svg>
+                        <span id='theme-span' class="mx-3 font-medium">Set Light Theme</span>
+                    </button>
                 </div>
             </nav>
         </div>
@@ -137,7 +147,7 @@
                                 </style>
 
                                 <input id="search" x-model="search" type="text"
-                                    class="w-64 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    class="w-44 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
                                     placeholder="Find anything...">
                             </div>
 
@@ -193,15 +203,15 @@
                                 <img class="flex-shrink-0 object-cover w-8 h-8 rounded-full" src="images/github-mark.svg" alt="github-mark">
                             </button>
                 
-                            <div class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
-                                <a target="_blank" href="https://github.com/Djacon/text2feature" class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform hover:bg-gray-100">
+                            <a href="https://github.com/Djacon/text2feature" target="_blank" class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0 hover:bg-gray-100" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
+                                <div class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform">
                                     <img class="flex-shrink-0 object-cover mx-1 rounded-full w-9 h-9" src="images/github-mark.svg" alt="github-mark">
                                     <div class="mx-1">
                                         <h1 class="text-sm font-semibold text-gray-700">Made By Djacon</h1>
                                         <p class="text-sm text-gray-500">github.com/Djacon</p>
                                     </div>
-                                </a>
-                            </div>
+                                </div>
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -291,21 +301,26 @@
 
                         <div class="w-full p-4 mt-8 bg-white rounded-lg xl:p-6">
                             <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Result</h1>
-
+                            <style>
+                                textarea.disabled {
+                                    background-color: transparent;
+                                    pointer-events: none;
+                                }
+                            </style>
                             <div class="md:flex gap-8">
                                 <div class="w-full md:w-1/2 grid-cols-2 mt-6">
                                     <label for="description"
                                         class="block text-sm text-gray-700 capitalize">Extracted Text</label>
-                                    <textarea disabled id="extracted-text"
-                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    <textarea id="extracted-text"
+                                        class="disabled minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
                                         style="min-height: 250px;"></textarea>
                                 </div>
 
                                 <div class="w-full md:w-1/2 grid-cols-2 mt-6">
                                     <label for="description"
                                         class="block text-sm text-gray-700 capitalize">Emotion Prediction</label>
-                                    <textarea disabled id="summarized-text"
-                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    <textarea id="summarized-text"
+                                        class="disabled minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
                                         style="min-height: 250px;"></textarea>
                                 </div>
                             </div>
@@ -316,6 +331,30 @@
         </div>
     </div>
 
+    <script>
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            localStorage.theme = 'dark';
+            document.documentElement.classList.add('dark');
+            document.getElementById('theme-span').innerText = 'Set Light Theme';
+        } else {
+            localStorage.theme = 'light';
+            document.documentElement.classList.remove('dark');
+            document.getElementById('theme-span').innerText = 'Set Dark Theme';
+        }
+
+        function change_theme() {
+            if (localStorage.theme === 'dark') {
+                localStorage.theme = 'light';
+                document.documentElement.classList.remove('dark');
+                document.getElementById('theme-span').innerText = 'Set Dark Theme';
+            } else {
+                localStorage.theme = 'dark';
+                document.documentElement.classList.add('dark');
+                document.getElementById('theme-span').innerText = 'Set Light Theme';
+            }
+        }
+    </script>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
     <script src="js/detection.js"></script>
 </body>

static/index.html

@@ -104,6 +104,16 @@
                         </svg>
                         <span class="mx-3 font-medium">Visit Main Website</span>
                     </a>
+
+                    <button class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        onclick="change_theme()">
+                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
+                                fill="currentColor"></path>
+                        </svg>
+                        <span id='theme-span' class="mx-3 font-medium">Set Light Theme</span>
+                    </button>
                 </div>
             </nav>
         </div>
@@ -137,7 +147,7 @@
                                 </style>
 
                                 <input id="search" x-model="search" type="text"
-                                    class="w-64 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    class="w-44 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
                                     placeholder="Find anything...">
                             </div>
 
@@ -193,15 +203,15 @@
                                 <img class="flex-shrink-0 object-cover w-8 h-8 rounded-full" src="images/github-mark.svg" alt="github-mark">
                             </button>
                 
-                            <div class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
-                                <a target="_blank" href="https://github.com/Djacon/text2feature" class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform hover:bg-gray-100">
+                            <a href="https://github.com/Djacon/text2feature" target="_blank" class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0 hover:bg-gray-100" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
+                                <div class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform">
                                     <img class="flex-shrink-0 object-cover mx-1 rounded-full w-9 h-9" src="images/github-mark.svg" alt="github-mark">
                                     <div class="mx-1">
                                         <h1 class="text-sm font-semibold text-gray-700">Made By Djacon</h1>
                                         <p class="text-sm text-gray-500">github.com/Djacon</p>
                                     </div>
-                                </a>
-                            </div>
+                                </div>
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -782,6 +792,30 @@
             </main>
         </div>
     </div>
+
+    <script>
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            localStorage.theme = 'dark';
+            document.documentElement.classList.add('dark');
+            document.getElementById('theme-span').innerText = 'Set Light Theme';
+        } else {
+            localStorage.theme = 'light';
+            document.documentElement.classList.remove('dark');
+            document.getElementById('theme-span').innerText = 'Set Dark Theme';
+        }
+
+        function change_theme() {
+            if (localStorage.theme === 'dark') {
+                localStorage.theme = 'light';
+                document.documentElement.classList.remove('dark');
+                document.getElementById('theme-span').innerText = 'Set Dark Theme';
+            } else {
+                localStorage.theme = 'dark';
+                document.documentElement.classList.add('dark');
+                document.getElementById('theme-span').innerText = 'Set Light Theme';
+            }
+        }
+    </script>
 </body>
 
 </html>

static/js/detection.js

@@ -30,7 +30,6 @@ function _summarize() {
     xhr.onreadystatechange = function () {
         if (xhr.readyState === 4 && xhr.status === 200) {
             result = xhr.responseText.split("\\n").join("\n");
-            // result = Object.entries(JSON.parse(resp)).sort((a, b) => b[1] - a[1]).map(a => a[0]+': '+a[1]).join('\n');
             summaryText.value = result.slice(1, -1);
         }
     };

static/text_summarizer.html

@@ -104,6 +104,16 @@
                         </svg>
                         <span class="mx-3 font-medium">Visit Main Website</span>
                     </a>
+
+                    <button class="flex items-center px-4 py-2 text-gray-500 transition-colors duration-300 transform rounded-lg hover:text-gray-600 hover:bg-gray-100 bg-opacity-40"
+                        onclick="change_theme()">
+                        <svg class="w-6 h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M13 10V14H19V10H13ZM11 10H5V14H11V10ZM13 19H19V16H13V19ZM11 19V16H5V19H11ZM13 5V8H19V5H13ZM11 5H5V8H11V5ZM19 3C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H19Z"
+                                fill="currentColor"></path>
+                        </svg>
+                        <span id='theme-span' class="mx-3 font-medium">Set Light Theme</span>
+                    </button>
                 </div>
             </nav>
         </div>
@@ -137,7 +147,7 @@
                                 </style>
 
                                 <input id="search" x-model="search" type="text"
-                                    class="w-64 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    class="w-44 h-10 py-2 pl-10 pr-4 text-gray-700 placeholder-gray-400 transition-all duration-150 bg-white border border-gray-200 rounded-md focus:w-80 sm:w-64 sm:focus:w-80 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
                                     placeholder="Find anything...">
                             </div>
 
@@ -193,15 +203,15 @@
                                 <img class="flex-shrink-0 object-cover w-8 h-8 rounded-full" src="images/github-mark.svg" alt="github-mark">
                             </button>
                 
-                            <div class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
-                                <a target="_blank" href="https://github.com/Djacon/text2feature" class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform hover:bg-gray-100">
+                            <a href="https://github.com/Djacon/text2feature" target="_blank" class="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl rtl:right-auto rtl:left-0 hover:bg-gray-100" x-show="dropdownOpen" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" @click.away="dropdownOpen = false" style="display: none;">
+                                <div class="flex items-center p-3 -mt-2 text-sm text-gray-600 transition-colors duration-200 transform">
                                     <img class="flex-shrink-0 object-cover mx-1 rounded-full w-9 h-9" src="images/github-mark.svg" alt="github-mark">
                                     <div class="mx-1">
                                         <h1 class="text-sm font-semibold text-gray-700">Made By Djacon</h1>
                                         <p class="text-sm text-gray-500">github.com/Djacon</p>
                                     </div>
-                                </a>
-                            </div>
+                                </div>
+                            </a>
                         </div>
                     </div>
                 </div>
@@ -293,20 +303,26 @@
                         <div class="w-full p-4 mt-8 bg-white rounded-lg xl:p-6">
                             <h1 class="text-lg font-medium text-gray-700 capitalize sm:text-xl md:text-2xl">Result</h1>
 
+                            <style>
+                                textarea.disabled {
+                                    background-color: transparent;
+                                    pointer-events: none;
+                                }
+                            </style>
                             <div class="md:flex gap-8">
                                 <div class="w-full md:w-1/2 grid-cols-2 mt-6">
                                     <label for="description"
                                         class="block text-sm text-gray-700 capitalize">Extracted Text</label>
-                                    <textarea disabled id="extracted-text"
-                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    <textarea id="extracted-text"
+                                        class="disabled minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
                                         style="min-height: 300px;"></textarea>
                                 </div>
 
                                 <div class="w-full md:w-1/2 grid-cols-2 mt-6">
                                     <label for="description"
                                         class="block text-sm text-gray-700 capitalize">Summarized Text</label>
-                                    <textarea disabled id="summarized-text"
-                                        class="minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
+                                    <textarea id="summarized-text"
+                                        class="disabled minh-text block w-full px-4 py-2.5 mt-2 text-gray-600 placeholder-gray-400 bg-white border border-gray-200 rounded-md focus:border-indigo-400 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-40"
                                         style="min-height: 300px;"></textarea>
                                 </div>
                             </div>
@@ -317,6 +333,30 @@
         </div>
     </div>
 
+    <script>
+        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            localStorage.theme = 'dark';
+            document.documentElement.classList.add('dark');
+            document.getElementById('theme-span').innerText = 'Set Light Theme';
+        } else {
+            localStorage.theme = 'light';
+            document.documentElement.classList.remove('dark');
+            document.getElementById('theme-span').innerText = 'Set Dark Theme';
+        }
+
+        function change_theme() {
+            if (localStorage.theme === 'dark') {
+                localStorage.theme = 'light';
+                document.documentElement.classList.remove('dark');
+                document.getElementById('theme-span').innerText = 'Set Dark Theme';
+            } else {
+                localStorage.theme = 'dark';
+                document.documentElement.classList.add('dark');
+                document.getElementById('theme-span').innerText = 'Set Light Theme';
+            }
+        }
+    </script>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js"></script>
     <script src="js/summarizer.js"></script>
 </body>