fix: using little off white color as background

Author: technikhil314

components/navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="fixed top-0 left-0 right-0 bg-white shadow-lg z-100">
+  <header class="fixed top-0 left-0 right-0 shadow-lg bg-gray-50 z-100">
     <div class="container flex items-center h-full py-4 m-auto">
       <div v-if="showBackButton" class="mr-4">
         <NuxtLink to="/">

pages/index.vue

@@ -12,11 +12,11 @@
         <div class="flex flex-wrap w-full h-full gap-4">
           <textarea
             id="lhs"
-            class="flex-1 h-full max-h-full rounded-md resize-none  form-textarea"
+            class="flex-1 h-full max-h-full bg-transparent rounded-md resize-none  form-textarea"
           ></textarea>
           <textarea
             id="rhs"
-            class="flex-1 h-full max-h-full rounded-md resize-none  form-textarea"
+            class="flex-1 h-full max-h-full bg-transparent rounded-md resize-none  form-textarea"
           ></textarea>
           <div class="self-end w-full text-center">
             <button

styles/global.scss

@@ -6,6 +6,7 @@ body,
 .page-root,
 main {
   @apply h-full;
+  @apply bg-gray-50;
 }
 
 body {

tailwind.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   mode: 'jit',
+  darkMode: 'class',
   theme: {
     maxHeight: {
       'screen--nav': 'calc(100vh - 7rem)',