From 7b708a23ba7c86960342ae964292e94571b3b387 Mon Sep 17 00:00:00 2001
From: X <astinx@hotmail.com>
Date: Fri, 11 Dec 2020 17:15:53 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4dark=E6=A8=A1=E5=BC=8F,vue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TopBar.vue      |   26 +-
 src/utils/request.js           |    1 -
 src/views/Accordion.vue        |   68 +-
 src/views/Alert.vue            |   64 +-
 src/views/App.vue              |   44 +-
 src/views/BlogLayout1.vue      |   30 +-
 src/views/BlogLayout2.vue      |   26 +-
 src/views/BlogLayout3.vue      |   24 +-
 src/views/Button.vue           |  108 +-
 src/views/ChangePassword.vue   |   38 +-
 src/views/Chart.vue            |   24 +-
 src/views/Chat.vue             | 2726 ++++++++++++++++----------------
 src/views/CrudDataList.vue     |   12 +-
 src/views/CrudForm.vue         |   12 +-
 src/views/Dashboard.vue        |   80 +-
 src/views/Datepicker.vue       |   46 +-
 src/views/Dropdown.vue         |  320 ++--
 src/views/ErrorPage.vue        |    2 +-
 src/views/FaqLayout1.vue       |   72 +-
 src/views/FaqLayout2.vue       |   54 +-
 src/views/FaqLayout3.vue       |   58 +-
 src/views/FileManager.vue      |   24 +-
 src/views/FileUpload.vue       |   12 +-
 src/views/ImageZoom.vue        |    4 +-
 src/views/Inbox.vue            |   54 +-
 src/views/Invitation.vue       |   38 +-
 src/views/InvoiceLayout1.vue   |   52 +-
 src/views/InvoiceLayout2.vue   |   52 +-
 src/views/Login.vue            |   12 +-
 src/views/Modal.vue            |   80 +-
 src/views/MyApp.vue            |   44 +-
 src/views/PointOfSale.vue      |   44 +-
 src/views/Post.vue             |   40 +-
 src/views/PricingLayout1.vue   |   40 +-
 src/views/PricingLayout2.vue   |   60 +-
 src/views/Profile.vue          |  220 +--
 src/views/ProfileOverview1.vue |   90 +-
 src/views/ProfileOverview2.vue |  140 +-
 src/views/ProfileOverview3.vue |  220 +--
 src/views/ProgressBar.vue      |   68 +-
 src/views/Register.vue         |   12 +-
 src/views/RegularForm.vue      |  110 +-
 src/views/RegularTable.vue     |  468 +++---
 src/views/Slider.vue           |  136 +-
 src/views/Tabulator.vue        |   24 +-
 src/views/TailSelect.vue       |   20 +-
 src/views/Toast.vue            |    8 +-
 src/views/Tooltip.vue          |   32 +-
 src/views/Typography.vue       |   92 +-
 src/views/UpdateProfile.vue    |   42 +-
 src/views/UsersLayout1.vue     |   24 +-
 src/views/UsersLayout2.vue     |   12 +-
 src/views/UsersLayout3.vue     |   22 +-
 src/views/Validation.vue       |    4 +-
 src/views/WizardLayout1.vue    |    8 +-
 src/views/WizardLayout2.vue    |   20 +-
 src/views/WizardLayout3.vue    |   22 +-
 src/views/WysiwygEditor.vue    |   20 +-
 58 files changed, 3102 insertions(+), 3103 deletions(-)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 061e455..d155fa7 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -18,10 +18,10 @@
           @focus="showSearchDropdown"
           @blur="hideSearchDropdown"
         />
-        <SearchIcon class="search__icon dark:text-gray-300" />
+        <SearchIcon class="search__icon" />
       </div>
       <a class="notification sm:hidden" href>
-        <SearchIcon class="notification__icon dark:text-gray-300" />
+        <SearchIcon class="notification__icon" />
       </a>
       <div class="search-result" :class="{ show: searchDropdown }">
         <div class="search-result__content">
@@ -103,11 +103,11 @@
       <div
         class="dropdown-toggle notification notification--bullet cursor-pointer"
       >
-        <BellIcon class="notification__icon dark:text-gray-300" />
+        <BellIcon class="notification__icon" />
       </div>
       <div class="notification-content pt-2 dropdown-box">
         <div
-          class="notification-content__box dropdown-box__content box dark:bg-dark-6"
+          class="notification-content__box dropdown-box__content box"
         >
           <div class="notification-content__title">Notifications</div>
           <div
@@ -156,44 +156,44 @@
       </div>
       <div class="dropdown-box w-56">
         <div
-          class="dropdown-box__content box bg-theme-38 dark:bg-dark-6 text-white"
+          class="dropdown-box__content box bg-theme-38 text-white"
         >
-          <div class="p-4 border-b border-theme-40 dark:border-dark-3">
+          <div class="p-4 border-b border-theme-40">
             <div class="font-medium">{{ $f()[0].users[0].name }}</div>
-            <div class="text-xs text-theme-41 dark:text-gray-600">
+            <div class="text-xs text-theme-41">
               {{ $f()[0].jobs[0] }}
             </div>
           </div>
           <div class="p-2">
             <a
               href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 dark:hover:bg-dark-3 rounded-md"
+              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
             >
               <UserIcon class="w-4 h-4 mr-2" /> Profile
             </a>
             <a
               href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 dark:hover:bg-dark-3 rounded-md"
+              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
             >
               <EditIcon class="w-4 h-4 mr-2" /> Add Account
             </a>
             <a
               href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 dark:hover:bg-dark-3 rounded-md"
+              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
             >
               <LockIcon class="w-4 h-4 mr-2" /> errerrrReset Password
             </a>
             <a
               href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 dark:hover:bg-dark-3 rounded-md"
+              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
             >
               <HelpCircleIcon class="w-4 h-4 mr-2" /> Help
             </a>
           </div>
-          <div class="p-2 border-t border-theme-40 dark:border-dark-3">
+          <div class="p-2 border-t border-theme-40">
             <a
               href
-              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1 dark:hover:bg-dark-3 rounded-md"
+              class="flex items-center block p-2 transition duration-300 ease-in-out hover:bg-theme-1:bg-dark-3 rounded-md"
             >
               <ToggleRightIcon class="w-4 h-4 mr-2" />
               Logout
diff --git a/src/utils/request.js b/src/utils/request.js
index 071a706..436dfb1 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -19,7 +19,6 @@ service.interceptors.request.use(
 	}
 )
 
-
 // response interceptor
 service.interceptors.response.use(
 	response => {
diff --git a/src/views/Accordion.vue b/src/views/Accordion.vue
index 0447726..d1e9c93 100644
--- a/src/views/Accordion.vue
+++ b/src/views/Accordion.vue
@@ -8,7 +8,7 @@
       <div class="col-span-12 lg:col-span-6">
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Basic Accordion</h2>
             <div
@@ -26,7 +26,7 @@
             <div class="preview">
               <div class="accordion">
                 <div
-                  class="accordion__pane active border-b border-gray-200 dark:border-dark-5 pb-4"
+                  class="accordion__pane active border-b border-gray-200 pb-4"
                 >
                   <a
                     href="javascript:;"
@@ -35,7 +35,7 @@
                     Keys</a
                   >
                   <div
-                    class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                    class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                   >
                     Lorem Ipsum is simply dummy text of the printing and
                     typesetting industry. Lorem Ipsum has been the industry's
@@ -47,7 +47,7 @@
                   </div>
                 </div>
                 <div
-                  class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+                  class="accordion__pane border-b border-gray-200 py-4"
                 >
                   <a
                     href="javascript:;"
@@ -55,7 +55,7 @@
                     >Understanding IP Addresses, Subnets, and CIDR Notation</a
                   >
                   <div
-                    class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                    class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                   >
                     Lorem Ipsum is simply dummy text of the printing and
                     typesetting industry. Lorem Ipsum has been the industry's
@@ -67,7 +67,7 @@
                   </div>
                 </div>
                 <div
-                  class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+                  class="accordion__pane border-b border-gray-200 py-4"
                 >
                   <a
                     href="javascript:;"
@@ -75,7 +75,7 @@
                     >How To Troubleshoot Common HTTP Error Codes</a
                   >
                   <div
-                    class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                    class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                   >
                     Lorem Ipsum is simply dummy text of the printing and
                     typesetting industry. Lorem Ipsum has been the industry's
@@ -93,7 +93,7 @@
                     >An Introduction to Securing your Linux VPS</a
                   >
                   <div
-                    class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                    class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                   >
                     Lorem Ipsum is simply dummy text of the printing and
                     typesetting industry. Lorem Ipsum has been the industry's
@@ -109,7 +109,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-basic-accordion"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -121,7 +121,7 @@
                     <textarea>
                       <div class="accordion">
                         <div
-                          class="accordion__pane active border-b border-gray-200 dark:border-dark-5 pb-4"
+                          class="accordion__pane active border-b border-gray-200 pb-4"
                         >
                           <a
                             href="javascript:;"
@@ -130,7 +130,7 @@
                             Private Keys</a
                           >
                           <div
-                            class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                            class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                           >
                             Lorem Ipsum is simply dummy text of the printing and
                             typesetting industry. Lorem Ipsum has been the
@@ -143,7 +143,7 @@
                           </div>
                         </div>
                         <div
-                          class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+                          class="accordion__pane border-b border-gray-200 py-4"
                         >
                           <a
                             href="javascript:;"
@@ -152,7 +152,7 @@
                             Notation</a
                           >
                           <div
-                            class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                            class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                           >
                             Lorem Ipsum is simply dummy text of the printing and
                             typesetting industry. Lorem Ipsum has been the
@@ -165,7 +165,7 @@
                           </div>
                         </div>
                         <div
-                          class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+                          class="accordion__pane border-b border-gray-200 py-4"
                         >
                           <a
                             href="javascript:;"
@@ -173,7 +173,7 @@
                             >How To Troubleshoot Common HTTP Error Codes</a
                           >
                           <div
-                            class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                            class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                           >
                             Lorem Ipsum is simply dummy text of the printing and
                             typesetting industry. Lorem Ipsum has been the
@@ -192,7 +192,7 @@
                             >An Introduction to Securing your Linux VPS</a
                           >
                           <div
-                            class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                            class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                           >
                             Lorem Ipsum is simply dummy text of the printing and
                             typesetting industry. Lorem Ipsum has been the
@@ -218,7 +218,7 @@
       <div class="col-span-12 lg:col-span-6">
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Boxed Accordion</h2>
             <div
@@ -236,7 +236,7 @@
             <div class="preview">
               <div class="accordion">
                 <div
-                  class="accordion__pane active border border-gray-200 dark:border-dark-5 p-4"
+                  class="accordion__pane active border border-gray-200 p-4"
                 >
                   <a
                     href="javascript:;"
@@ -245,7 +245,7 @@
                     Keys</a
                   >
                   <div
-                    class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                    class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                   >
                     Lorem Ipsum is simply dummy text of the printing and
                     typesetting industry. Lorem Ipsum has been the industry's
@@ -257,7 +257,7 @@
                   </div>
                 </div>
                 <div
-                  class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+                  class="accordion__pane border border-gray-200 p-4 mt-3"
                 >
                   <a
                     href="javascript:;"
@@ -265,7 +265,7 @@
                     >Understanding IP Addresses, Subnets, and CIDR Notation</a
                   >
                   <div
-                    class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                    class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                   >
                     Lorem Ipsum is simply dummy text of the printing and
                     typesetting industry. Lorem Ipsum has been the industry's
@@ -277,7 +277,7 @@
                   </div>
                 </div>
                 <div
-                  class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+                  class="accordion__pane border border-gray-200 p-4 mt-3"
                 >
                   <a
                     href="javascript:;"
@@ -285,7 +285,7 @@
                     >How To Troubleshoot Common HTTP Error Codes</a
                   >
                   <div
-                    class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                    class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                   >
                     Lorem Ipsum is simply dummy text of the printing and
                     typesetting industry. Lorem Ipsum has been the industry's
@@ -297,7 +297,7 @@
                   </div>
                 </div>
                 <div
-                  class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+                  class="accordion__pane border border-gray-200 p-4 mt-3"
                 >
                   <a
                     href="javascript:;"
@@ -305,7 +305,7 @@
                     >An Introduction to Securing your Linux VPS</a
                   >
                   <div
-                    class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                    class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                   >
                     Lorem Ipsum is simply dummy text of the printing and
                     typesetting industry. Lorem Ipsum has been the industry's
@@ -321,7 +321,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-boxed-accordion"
-                class="copy-code button button--sm border border-gray-200 dark:border-dark-5 flex items-center text-gray-700"
+                class="copy-code button button--sm border border-gray-200 flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -333,7 +333,7 @@
                     <textarea>
                       <div class="accordion">
                         <div
-                          class="accordion__pane active border border-gray-200 dark:border-dark-5 p-4"
+                          class="accordion__pane active border border-gray-200 p-4"
                         >
                           <a
                             href="javascript:;"
@@ -342,7 +342,7 @@
                             Private Keys</a
                           >
                           <div
-                            class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                            class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                           >
                             Lorem Ipsum is simply dummy text of the printing and
                             typesetting industry. Lorem Ipsum has been the
@@ -355,7 +355,7 @@
                           </div>
                         </div>
                         <div
-                          class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+                          class="accordion__pane border border-gray-200 p-4 mt-3"
                         >
                           <a
                             href="javascript:;"
@@ -364,7 +364,7 @@
                             Notation</a
                           >
                           <div
-                            class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                            class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                           >
                             Lorem Ipsum is simply dummy text of the printing and
                             typesetting industry. Lorem Ipsum has been the
@@ -377,7 +377,7 @@
                           </div>
                         </div>
                         <div
-                          class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+                          class="accordion__pane border border-gray-200 p-4 mt-3"
                         >
                           <a
                             href="javascript:;"
@@ -385,7 +385,7 @@
                             >How To Troubleshoot Common HTTP Error Codes</a
                           >
                           <div
-                            class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                            class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                           >
                             Lorem Ipsum is simply dummy text of the printing and
                             typesetting industry. Lorem Ipsum has been the
@@ -398,7 +398,7 @@
                           </div>
                         </div>
                         <div
-                          class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+                          class="accordion__pane border border-gray-200 p-4 mt-3"
                         >
                           <a
                             href="javascript:;"
@@ -406,7 +406,7 @@
                             >An Introduction to Securing your Linux VPS</a
                           >
                           <div
-                            class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                            class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
                           >
                             Lorem Ipsum is simply dummy text of the printing and
                             typesetting industry. Lorem Ipsum has been the
diff --git a/src/views/Alert.vue b/src/views/Alert.vue
index d1d99e2..3fa7e7b 100644
--- a/src/views/Alert.vue
+++ b/src/views/Alert.vue
@@ -8,7 +8,7 @@
       <div class="col-span-12 lg:col-span-6">
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Basic Alerts</h2>
             <div
@@ -28,7 +28,7 @@
                 Awesome simple alert
               </div>
               <div
-                class="rounded-md px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                class="rounded-md px-5 py-4 mb-2 border text-gray-700"
               >
                 Awesome simple alert
               </div>
@@ -48,7 +48,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-basic-alert"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -64,7 +64,7 @@
                         Awesome simple alert
                       </div>
                       <div
-                        class="rounded-md px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                        class="rounded-md px-5 py-4 mb-2 border text-gray-700"
                       >
                         Awesome simple alert
                       </div>
@@ -97,7 +97,7 @@
         </div>
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Icon Alerts</h2>
             <div
@@ -119,7 +119,7 @@
                 <AlertCircleIcon class="w-6 h-6 mr-2" /> Awesome alert with icon
               </div>
               <div
-                class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700"
               >
                 <AlertOctagonIcon class="w-6 h-6 mr-2" />
                 Awesome alert with icon
@@ -151,7 +151,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-icon-alert"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -168,7 +168,7 @@
                         Awesome alert with icon
                       </div>
                       <div
-                        class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                        class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700"
                       >
                         <AlertOctagonIcon class="w-6 h-6 mr-2" />
                         Awesome alert with icon
@@ -206,7 +206,7 @@
         </div>
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Additional Content Alerts
@@ -242,7 +242,7 @@
                 </div>
               </div>
               <div
-                class="rounded-md px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                class="rounded-md px-5 py-4 mb-2 border text-gray-700"
               >
                 <div class="flex items-center">
                   <div class="font-medium text-lg">
@@ -332,7 +332,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-additional-content-alert"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -365,7 +365,7 @@
                         </div>
                       </div>
                       <div
-                        class="rounded-md px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                        class="rounded-md px-5 py-4 mb-2 border text-gray-700"
                       >
                         <div class="flex items-center">
                           <div class="font-medium text-lg">
@@ -472,7 +472,7 @@
       <div class="col-span-12 lg:col-span-6">
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Icon & Dismiss Alerts</h2>
             <div
@@ -495,7 +495,7 @@
                 <xIcon class="w-4 h-4 ml-auto" />
               </div>
               <div
-                class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700"
               >
                 <AlertOctagonIcon class="w-6 h-6 mr-2" />
                 Awesome alert with icon
@@ -532,7 +532,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-icon-dismiss-alert"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -550,7 +550,7 @@
                         <xIcon class="w-4 h-4 ml-auto" />
                       </div>
                       <div
-                        class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                        class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700"
                       >
                         <AlertOctagonIcon class="w-6 h-6 mr-2" />
                         Awesome alert with icon
@@ -593,7 +593,7 @@
         </div>
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Outline Alerts</h2>
             <div
@@ -610,33 +610,33 @@
           <div id="outline-alert" class="p-5">
             <div class="preview">
               <div
-                class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-1 text-theme-1 dark:text-theme-10 dark:border-theme-10"
+                class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-1 text-theme-1"
               >
                 <AlertCircleIcon class="w-6 h-6 mr-2" />
                 alert with icon <xIcon class="w-4 h-4 ml-auto" />
               </div>
               <div
-                class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700"
               >
                 <AlertOctagonIcon class="w-6 h-6 mr-2" />
                 Awesome alert with icon
                 <xIcon class="w-4 h-4 ml-auto" />
               </div>
               <div
-                class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-9 text-theme-9 dark:border-theme-9"
+                class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-9 text-theme-9"
               >
                 <AlertTriangleIcon class="w-6 h-6 mr-2" />
                 Awesome alert with icon
                 <xIcon class="w-4 h-4 ml-auto" />
               </div>
               <div
-                class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-12 text-theme-12 dark:border-theme-12"
+                class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-12 text-theme-12"
               >
                 <AlertCircleIcon class="w-6 h-6 mr-2" />
                 alert with icon <xIcon class="w-4 h-4 ml-auto" />
               </div>
               <div
-                class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-6 text-theme-6 dark:border-theme-6"
+                class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-6 text-theme-6"
               >
                 <AlertOctagonIcon class="w-6 h-6 mr-2" />
                 Awesome alert with icon
@@ -646,7 +646,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-outline-alert"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -657,35 +657,35 @@
                   >
                     <textarea>
                       <div
-                        class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-1 text-theme-1 dark:text-theme-10 dark:border-theme-10"
+                        class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-1 text-theme-1"
                       >
                         <AlertCircleIcon class="w-6 h-6 mr-2" />
                         Awesome alert with icon
                         <xIcon class="w-4 h-4 ml-auto" />
                       </div>
                       <div
-                        class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                        class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700"
                       >
                         <AlertOctagonIcon class="w-6 h-6 mr-2" />
                         Awesome alert with icon
                         <xIcon class="w-4 h-4 ml-auto" />
                       </div>
                       <div
-                        class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-9 text-theme-9 dark:border-theme-9"
+                        class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-9 text-theme-9"
                       >
                         <AlertTriangleIcon class="w-6 h-6 mr-2" />
                         Awesome alert with icon
                         <xIcon class="w-4 h-4 ml-auto" />
                       </div>
                       <div
-                        class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-12 text-theme-12 dark:border-theme-12"
+                        class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-12 text-theme-12"
                       >
                         <AlertCircleIcon class="w-6 h-6 mr-2" />
                         Awesome alert with icon
                         <xIcon class="w-4 h-4 ml-auto" />
                       </div>
                       <div
-                        class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-6 text-theme-6 dark:border-theme-6"
+                        class="rounded-md flex items-center px-5 py-4 mb-2 border border-theme-6 text-theme-6"
                       >
                         <AlertOctagonIcon class="w-6 h-6 mr-2" />
                         Awesome alert with icon
@@ -700,7 +700,7 @@
         </div>
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Soft Color Alerts</h2>
             <div
@@ -722,7 +722,7 @@
                 <AlertCircleIcon class="w-6 h-6 mr-2" /> Awesome alert with icon
               </div>
               <div
-                class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700"
               >
                 <AlertOctagonIcon class="w-6 h-6 mr-2" />
                 Awesome alert with icon
@@ -754,7 +754,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-softcolor-alert"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -771,7 +771,7 @@
                         Awesome alert with icon
                       </div>
                       <div
-                        class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700 dark:text-gray-300 dark:border-dark-5"
+                        class="rounded-md flex items-center px-5 py-4 mb-2 border text-gray-700"
                       >
                         <AlertOctagonIcon class="w-6 h-6 mr-2" />
                         Awesome alert with icon
diff --git a/src/views/App.vue b/src/views/App.vue
index 3b3d54d..7872a45 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -12,17 +12,17 @@
         >
         <div class="pos-dropdown dropdown ml-auto sm:ml-0">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <ChevronDownIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="pos-dropdown__dropdown-box dropdown-box">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate"
@@ -31,7 +31,7 @@
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate"
@@ -40,7 +40,7 @@
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate"
@@ -56,7 +56,7 @@
       <!-- BEGIN: Item List -->
       <div class="intro-y col-span-12 lg:col-span-8">
         <div class="lg:flex intro-y">
-          <div class="relative text-gray-700 dark:text-gray-300">
+          <div class="relative text-gray-700">
             <input
               type="text"
               class="input input--lg w-full lg:w-64 box pr-10 placeholder-theme-13"
@@ -84,10 +84,10 @@
             <div class="text-gray-600">5 Items</div>
           </div>
           <div
-            class="col-span-12 sm:col-span-4 xxl:col-span-3 box bg-theme-1 dark:bg-theme-1 p-5 cursor-pointer zoom-in"
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box bg-theme-1 p-5 cursor-pointer zoom-in"
           >
             <div class="font-medium text-base text-white">Pancake & Toast</div>
-            <div class="text-theme-25 dark:text-gray-400">8 Items</div>
+            <div class="text-theme-25">8 Items</div>
           </div>
           <div
             class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
@@ -177,7 +177,7 @@
                 href="javascript:;"
                 data-toggle="modal"
                 data-target="#add-item-modal"
-                class="flex items-center p-3 cursor-pointer transition duration-300 ease-in-out bg-white dark:bg-dark-3 hover:bg-gray-200 dark:hover:bg-dark-1 rounded-md"
+                class="flex items-center p-3 cursor-pointer transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-1 rounded-md"
               >
                 <div class="pos__ticket__item-name truncate mr-1">
                   {{ faker.foods[0].name }}
@@ -214,7 +214,7 @@
                 <div>15%</div>
               </div>
               <div
-                class="flex mt-4 pt-4 border-t border-gray-200 dark:border-dark-5"
+                class="flex mt-4 pt-4 border-t border-gray-200"
               >
                 <div class="mr-auto font-medium text-base">Charge</div>
                 <div class="font-medium text-base">$220</div>
@@ -222,7 +222,7 @@
             </div>
             <div class="flex mt-5">
               <button
-                class="button w-32 border border-gray-400 dark:border-dark-5 text-gray-600 dark:text-gray-300"
+                class="button w-32 border border-gray-400 text-gray-600"
               >
                 Clear Items
               </button>
@@ -235,21 +235,21 @@
           </div>
           <div id="details" class="tab-content__pane">
             <div class="box p-5 mt-5">
-              <div class="flex items-center border-b dark:border-dark-5 pb-5">
+              <div class="flex items-center border-b pb-5">
                 <div class="">
                   <div class="text-gray-600">Time</div>
                   <div>02/06/20 02:10 PM</div>
                 </div>
                 <ClockIcon class="w-4 h-4 text-gray-600 ml-auto" />
               </div>
-              <div class="flex items-center border-b dark:border-dark-5 py-5">
+              <div class="flex items-center border-b py-5">
                 <div class="">
                   <div class="text-gray-600">Customer</div>
                   <div>{{ $f()[0].users[0].name }}</div>
                 </div>
                 <UserIcon class="w-4 h-4 text-gray-600 ml-auto" />
               </div>
-              <div class="flex items-center border-b dark:border-dark-5 py-5">
+              <div class="flex items-center border-b py-5">
                 <div class="">
                   <div class="text-gray-600">People</div>
                   <div>3</div>
@@ -273,7 +273,7 @@
     <div id="new-order-modal" class="modal">
       <div class="modal__content">
         <div
-          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
         >
           <h2 class="font-medium text-base mr-auto">New Order</h2>
         </div>
@@ -304,12 +304,12 @@
           </div>
         </div>
         <div
-          class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+          class="px-5 py-3 text-right border-t border-gray-200"
         >
           <button
             type="button"
             data-dismiss="modal"
-            class="button w-32 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+            class="button w-32 border text-gray-700 mr-1"
           >
             Cancel
           </button>
@@ -324,7 +324,7 @@
     <div id="add-item-modal" class="modal">
       <div class="modal__content">
         <div
-          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
         >
           <h2 class="font-medium text-base mr-auto">
             {{ $f()[0].foods[0].name }}
@@ -336,7 +336,7 @@
             <div class="flex mt-2 flex-1">
               <button
                 type="button"
-                class="button w-12 border bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 mr-1"
+                class="button w-12 border bg-gray-200 text-gray-600 mr-1"
               >
                 -
               </button>
@@ -348,7 +348,7 @@
               />
               <button
                 type="button"
-                class="button w-12 border bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 ml-1"
+                class="button w-12 border bg-gray-200 text-gray-600 ml-1"
               >
                 +
               </button>
@@ -363,12 +363,12 @@
           </div>
         </div>
         <div
-          class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+          class="px-5 py-3 text-right border-t border-gray-200"
         >
           <button
             type="button"
             data-dismiss="modal"
-            class="button w-24 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+            class="button w-24 border text-gray-700 mr-1"
           >
             Cancel
           </button>
diff --git a/src/views/BlogLayout1.vue b/src/views/BlogLayout1.vue
index 5d10ede..d35be5e 100644
--- a/src/views/BlogLayout1.vue
+++ b/src/views/BlogLayout1.vue
@@ -8,23 +8,23 @@
         </button>
         <div class="dropdown ml-auto sm:ml-0">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <PlusIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <Share2Icon class="w-4 h-4 mr-2" /> Share Post
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <DownloadIcon class="w-4 h-4 mr-2" /> Download Post
               </a>
@@ -41,7 +41,7 @@
         class="intro-y col-span-12 md:col-span-6 xl:col-span-4 box"
       >
         <div
-          class="flex items-center border-b border-gray-200 dark:border-dark-5 px-5 py-4"
+          class="flex items-center border-b border-gray-200 px-5 py-4"
         >
           <div class="w-10 h-10 flex-none image-fit">
             <img
@@ -54,7 +54,7 @@
             <a href="" class="font-medium">{{ faker.users[0].name }}</a>
             <div class="flex text-gray-600 truncate text-xs mt-1">
               <a
-                class="text-theme-1 dark:text-theme-10 inline-block truncate"
+                class="text-theme-1 inline-block truncate"
                 href=""
                 >{{ faker.products[0].category }}</a
               >
@@ -64,21 +64,21 @@
           <div class="dropdown ml-3">
             <a
               href="javascript:;"
-              class="dropdown-toggle w-5 h-5 text-gray-500 dark:text-gray-300"
+              class="dropdown-toggle w-5 h-5 text-gray-500"
             >
               <MoreVerticalIcon class="w-4 h-4" />
             </a>
             <div class="dropdown-box w-40">
-              <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+              <div class="dropdown-box__content box p-2">
                 <a
                   href=""
-                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                 >
                   <Edit2Icon class="w-4 h-4 mr-2" /> Edit Post
                 </a>
                 <a
                   href=""
-                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                 >
                   <TrashIcon class="w-4 h-4 mr-2" /> Delete Post
                 </a>
@@ -97,17 +97,17 @@
           <a href="" class="block font-medium text-base mt-5">{{
             faker.news[0].title
           }}</a>
-          <div class="text-gray-700 dark:text-gray-600 mt-2">
+          <div class="text-gray-700 mt-2">
             {{ faker.news[0].short_content }}
           </div>
         </div>
         <div
-          class="flex items-center px-5 py-3 border-t border-gray-200 dark:border-dark-5"
+          class="flex items-center px-5 py-3 border-t border-gray-200"
         >
           <Tippy
             tag="a"
             href=""
-            class="intro-x w-8 h-8 flex items-center justify-center rounded-full border border-gray-500 dark:border-dark-5 dark:bg-dark-5 dark:text-gray-300 text-gray-600 mr-2"
+            class="intro-x w-8 h-8 flex items-center justify-center rounded-full border border-gray-500 text-gray-600 mr-2"
             content="Bookmark"
           >
             <BookmarkIcon class="w-3 h-3" />
@@ -144,7 +144,7 @@
           <Tippy
             tag="a"
             href=""
-            class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 ml-auto"
+            class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-14 text-theme-10 ml-auto"
             content="Share"
           >
             <Share2Icon class="w-3 h-3" />
@@ -158,7 +158,7 @@
             <ShareIcon class="w-3 h-3" />
           </Tippy>
         </div>
-        <div class="px-5 pt-3 pb-5 border-t border-gray-200 dark:border-dark-5">
+        <div class="px-5 pt-3 pb-5 border-t border-gray-200">
           <div class="w-full flex text-gray-600 text-xs sm:text-sm">
             <div class="mr-2">
               Comments:
diff --git a/src/views/BlogLayout2.vue b/src/views/BlogLayout2.vue
index 62e3a3c..42b4034 100644
--- a/src/views/BlogLayout2.vue
+++ b/src/views/BlogLayout2.vue
@@ -8,23 +8,23 @@
         </button>
         <div class="dropdown ml-auto sm:ml-0">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <PlusIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <Share2Icon class="w-4 h-4 mr-2" /> Share Post
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <DownloadIcon class="w-4 h-4 mr-2" /> Download Post
               </a>
@@ -66,16 +66,16 @@
                 <MoreVerticalIcon class="w-4 h-4 text-white" />
               </a>
               <div class="dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <Edit2Icon class="w-4 h-4 mr-2" /> Edit Post
                   </a>
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <TrashIcon class="w-4 h-4 mr-2" /> Delete Post
                   </a>
@@ -92,16 +92,16 @@
             }}</a>
           </div>
         </div>
-        <div class="p-5 text-gray-700 dark:text-gray-600">
+        <div class="p-5 text-gray-700">
           {{ faker.news[0].short_content }}
         </div>
         <div
-          class="flex items-center px-5 py-3 border-t border-gray-200 dark:border-dark-5"
+          class="flex items-center px-5 py-3 border-t border-gray-200"
         >
           <Tippy
             tag="a"
             href=""
-            class="intro-x w-8 h-8 flex items-center justify-center rounded-full border border-gray-500 dark:border-dark-5 dark:bg-dark-5 dark:text-gray-300 text-gray-600 mr-2"
+            class="intro-x w-8 h-8 flex items-center justify-center rounded-full border border-gray-500 text-gray-600 mr-2"
             content="Bookmark"
           >
             <BookmarkIcon class="w-3 h-3" />
@@ -138,7 +138,7 @@
           <Tippy
             tag="a"
             href=""
-            class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 ml-auto"
+            class="intro-x w-8 h-8 flex items-center justify-center rounded-full bg-theme-14 text-theme-10 ml-auto"
             content="Share"
           >
             <Share2Icon class="w-3 h-3" />
@@ -152,7 +152,7 @@
             <ShareIcon class="w-3 h-3" />
           </Tippy>
         </div>
-        <div class="px-5 pt-3 pb-5 border-t border-gray-200 dark:border-dark-5">
+        <div class="px-5 pt-3 pb-5 border-t border-gray-200">
           <div class="w-full flex text-gray-600 text-xs sm:text-sm">
             <div class="mr-2">
               Comments:
@@ -173,7 +173,7 @@
                 :src="require(`@/assets/images/${faker.photos[0]}`)"
               />
             </div>
-            <div class="flex-1 relative text-gray-700 dark:text-gray-300">
+            <div class="flex-1 relative text-gray-700">
               <input
                 type="text"
                 class="input w-full rounded-full bg-gray-200 pr-10 placeholder-theme-13"
diff --git a/src/views/BlogLayout3.vue b/src/views/BlogLayout3.vue
index dd9805f..0625ff2 100644
--- a/src/views/BlogLayout3.vue
+++ b/src/views/BlogLayout3.vue
@@ -5,10 +5,10 @@
       {{ $f()[0].news[0].title }}
     </h2>
     <div
-      class="intro-y text-gray-700 dark:text-gray-600 mt-3 text-xs sm:text-sm"
+      class="intro-y text-gray-700 mt-3 text-xs sm:text-sm"
     >
       {{ $f()[0].dates[0] }} <span class="mx-1">•</span>
-      <a class="text-theme-1 dark:text-theme-10" href="">{{
+      <a class="text-theme-1" href="">{{
         $f()[0].products[0].category
       }}</a>
       <span class="mx-1">•</span> 7 Min read
@@ -26,7 +26,7 @@
       <Tippy
         tag="a"
         href=""
-        class="intro-x w-8 h-8 sm:w-10 sm:h-10 flex flex-none items-center justify-center rounded-full border border-gray-500 dark:border-dark-5 dark:bg-dark-5 dark:text-gray-300 text-gray-600 mr-3"
+        class="intro-x w-8 h-8 sm:w-10 sm:h-10 flex flex-none items-center justify-center rounded-full border border-gray-500 text-gray-600 mr-3"
         content="Bookmark"
       >
         <BookmarkIcon class="w-3 h-3" />
@@ -61,7 +61,7 @@
         </div>
       </div>
       <div
-        class="absolute sm:relative -mt-12 sm:mt-0 w-full flex text-gray-700 dark:text-gray-600 text-xs sm:text-sm"
+        class="absolute sm:relative -mt-12 sm:mt-0 w-full flex text-gray-700 text-xs sm:text-sm"
       >
         <div class="intro-x mr-1 sm:mr-3">
           Comments:
@@ -77,7 +77,7 @@
       <Tippy
         tag="a"
         href=""
-        class="intro-x w-8 h-8 sm:w-10 sm:h-10 flex flex-none items-center justify-center rounded-full bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 ml-auto sm:ml-0"
+        class="intro-x w-8 h-8 sm:w-10 sm:h-10 flex flex-none items-center justify-center rounded-full bg-theme-14 text-theme-10 ml-auto sm:ml-0"
         content="Share"
       >
         <Share2Icon class="w-3 h-3" />
@@ -97,7 +97,7 @@
       <p>{{ $f()[3].news[0].content }}</p>
     </div>
     <div
-      class="intro-y flex text-xs sm:text-sm flex-col sm:flex-row items-center mt-5 pt-5 border-t border-gray-200 dark:border-dark-5"
+      class="intro-y flex text-xs sm:text-sm flex-col sm:flex-row items-center mt-5 pt-5 border-t border-gray-200"
     >
       <div class="flex items-center">
         <div class="w-12 h-12 flex-none image-fit">
@@ -114,13 +114,13 @@
         </div>
       </div>
       <div
-        class="flex items-center text-gray-700 dark:text-gray-600 sm:ml-auto mt-5 sm:mt-0"
+        class="flex items-center text-gray-700 sm:ml-auto mt-5 sm:mt-0"
       >
         Share this post:
         <Tippy
           tag="a"
           href=""
-          class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center border dark:border-dark-5 ml-2 text-gray-500 zoom-in"
+          class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center border ml-2 text-gray-500 zoom-in"
           content="Facebook"
         >
           <FacebookIcon class="w-3 h-3 fill-current" />
@@ -128,7 +128,7 @@
         <Tippy
           tag="a"
           href=""
-          class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center border dark:border-dark-5 ml-2 text-gray-500 zoom-in"
+          class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center border ml-2 text-gray-500 zoom-in"
           content="Twitter"
         >
           <TwitterIcon class="w-3 h-3 fill-current" />
@@ -136,7 +136,7 @@
         <Tippy
           tag="a"
           href=""
-          class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center border dark:border-dark-5 ml-2 text-gray-500 zoom-in"
+          class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center border ml-2 text-gray-500 zoom-in"
           content="Linked In"
         >
           <LinkedinIcon class="w-3 h-3 fill-current" />
@@ -145,7 +145,7 @@
     </div>
     <!-- END: Blog Layout -->
     <!-- BEGIN: Comments -->
-    <div class="intro-y mt-5 pt-5 border-t border-gray-200 dark:border-dark-5">
+    <div class="intro-y mt-5 pt-5 border-t border-gray-200">
       <div class="text-base sm:text-lg font-medium">2 Responses</div>
       <div class="news__input relative mt-5">
         <MessageCircleIcon
@@ -180,7 +180,7 @@
           </div>
         </div>
       </div>
-      <div class="mt-5 pt-5 border-t border-gray-200 dark:border-dark-5">
+      <div class="mt-5 pt-5 border-t border-gray-200">
         <div class="flex">
           <div class="w-10 h-10 sm:w-12 sm:h-12 flex-none image-fit">
             <img
diff --git a/src/views/Button.vue b/src/views/Button.vue
index b1d1671..0467ae6 100644
--- a/src/views/Button.vue
+++ b/src/views/Button.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Basic Button -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Basic Buttons</h2>
             <div
@@ -28,7 +28,7 @@
                 Primary
               </button>
               <button
-                class="button w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                class="button w-24 mr-1 mb-2 border text-gray-700"
               >
                 Secondary
               </button>
@@ -48,7 +48,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-basic-button"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -62,7 +62,7 @@
                         Primary
                       </button>
                       <button
-                        class="button w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                        class="button w-24 mr-1 mb-2 border text-gray-700"
                       >
                         Secondary
                       </button>
@@ -93,7 +93,7 @@
         <!-- BEGIN: Button Size -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Button Sizes</h2>
             <div
@@ -126,17 +126,17 @@
               </div>
               <div class="mt-5">
                 <button
-                  class="button button--sm w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                  class="button button--sm w-24 mr-1 mb-2 border text-gray-700"
                 >
                   Small
                 </button>
                 <button
-                  class="button w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                  class="button w-24 mr-1 mb-2 border text-gray-700"
                 >
                   Medium
                 </button>
                 <button
-                  class="button button--lg w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                  class="button button--lg w-24 mr-1 mb-2 border text-gray-700"
                 >
                   Large
                 </button>
@@ -145,7 +145,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-button-size"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -174,17 +174,17 @@
                       </div>
                       <div class="mt-5">
                         <button
-                          class="button button--sm w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                          class="button button--sm w-24 mr-1 mb-2 border text-gray-700"
                         >
                           Small
                         </button>
                         <button
-                          class="button w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                          class="button w-24 mr-1 mb-2 border text-gray-700"
                         >
                           Medium
                         </button>
                         <button
-                          class="button button--lg w-24 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                          class="button button--lg w-24 mr-1 mb-2 border text-gray-700"
                         >
                           Large
                         </button>
@@ -200,7 +200,7 @@
         <!-- BEGIN: Button Link -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Working with Links</h2>
             <div
@@ -223,7 +223,7 @@
               >
               <a
                 href=""
-                class="button w-24 inline-block mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                class="button w-24 inline-block mr-1 mb-2 border text-gray-700"
                 >Button</a
               >
               <a
@@ -250,7 +250,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-link-button"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -267,7 +267,7 @@
                       >
                       <a
                         href=""
-                        class="button w-24 inline-block mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                        class="button w-24 inline-block mr-1 mb-2 border text-gray-700"
                         >Button</a
                       >
                       <a
@@ -301,7 +301,7 @@
         <!-- BEGIN: Elevated Button -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Elevated Buttons</h2>
             <div
@@ -324,7 +324,7 @@
                   Primary
                 </button>
                 <button
-                  class="button w-24 shadow-md mr-1 mb-2 text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                  class="button w-24 shadow-md mr-1 mb-2 text-gray-700"
                 >
                   Secondary
                 </button>
@@ -356,7 +356,7 @@
                   Primary
                 </button>
                 <button
-                  class="button w-24 rounded-full shadow-md mr-1 mb-2 text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                  class="button w-24 rounded-full shadow-md mr-1 mb-2 text-gray-700"
                 >
                   Secondary
                 </button>
@@ -385,7 +385,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-elevated-button"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -402,7 +402,7 @@
                           Primary
                         </button>
                         <button
-                          class="button w-24 shadow-md mr-1 mb-2 text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                          class="button w-24 shadow-md mr-1 mb-2 text-gray-700"
                         >
                           Secondary
                         </button>
@@ -434,7 +434,7 @@
                           Primary
                         </button>
                         <button
-                          class="button w-24 rounded-full shadow-md mr-1 mb-2 text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                          class="button w-24 rounded-full shadow-md mr-1 mb-2 text-gray-700"
                         >
                           Secondary
                         </button>
@@ -470,7 +470,7 @@
         <!-- BEGIN: Social Media Button -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Social Media Buttons</h2>
             <div
@@ -512,7 +512,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-social-media-button"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -559,7 +559,7 @@
         <!-- BEGIN: Outline Button -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Outline Buttons</h2>
             <div
@@ -576,27 +576,27 @@
           <div id="outline-button" class="p-5">
             <div class="preview">
               <button
-                class="button w-24 inline-block mr-1 mb-2 border border-theme-1 text-theme-1 dark:border-theme-10 dark:text-theme-10"
+                class="button w-24 inline-block mr-1 mb-2 border border-theme-1 text-theme-1"
               >
                 Link
               </button>
               <button
-                class="button w-24 inline-block mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="button w-24 inline-block mr-1 mb-2 border text-gray-700"
               >
                 Button
               </button>
               <button
-                class="button w-24 inline-block mr-1 mb-2 border border-theme-9 text-theme-9 dark:border-theme-9"
+                class="button w-24 inline-block mr-1 mb-2 border border-theme-9 text-theme-9"
               >
                 Input
               </button>
               <button
-                class="button w-24 inline-block mr-1 mb-2 border border-theme-12 text-theme-12 dark:border-theme-12"
+                class="button w-24 inline-block mr-1 mb-2 border border-theme-12 text-theme-12"
               >
                 Submit
               </button>
               <button
-                class="button w-24 inline-block mr-1 mb-2 border border-theme-6 text-theme-6 dark:border-theme-6"
+                class="button w-24 inline-block mr-1 mb-2 border border-theme-6 text-theme-6"
               >
                 Reset
               </button>
@@ -604,7 +604,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-outline-button"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -615,27 +615,27 @@
                   >
                     <textarea>
                       <button
-                        class="button w-24 inline-block mr-1 mb-2 border border-theme-1 text-theme-1 dark:border-theme-10 dark:text-theme-10"
+                        class="button w-24 inline-block mr-1 mb-2 border border-theme-1 text-theme-1"
                       >
                         Link
                       </button>
                       <button
-                        class="button w-24 inline-block mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                        class="button w-24 inline-block mr-1 mb-2 border text-gray-700"
                       >
                         Button
                       </button>
                       <button
-                        class="button w-24 inline-block mr-1 mb-2 border border-theme-9 text-theme-9 dark:border-theme-9"
+                        class="button w-24 inline-block mr-1 mb-2 border border-theme-9 text-theme-9"
                       >
                         Input
                       </button>
                       <button
-                        class="button w-24 inline-block mr-1 mb-2 border border-theme-12 text-theme-12 dark:border-theme-12"
+                        class="button w-24 inline-block mr-1 mb-2 border border-theme-12 text-theme-12"
                       >
                         Submit
                       </button>
                       <button
-                        class="button w-24 inline-block mr-1 mb-2 border border-theme-6 text-theme-6 dark:border-theme-6"
+                        class="button w-24 inline-block mr-1 mb-2 border border-theme-6 text-theme-6"
                       >
                         Reset
                       </button>
@@ -650,7 +650,7 @@
         <!-- BEGIN: Loading Button -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Loading State Buttons</h2>
             <div
@@ -710,7 +710,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-loading-button"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -771,7 +771,7 @@
         <!-- BEGIN: Rounded Button -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Rounded Buttons</h2>
             <div
@@ -793,7 +793,7 @@
                 Primary
               </button>
               <button
-                class="button w-24 rounded-full mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="button w-24 rounded-full mr-1 mb-2 border text-gray-700"
               >
                 Secondary
               </button>
@@ -821,7 +821,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-rounded-button"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -837,7 +837,7 @@
                         Primary
                       </button>
                       <button
-                        class="button w-24 rounded-full mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                        class="button w-24 rounded-full mr-1 mb-2 border text-gray-700"
                       >
                         Secondary
                       </button>
@@ -872,7 +872,7 @@
         <!-- BEGIN: Soft Color Button -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Soft Color Buttons</h2>
             <div
@@ -894,7 +894,7 @@
                 Primary
               </button>
               <button
-                class="button w-24 rounded-full mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="button w-24 rounded-full mr-1 mb-2 border text-gray-700"
               >
                 Secondary
               </button>
@@ -922,7 +922,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-softcolor-button"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -938,7 +938,7 @@
                         Primary
                       </button>
                       <button
-                        class="button w-24 rounded-full mr-1 mb-2 border text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                        class="button w-24 rounded-full mr-1 mb-2 border text-gray-700"
                       >
                         Secondary
                       </button>
@@ -973,7 +973,7 @@
         <!-- BEGIN: Icon Button -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Icon Buttons</h2>
             <div
@@ -996,7 +996,7 @@
                   <ActivityIcon class="w-4 h-4 mr-2" /> Activity
                 </button>
                 <button
-                  class="button w-32 mr-2 mb-2 flex items-center justify-center border text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                  class="button w-32 mr-2 mb-2 flex items-center justify-center border text-gray-700"
                 >
                   <HardDriveIcon class="w-4 h-4 mr-2" /> Hard Drive
                 </button>
@@ -1025,7 +1025,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-icon-button"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -1042,7 +1042,7 @@
                         Activity
                       </button>
                       <button
-                        class="button w-32 mr-2 mb-2 flex items-center justify-center border text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                        class="button w-32 mr-2 mb-2 flex items-center justify-center border text-gray-700"
                       >
                         <HardDriveIcon class="w-4 h-4 mr-2" />
                         Hard Drive
@@ -1079,7 +1079,7 @@
         <!-- BEGIN: Icon Only Button -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Icon Only Buttons</h2>
             <div
@@ -1101,7 +1101,7 @@
                 </span>
               </button>
               <button
-                class="button px-2 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                class="button px-2 mr-1 mb-2 border text-gray-700"
               >
                 <span class="w-5 h-5 flex items-center justify-center">
                   <HardDriveIcon class="w-4 h-4" />
@@ -1131,7 +1131,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-icon-only-button"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -1147,7 +1147,7 @@
                         </span>
                       </button>
                       <button
-                        class="button px-2 mr-1 mb-2 border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+                        class="button px-2 mr-1 mb-2 border text-gray-700"
                       >
                         <span class="w-5 h-5 flex items-center justify-center">
                           <HardDriveIcon class="w-4 h-4" />
diff --git a/src/views/ChangePassword.vue b/src/views/ChangePassword.vue
index 8290156..7364b3f 100644
--- a/src/views/ChangePassword.vue
+++ b/src/views/ChangePassword.vue
@@ -26,32 +26,32 @@
             <div class="dropdown">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="dropdown-box w-56">
-                <div class="dropdown-box__content box dark:bg-dark-1">
+                <div class="dropdown-box__content box">
                   <div
-                    class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"
+                    class="p-4 border-b border-gray-200 font-medium"
                   >
                     Export Options
                   </div>
                   <div class="p-2">
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <ActivityIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       English
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <BoxIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Indonesia
                       <div
@@ -62,25 +62,25 @@
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <LayoutIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       English
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <SidebarIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Indonesia
                     </a>
                   </div>
                   <div
-                    class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"
+                    class="px-3 py-3 border-t border-gray-200 font-medium flex"
                   >
                     <button
                       type="button"
@@ -90,7 +90,7 @@
                     </button>
                     <button
                       type="button"
-                      class="button button--sm bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+                      class="button button--sm bg-gray-200 text-gray-600 ml-auto"
                     >
                       View Profile
                     </button>
@@ -99,9 +99,9 @@
               </div>
             </div>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a
-              class="flex items-center text-theme-1 dark:text-theme-10 font-medium"
+              class="flex items-center text-theme-1 font-medium"
               href=""
             >
               <ActivityIcon class="w-4 h-4 mr-2" /> Personal Information
@@ -116,7 +116,7 @@
               <SettingsIcon class="w-4 h-4 mr-2" /> User Settings
             </a>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a class="flex items-center" href="">
               <ActivityIcon class="w-4 h-4 mr-2" /> Email Settings
             </a>
@@ -130,7 +130,7 @@
               <SettingsIcon class="w-4 h-4 mr-2" /> Tax Information
             </a>
           </div>
-          <div class="p-5 border-t flex dark:border-dark-5">
+          <div class="p-5 border-t flex">
             <button
               type="button"
               class="button button--sm block bg-theme-1 text-white"
@@ -139,7 +139,7 @@
             </button>
             <button
               type="button"
-              class="button button--sm border text-gray-700 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+              class="button button--sm border text-gray-700 ml-auto"
             >
               New Quick Link
             </button>
@@ -151,7 +151,7 @@
         <!-- BEGIN: Change Password -->
         <div class="intro-y box lg:mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Change Password</h2>
           </div>
diff --git a/src/views/Chart.vue b/src/views/Chart.vue
index 6aa9522..d65eb53 100644
--- a/src/views/Chart.vue
+++ b/src/views/Chart.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Vertical Bar Chart -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Vertical Bar Chart</h2>
             <div
@@ -29,7 +29,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-vertical-bar-chart"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -133,7 +133,7 @@
         <!-- BEGIN: Horizontal Bar Chart -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Horizontal Bar Chart</h2>
             <div
@@ -154,7 +154,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-horizontal-bar-chart"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -276,7 +276,7 @@
         <!-- BEGIN: Donut Chart -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Donut Chart</h2>
             <div
@@ -297,7 +297,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-donut-chart"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -362,7 +362,7 @@
         <!-- BEGIN: Stacked Bar Chart -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Stacked Bar Chart</h2>
             <div
@@ -383,7 +383,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-stacked-bar-chart"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -502,7 +502,7 @@
         <!-- BEGIN: Line Chart -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Line Chart</h2>
             <div
@@ -523,7 +523,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-line-chart"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -639,7 +639,7 @@
         <!-- BEGIN: Pie Chart -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Pie Chart</h2>
             <div
@@ -660,7 +660,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-pie-chart"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
diff --git a/src/views/Chat.vue b/src/views/Chat.vue
index b1f9d7a..da2fc03 100644
--- a/src/views/Chat.vue
+++ b/src/views/Chat.vue
@@ -8,23 +8,23 @@
         </button>
         <div class="dropdown ml-auto sm:ml-0">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <PlusIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <UsersIcon class="w-4 h-4 mr-2" /> Create Group
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <SettingsIcon class="w-4 h-4 mr-2" /> Settings
               </a>
@@ -67,7 +67,7 @@
           <div id="chats" class="tab-content__pane active">
             <div class="pr-1">
               <div class="box px-5 pt-5 pb-5 lg:pb-0 mt-5">
-                <div class="relative text-gray-700 dark:text-gray-300">
+                <div class="relative text-gray-700">
                   <input
                     type="text"
                     class="input input--lg w-full bg-gray-200 pr-10 placeholder-theme-13"
@@ -150,7 +150,7 @@
           <div id="friends" class="tab-content__pane">
             <div class="pr-1">
               <div class="box p-5 mt-5">
-                <div class="relative text-gray-700 dark:text-gray-300">
+                <div class="relative text-gray-700">
                   <input
                     type="text"
                     class="input input--lg w-full bg-gray-200 pr-10 placeholder-theme-13"
@@ -198,21 +198,21 @@
                 <div class="dropdown ml-auto">
                   <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                     <MoreHorizontalIcon
-                      class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                      class="w-5 h-5 text-gray-700"
                     />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <Share2Icon class="w-4 h-4 mr-2" />
                         Share Contact
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <CopyIcon class="w-4 h-4 mr-2" /> Copy Contact
                       </a>
@@ -246,21 +246,21 @@
                 <div class="dropdown ml-auto">
                   <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                     <MoreHorizontalIcon
-                      class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                      class="w-5 h-5 text-gray-700"
                     />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <Share2Icon class="w-4 h-4 mr-2" />
                         Share Contact
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <CopyIcon class="w-4 h-4 mr-2" /> Copy Contact
                       </a>
@@ -295,21 +295,21 @@
                 <div class="dropdown ml-auto">
                   <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                     <MoreHorizontalIcon
-                      class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                      class="w-5 h-5 text-gray-700"
                     />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <Share2Icon class="w-4 h-4 mr-2" />
                         Share Contact
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <CopyIcon class="w-4 h-4 mr-2" /> Copy Contact
                       </a>
@@ -343,21 +343,21 @@
                 <div class="dropdown ml-auto">
                   <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                     <MoreHorizontalIcon
-                      class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                      class="w-5 h-5 text-gray-700"
                     />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <Share2Icon class="w-4 h-4 mr-2" />
                         Share Contact
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <CopyIcon class="w-4 h-4 mr-2" /> Copy Contact
                       </a>
@@ -391,21 +391,21 @@
                 <div class="dropdown ml-auto">
                   <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                     <MoreHorizontalIcon
-                      class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                      class="w-5 h-5 text-gray-700"
                     />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <Share2Icon class="w-4 h-4 mr-2" />
                         Share Contact
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <CopyIcon class="w-4 h-4 mr-2" /> Copy Contact
                       </a>
@@ -436,21 +436,21 @@
                 </div>
               </div>
               <div class="box p-5 mt-5">
-                <div class="flex items-center border-b dark:border-dark-5 pb-5">
+                <div class="flex items-center border-b pb-5">
                   <div class="">
                     <div class="text-gray-600">Country</div>
                     <div>New York City, USA</div>
                   </div>
                   <GlobeIcon class="w-4 h-4 text-gray-600 ml-auto" />
                 </div>
-                <div class="flex items-center border-b dark:border-dark-5 py-5">
+                <div class="flex items-center border-b py-5">
                   <div class="">
                     <div class="text-gray-600">Phone</div>
                     <div>+32 19 23 62 24 34</div>
                   </div>
                   <MicIcon class="w-4 h-4 text-gray-600 ml-auto" />
                 </div>
-                <div class="flex items-center border-b dark:border-dark-5 py-5">
+                <div class="flex items-center border-b py-5">
                   <div class="">
                     <div class="text-gray-600">Email</div>
                     <div>{{ $f()[0]["users"][0]["email"] }}</div>
@@ -476,7 +476,7 @@
           <!-- BEGIN: Chat Active -->
           <div v-if="chatBox" class="h-full flex flex-col">
             <div
-              class="flex flex-col sm:flex-row border-b border-gray-200 dark:border-dark-5 px-5 py-4"
+              class="flex flex-col sm:flex-row border-b border-gray-200 px-5 py-4"
             >
               <div class="flex items-center">
                 <div
@@ -514,17 +514,17 @@
                     <MoreVerticalIcon class="w-5 h-5" />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <Share2Icon class="w-4 h-4 mr-2" />
                         Share Contact
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <SettingsIcon class="w-4 h-4 mr-2" />
                         Settings
@@ -546,7 +546,7 @@
                   />
                 </div>
                 <div
-                  class="bg-gray-200 dark:bg-dark-5 px-4 py-3 text-gray-700 dark:text-gray-300 rounded-r-md rounded-t-md"
+                  class="bg-gray-200 px-4 py-3 text-gray-700 rounded-r-md rounded-t-md"
                 >
                   Lorem ipsum sit amen dolor, lorem ipsum sit amen dolor
                   <div class="mt-1 text-xs text-gray-600">2 mins ago</div>
@@ -559,17 +559,17 @@
                     <MoreVerticalIcon class="w-4 h-4" />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <CornerUpLeftIcon class="w-4 h-4 mr-2" />
                         Reply
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <TrashIcon class="w-4 h-4 mr-2" /> Delete
                       </a>
@@ -587,17 +587,17 @@
                     <MoreVerticalIcon class="w-4 h-4" />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <CornerUpLeftIcon class="w-4 h-4 mr-2" />
                         Reply
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <TrashIcon class="w-4 h-4 mr-2" /> Delete
                       </a>
@@ -630,17 +630,17 @@
                     <MoreVerticalIcon class="w-4 h-4" />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <CornerUpLeftIcon class="w-4 h-4 mr-2" />
                         Reply
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <TrashIcon class="w-4 h-4 mr-2" /> Delete
                       </a>
@@ -665,7 +665,7 @@
               </div>
               <div class="clear-both"></div>
               <div
-                class="text-gray-500 dark:text-gray-600 text-xs text-center mb-10 mt-5"
+                class="text-gray-500 text-xs text-center mb-10 mt-5"
               >
                 12 June 2020
               </div>
@@ -680,7 +680,7 @@
                   />
                 </div>
                 <div
-                  class="bg-gray-200 dark:bg-dark-5 px-4 py-3 text-gray-700 dark:text-gray-300 rounded-r-md rounded-t-md"
+                  class="bg-gray-200 px-4 py-3 text-gray-700 rounded-r-md rounded-t-md"
                 >
                   Lorem ipsum sit amen dolor, lorem ipsum sit amen dolor
                   <div class="mt-1 text-xs text-gray-600">10 secs ago</div>
@@ -693,17 +693,17 @@
                     <MoreVerticalIcon class="w-4 h-4" />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <CornerUpLeftIcon class="w-4 h-4 mr-2" />
                         Reply
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <TrashIcon class="w-4 h-4 mr-2" /> Delete
                       </a>
@@ -721,17 +721,17 @@
                     <MoreVerticalIcon class="w-4 h-4" />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <CornerUpLeftIcon class="w-4 h-4 mr-2" />
                         Reply
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <TrashIcon class="w-4 h-4 mr-2" /> Delete
                       </a>
@@ -766,7 +766,7 @@
                   />
                 </div>
                 <div
-                  class="bg-gray-200 dark:bg-dark-5 px-4 py-3 text-gray-700 dark:text-gray-300 rounded-r-md rounded-t-md"
+                  class="bg-gray-200 px-4 py-3 text-gray-700 rounded-r-md rounded-t-md"
                 >
                   {{ $f()[0]["users"][0]["name"] }} is typing
                   <span class="typing-dots ml-1">
@@ -778,10 +778,10 @@
               </div>
             </div>
             <div
-              class="pt-4 pb-10 sm:py-4 flex items-center border-t border-gray-200 dark:border-dark-5"
+              class="pt-4 pb-10 sm:py-4 flex items-center border-t border-gray-200"
             >
               <textarea
-                class="chat__box__input input dark:bg-dark-3 w-full h-16 resize-none border-transparent px-5 py-3 focus:shadow-none"
+                class="chat__box__input input w-full h-16 resize-none border-transparent px-5 py-3 focus:shadow-none"
                 rows="1"
                 placeholder="Type your message..."
               ></textarea>
@@ -798,11 +798,11 @@
                   <div class="chat-dropdown dropdown-box w-40 pb-2">
                     <div class="dropdown-box__content">
                       <div
-                        class="chat-dropdown__box box dark:bg-dark-1 flex flex-col pb-3 -mt-2"
+                        class="chat-dropdown__box box flex flex-col pb-3 -mt-2"
                       >
                         <div class="px-3 pt-3">
                           <div
-                            class="relative text-gray-700 dark:text-gray-300"
+                            class="relative text-gray-700"
                           >
                             <input
                               type="text"
@@ -821,7 +821,7 @@
                             data-toggle="tab"
                             data-target="#history"
                             href="javascript:;"
-                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200 dark:hover:bg-dark-2"
+                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                           >
                             <svg
                               class="w-4 h-4"
@@ -839,7 +839,7 @@
                             data-toggle="tab"
                             data-target="#smile"
                             href="javascript:;"
-                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200 dark:hover:bg-dark-2 active"
+                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2 active"
                           >
                             <svg
                               class="w-4 h-4"
@@ -857,7 +857,7 @@
                             data-toggle="tab"
                             data-target="#cat"
                             href="javascript:;"
-                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200 dark:hover:bg-dark-2"
+                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                           >
                             <svg
                               class="w-4 h-4"
@@ -875,7 +875,7 @@
                             data-toggle="tab"
                             data-target="#coffee"
                             href="javascript:;"
-                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200 dark:hover:bg-dark-2"
+                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                           >
                             <svg
                               class="w-4 h-4"
@@ -893,7 +893,7 @@
                             data-toggle="tab"
                             data-target="#futbol"
                             href="javascript:;"
-                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200 dark:hover:bg-dark-2"
+                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                           >
                             <svg
                               class="w-4 h-4"
@@ -911,7 +911,7 @@
                             data-toggle="tab"
                             data-target="#building"
                             href="javascript:;"
-                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200 dark:hover:bg-dark-2"
+                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                           >
                             <svg
                               class="w-4 h-4"
@@ -929,7 +929,7 @@
                             data-toggle="tab"
                             data-target="#lightbulb"
                             href="javascript:;"
-                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200 dark:hover:bg-dark-2"
+                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                           >
                             <svg
                               class="w-4 h-4"
@@ -947,7 +947,7 @@
                             data-toggle="tab"
                             data-target="#music"
                             href="javascript:;"
-                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200 dark:hover:bg-dark-2"
+                            class="py-2 flex justify-center flex-1 rounded hover:bg-gray-200:bg-dark-2"
                           >
                             <svg
                               class="w-4 h-4"
@@ -970,17 +970,17 @@
                             >
                               <div class="grid grid-cols-8 text-2xl">
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😂
                                 </button>
@@ -997,2237 +997,2237 @@
                             >
                               <div class="grid grid-cols-8 text-2xl">
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☺️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☹️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☠️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   😾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;⚕️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;⚕️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🎓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🎓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🏫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🏫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;⚖️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;⚖️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🌾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🌾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🍳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🍳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🔧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🔧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🏭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🏭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;💼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;💼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🔬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🔬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;💻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;💻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🎤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🎤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🎨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🎨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;✈️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;✈️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🚀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🚀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;🚒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;🚒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👮&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👮&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕵️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕵️&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕵️&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💂&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💂&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👷&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👷&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👳&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👳&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👱&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👱&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧙&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧙&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧚&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧚&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧛&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧛&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧜&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧜&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧝&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧝&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧞&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧞&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧟&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧟&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙍&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙍&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙎&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙎&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙅&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙅&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙆&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙆&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💁&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💁&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙋&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙋&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙇&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙇&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤦&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤦&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤷&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤷&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💆&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💆&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💇&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💇&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚶&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚶&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏃&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏃&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👯&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👯&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧖&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧖&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧗&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧗&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧘&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧘&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕴️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗣️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛷️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏌️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏌️&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏌️&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏄&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏄&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚣&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚣&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏊&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏊&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛹️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛹️&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛹️&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏋️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏋️&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏋️&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚴&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚴&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚵&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚵&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏎️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏍️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤸&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤸&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤼&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤼&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤽&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤽&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤾&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤾&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤹&zwj;♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤹&zwj;♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;❤️&zwj;💋&zwj;👨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;❤️&zwj;💋&zwj;👨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;❤️&zwj;💋&zwj;👩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;❤️&zwj;👨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;❤️&zwj;👨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;❤️&zwj;👩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👩&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👩&zwj;👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👩&zwj;👧&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👩&zwj;👦&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👩&zwj;👧&zwj;👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👨&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👨&zwj;👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👨&zwj;👧&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👨&zwj;👦&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👨&zwj;👧&zwj;👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;👩&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;👩&zwj;👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;👩&zwj;👧&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;👩&zwj;👦&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;👩&zwj;👧&zwj;👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👦&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👧&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👨&zwj;👧&zwj;👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;👦&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;👧&zwj;👦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👩&zwj;👧&zwj;👧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☝️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✌️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖐️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✍️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🙏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🤝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👁️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👁️&zwj;🗨️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ❤️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ❣️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗨️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗯️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕳️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕶️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛍️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   👒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛑️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💎
                                 </button>
@@ -3241,567 +3241,567 @@
                             >
                               <div class="grid grid-cols-8 text-2xl">
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐿️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕊️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🐞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕷️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕸️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🦂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏵️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☘️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍃
                                 </button>
@@ -3815,512 +3815,512 @@
                             >
                               <div class="grid grid-cols-8 text-2xl">
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌶️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🧀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍽️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🍴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏺
                                 </button>
@@ -4334,302 +4334,302 @@
                             >
                               <div class="grid grid-cols-8 text-2xl">
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎗️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎟️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎖️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛸️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕹️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♠️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♥️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♦️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♣️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🃏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🀄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎴
                                 </button>
@@ -4643,1037 +4643,1037 @@
                             >
                               <div class="grid grid-cols-8 text-2xl">
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗺️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏔️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛰️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏕️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏖️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏜️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏝️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏞️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏟️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏛️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏗️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏘️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏙️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏚️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛩️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♨️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖼️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛣️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛤️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛳️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛴️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛥️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✈️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛩️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛰️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛎️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛏️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛋️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⌛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⌚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏱️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏲️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕰️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌡️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⭐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☁️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛈️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌤️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌥️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌦️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌧️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌨️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌩️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌪️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌫️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌬️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛱️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ❄️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☃️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☄️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🌊
                                 </button>
@@ -5687,812 +5687,812 @@
                             >
                               <div class="grid grid-cols-8 text-2xl">
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎙️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎚️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎛️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🥁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☎️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖥️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖨️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⌨️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖱️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖲️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎞️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📽️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕯️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗞️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏷️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✉️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📥
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗳️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✏️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✒️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖋️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖊️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖌️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖍️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗒️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗓️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📇
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🖇️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗃️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗄️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗑️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗝️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔨
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛏️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚒️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛠️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗡️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚔️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛡️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚙️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗜️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚗️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚖️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛓️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚰️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚱️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🗿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛢️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛒
                                 </button>
@@ -6506,1027 +6506,1027 @@
                             >
                               <div class="grid grid-cols-8 text-2xl">
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🏧
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚮
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚠️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚭
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🚷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔞
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☢️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☣️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⬆️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ↗️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ➡️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ↘️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⬇️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ↙️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⬅️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ↖️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ↕️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ↔️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ↩️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ↪️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⤴️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⤵️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔃
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔄
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔝
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🛐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚛️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕉️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✡️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☸️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☯️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✝️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☦️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☪️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☮️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🕎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♈
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♉
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♊
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♋
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♍
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♏
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⛎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔀
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔂
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ▶️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏩
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏭️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏯️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ◀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏮️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔼
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏬
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏸️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏹️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏺️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⏏️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🎦
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔆
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♀️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚕️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ♻️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚜️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔱
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   📛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⭕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✅
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ☑️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✔️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✖️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ❌
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ❎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ➕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ➖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ➗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ➰
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ➿
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   〽️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✳️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ✴️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ❇️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ‼️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⁉️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ❓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ❔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ❕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ❗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   〰️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ©️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ®️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ™️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   #️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   *️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   0️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   1️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   2️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   3️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   4️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   5️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   6️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   7️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   8️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   9️⃣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔟
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔡
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔢
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔣
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔤
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🅰️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆎
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🅱️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆒
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆓
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ℹ️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆔
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   Ⓜ️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆕
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆖
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🅾️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆗
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🅿️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆙
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🆚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈁
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈂️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈷️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈯
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🉐
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈚
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🉑
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ㊗️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ㊙️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🈵
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ▪️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ▫️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ◻️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ◼️
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ◽
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ◾
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⬛
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⬜
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔶
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔷
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔸
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔹
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔺
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔻
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   💠
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔘
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔲
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔳
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚪
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   ⚫
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔴
                                 </button>
                                 <button
-                                  class="rounded focus:outline-none hover:bg-gray-200 dark:hover:bg-dark-2"
+                                  class="rounded focus:outline-none hover:bg-gray-200:bg-dark-2"
                                 >
                                   🔵
                                 </button>
diff --git a/src/views/CrudDataList.vue b/src/views/CrudDataList.vue
index 98fec3c..269880e 100644
--- a/src/views/CrudDataList.vue
+++ b/src/views/CrudDataList.vue
@@ -10,29 +10,29 @@
         </button>
         <div class="dropdown">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <PlusIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <PrinterIcon class="w-4 h-4 mr-2" /> Print
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <FileTextIcon class="w-4 h-4 mr-2" /> Export to Excel
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <FileTextIcon class="w-4 h-4 mr-2" /> Export to PDF
               </a>
@@ -43,7 +43,7 @@
           Showing 1 to 10 of 150 entries
         </div>
         <div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
-          <div class="w-56 relative text-gray-700 dark:text-gray-300">
+          <div class="w-56 relative text-gray-700">
             <input
               type="text"
               class="input w-56 box pr-10 placeholder-theme-13"
diff --git a/src/views/CrudForm.vue b/src/views/CrudForm.vue
index ee8d92b..a6438a9 100644
--- a/src/views/CrudForm.vue
+++ b/src/views/CrudForm.vue
@@ -46,7 +46,7 @@
                 placeholder="Price"
               />
               <div
-                class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
               >
                 pcs
               </div>
@@ -61,7 +61,7 @@
                 placeholder="Price"
               />
               <div
-                class="absolute top-0 right-0 rounded-r w-16 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                class="absolute top-0 right-0 rounded-r w-16 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
               >
                 grams
               </div>
@@ -72,7 +72,7 @@
             <div class="sm:grid grid-cols-3 gap-2">
               <div class="relative mt-2">
                 <div
-                  class="absolute top-0 left-0 rounded-l w-12 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                  class="absolute top-0 left-0 rounded-l w-12 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                 >
                   Unit
                 </div>
@@ -86,7 +86,7 @@
               </div>
               <div class="relative mt-2">
                 <div
-                  class="absolute top-0 left-0 rounded-l w-20 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                  class="absolute top-0 left-0 rounded-l w-20 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                 >
                   Wholesale
                 </div>
@@ -100,7 +100,7 @@
               </div>
               <div class="relative mt-2">
                 <div
-                  class="absolute top-0 left-0 rounded-l w-12 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                  class="absolute top-0 left-0 rounded-l w-12 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                 >
                   Bulk
                 </div>
@@ -133,7 +133,7 @@
           <div class="text-right mt-5">
             <button
               type="button"
-              class="button w-24 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+              class="button w-24 border text-gray-700 mr-1"
             >
               Cancel
             </button>
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index af4ca2a..727f6d8 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -5,7 +5,7 @@
       <div class="col-span-12 mt-8">
         <div class="intro-y flex items-center h-10">
           <h2 class="text-lg font-medium truncate mr-5">我的资料</h2>
-          <a href="" class="ml-auto flex text-theme-1 dark:text-theme-10">
+          <a href="" class="ml-auto flex text-theme-1">
             <RefreshCcwIcon class="w-4 h-4 mr-3" /> 刷新数据
           </a>
         </div>
@@ -80,7 +80,7 @@
             Sales Report
           </h2>
           <div
-            class="sm:ml-auto mt-3 sm:mt-0 relative text-gray-700 dark:text-gray-300"
+            class="sm:ml-auto mt-3 sm:mt-0 relative text-gray-700"
           >
             <CalendarIcon
               class="w-4 h-4 z-10 absolute my-auto inset-y-0 ml-3 left-0"
@@ -109,58 +109,58 @@
             <div class="flex">
               <div>
                 <div
-                  class="text-theme-20 dark:text-gray-300 text-lg xl:text-xl font-bold"
+                  class="text-theme-20 text-lg xl:text-xl font-bold"
                 >
                   $15,000
                 </div>
-                <div class="text-gray-600 dark:text-gray-600">This Month</div>
+                <div class="text-gray-600">This Month</div>
               </div>
               <div
-                class="w-px h-12 border border-r border-dashed border-gray-300 dark:border-dark-5 mx-4 xl:mx-6"
+                class="w-px h-12 border border-r border-dashed border-gray-300 mx-4 xl:mx-6"
               ></div>
               <div>
                 <div
-                  class="text-gray-600 dark:text-gray-600 text-lg xl:text-xl font-medium"
+                  class="text-gray-600 text-lg xl:text-xl font-medium"
                 >
                   $10,000
                 </div>
-                <div class="text-gray-600 dark:text-gray-600">Last Month</div>
+                <div class="text-gray-600">Last Month</div>
               </div>
             </div>
             <div class="dropdown xl:ml-auto mt-5 xl:mt-0">
               <button
-                class="dropdown-toggle button font-normal border dark:border-dark-5 text-white dark:text-gray-300 relative flex items-center text-gray-700"
+                class="dropdown-toggle button font-normal border text-white relative flex items-center text-gray-700"
               >
                 Filter by Category
                 <ChevronDownIcon class="w-4 h-4 ml-2" />
               </button>
               <div class="dropdown-box w-40">
                 <div
-                  class="dropdown-box__content box dark:bg-dark-1 p-2 overflow-y-auto h-32"
+                  class="dropdown-box__content box p-2 overflow-y-auto h-32"
                 >
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >PC & Laptop</a
                   >
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Smartphone</a
                   >
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Electronic</a
                   >
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Photography</a
                   >
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Sport</a
                   >
                 </div>
@@ -176,7 +176,7 @@
       <div class="col-span-12 sm:col-span-6 lg:col-span-3 mt-8">
         <div class="intro-y flex items-center h-10">
           <h2 class="text-lg font-medium truncate mr-5">Weekly Top Seller</h2>
-          <a href="" class="ml-auto text-theme-1 dark:text-theme-10 truncate"
+          <a href="" class="ml-auto text-theme-1 truncate"
             >See all</a
           >
         </div>
@@ -214,7 +214,7 @@
       <div class="col-span-12 sm:col-span-6 lg:col-span-3 mt-8">
         <div class="intro-y flex items-center h-10">
           <h2 class="text-lg font-medium truncate mr-5">Sales Report</h2>
-          <a href="" class="ml-auto text-theme-1 dark:text-theme-10 truncate"
+          <a href="" class="ml-auto text-theme-1 truncate"
             >See all</a
           >
         </div>
@@ -253,7 +253,7 @@
         <div class="intro-y block sm:flex items-center h-10">
           <h2 class="text-lg font-medium truncate mr-5">Official Store</h2>
           <div
-            class="sm:ml-auto mt-3 sm:mt-0 relative text-gray-700 dark:text-gray-300"
+            class="sm:ml-auto mt-3 sm:mt-0 relative text-gray-700"
           >
             <MapPinIcon
               class="w-4 h-4 z-10 absolute my-auto inset-y-0 ml-3 left-0"
@@ -308,7 +308,7 @@
           </div>
           <a
             href=""
-            class="intro-y w-full block text-center rounded-md py-4 border border-dotted border-theme-15 dark:border-dark-5 text-theme-16 dark:text-gray-600"
+            class="intro-y w-full block text-center rounded-md py-4 border border-dotted border-theme-15 text-theme-16"
             >View More</a
           >
         </div>
@@ -338,7 +338,7 @@
             <div class="flex">
               <div class="text-lg font-medium truncate mr-3">Social Media</div>
               <div
-                class="py-1 px-2 rounded-full text-xs bg-gray-200 dark:bg-dark-5 text-gray-600 dark:text-gray-300 cursor-pointer ml-auto truncate"
+                class="py-1 px-2 rounded-full text-xs bg-gray-200 text-gray-600 cursor-pointer ml-auto truncate"
               >
                 320 Followers
               </div>
@@ -369,7 +369,7 @@
             <div class="flex">
               <div class="text-lg font-medium truncate mr-3">Posted Ads</div>
               <div
-                class="py-1 px-2 rounded-full text-xs bg-gray-200 dark:bg-dark-5 text-gray-600 dark:text-gray-300 cursor-pointer ml-auto truncate"
+                class="py-1 px-2 rounded-full text-xs bg-gray-200 text-gray-600 cursor-pointer ml-auto truncate"
               >
                 180 Campaign
               </div>
@@ -386,13 +386,13 @@
           <h2 class="text-lg font-medium truncate mr-5">Weekly Top Products</h2>
           <div class="flex items-center sm:ml-auto mt-3 sm:mt-0">
             <button
-              class="button box flex items-center text-gray-700 dark:text-gray-300"
+              class="button box flex items-center text-gray-700"
             >
               <FileTextIcon class="hidden sm:block w-4 h-4 mr-2" />
               Export to Excel
             </button>
             <button
-              class="ml-3 button box flex items-center text-gray-700 dark:text-gray-300"
+              class="ml-3 button box flex items-center text-gray-700"
             >
               <FileTextIcon class="hidden sm:block w-4 h-4 mr-2" />
               Export to PDF
@@ -579,7 +579,7 @@
             </div>
             <a
               href=""
-              class="intro-x w-full block text-center rounded-md py-3 border border-dotted border-theme-15 dark:border-dark-5 text-theme-16 dark:text-gray-600"
+              class="intro-x w-full block text-center rounded-md py-3 border border-dotted border-theme-15 text-theme-16"
               >View More</a
             >
           </div>
@@ -591,7 +591,7 @@
         >
           <div class="intro-x flex items-center h-10">
             <h2 class="text-lg font-medium truncate mr-5">Recent Activities</h2>
-            <a href="" class="ml-auto text-theme-1 dark:text-theme-10 truncate"
+            <a href="" class="ml-auto text-theme-1 truncate"
               >See all</a
             >
           </div>
@@ -698,7 +698,7 @@
                 </div>
                 <div class="text-gray-600 mt-1">
                   Has changed
-                  <a class="text-theme-1 dark:text-theme-10" href="">{{
+                  <a class="text-theme-1" href="">{{
                     $f()[7].products[0].name
                   }}</a>
                   price and description
@@ -725,7 +725,7 @@
                 </div>
                 <div class="text-gray-600 mt-1">
                   Has changed
-                  <a class="text-theme-1 dark:text-theme-10" href="">{{
+                  <a class="text-theme-1" href="">{{
                     $f()[6].products[0].name
                   }}</a>
                   description
@@ -744,13 +744,13 @@
               Important Notes
             </h2>
             <button
-              class="slick-navigator button px-2 border border-gray-400 dark:border-dark-5 flex items-center text-gray-700 dark:text-gray-600 mr-2"
+              class="slick-navigator button px-2 border border-gray-400 flex items-center text-gray-700 mr-2"
               @click="prevImportantNotes"
             >
               <ChevronLeftIcon class="w-4 h-4" />
             </button>
             <button
-              class="slick-navigator button px-2 border border-gray-400 dark:border-dark-5 flex items-center text-gray-700 dark:text-gray-600"
+              class="slick-navigator button px-2 border border-gray-400 flex items-center text-gray-700"
               @click="nextImportantNotes"
             >
               <ChevronRightIcon class="w-4 h-4" />
@@ -776,13 +776,13 @@
                   <div class="font-medium flex mt-5">
                     <button
                       type="button"
-                      class="button button--sm bg-gray-200 dark:bg-dark-5 text-gray-600 dark:text-gray-300"
+                      class="button button--sm bg-gray-200 text-gray-600"
                     >
                       View Notes
                     </button>
                     <button
                       type="button"
-                      class="button button--sm border border-gray-300 dark:border-dark-5 text-gray-600 ml-auto"
+                      class="button button--sm border border-gray-300 text-gray-600 ml-auto"
                     >
                       Dismiss
                     </button>
@@ -801,13 +801,13 @@
                   <div class="font-medium flex mt-5">
                     <button
                       type="button"
-                      class="button button--sm bg-gray-200 dark:bg-dark-5 text-gray-600 dark:text-gray-300"
+                      class="button button--sm bg-gray-200 text-gray-600"
                     >
                       View Notes
                     </button>
                     <button
                       type="button"
-                      class="button button--sm border border-gray-300 dark:border-dark-5 text-gray-600 ml-auto"
+                      class="button button--sm border border-gray-300 text-gray-600 ml-auto"
                     >
                       Dismiss
                     </button>
@@ -826,13 +826,13 @@
                   <div class="font-medium flex mt-5">
                     <button
                       type="button"
-                      class="button button--sm bg-gray-200 dark:bg-dark-5 text-gray-600 dark:text-gray-300"
+                      class="button button--sm bg-gray-200 text-gray-600"
                     >
                       View Notes
                     </button>
                     <button
                       type="button"
-                      class="button button--sm border border-gray-300 dark:border-dark-5 text-gray-600 ml-auto"
+                      class="button button--sm border border-gray-300 text-gray-600 ml-auto"
                     >
                       Dismiss
                     </button>
@@ -851,7 +851,7 @@
             <h2 class="text-lg font-medium truncate mr-5">Schedules</h2>
             <a
               href=""
-              class="ml-auto text-theme-1 dark:text-theme-10 truncate flex items-center"
+              class="ml-auto text-theme-1 truncate flex items-center"
             >
               <PlusIcon class="w-4 h-4 mr-1" /> Add New Schedules
             </a>
@@ -881,13 +881,13 @@
                   <div class="py-1 rounded relative">4</div>
                   <div class="py-1 rounded relative">5</div>
                   <div
-                    class="py-1 bg-theme-18 dark:bg-theme-9 rounded relative"
+                    class="py-1 bg-theme-18 rounded relative"
                   >
                     6
                   </div>
                   <div class="py-1 rounded relative">7</div>
                   <div
-                    class="py-1 bg-theme-1 dark:bg-theme-1 text-white rounded relative"
+                    class="py-1 bg-theme-1 text-white rounded relative"
                   >
                     8
                   </div>
@@ -906,7 +906,7 @@
                   <div class="py-1 rounded relative">21</div>
                   <div class="py-1 rounded relative">22</div>
                   <div
-                    class="py-1 bg-theme-17 dark:bg-theme-11 rounded relative"
+                    class="py-1 bg-theme-17 rounded relative"
                   >
                     23
                   </div>
@@ -914,7 +914,7 @@
                   <div class="py-1 rounded relative">25</div>
                   <div class="py-1 rounded relative">26</div>
                   <div
-                    class="py-1 bg-theme-14 dark:bg-theme-12 rounded relative"
+                    class="py-1 bg-theme-14 rounded relative"
                   >
                     27
                   </div>
@@ -943,7 +943,7 @@
                 </div>
                 <div class="flex items-center mt-4">
                   <div
-                    class="w-2 h-2 bg-theme-1 dark:bg-theme-10 rounded-full mr-3"
+                    class="w-2 h-2 bg-theme-1 rounded-full mr-3"
                   ></div>
                   <span class="truncate">VueJs Frontend Development</span>
                   <div
diff --git a/src/views/Datepicker.vue b/src/views/Datepicker.vue
index 948c5da..f3802cb 100644
--- a/src/views/Datepicker.vue
+++ b/src/views/Datepicker.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Basic Datepicker -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Basic Date Picker</h2>
             <div
@@ -42,7 +42,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-basic-datepicker"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -77,7 +77,7 @@
         <!-- BEGIN: Input Group -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Input Group</h2>
             <div
@@ -95,7 +95,7 @@
             <div class="preview">
               <div class="relative w-56 mx-auto">
                 <div
-                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600 dark:bg-dark-1 dark:border-dark-4"
+                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                 >
                   <CalendarIcon class="w-4 h-4" />
                 </div>
@@ -118,7 +118,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-input-group-datepicker"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -133,7 +133,7 @@
                     <textarea>
                       <div class="relative w-56 mx-auto">
                         <div
-                          class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600 dark:bg-dark-1 dark:border-dark-4"
+                          class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                         >
                           <CalendarIcon class="w-4 h-4" />
                         </div>
@@ -165,7 +165,7 @@
         <!-- BEGIN: Daterange Picker -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Date Range Picker</h2>
             <div
@@ -202,7 +202,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-daterangepicker"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -240,7 +240,7 @@
         <!-- BEGIN: Modal Datepicker -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Modal Date Picker</h2>
             <div
@@ -268,13 +268,13 @@
               <div id="datepicker-modal-preview" class="modal">
                 <div class="modal__content">
                   <div
-                    class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+                    class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
                   >
                     <h2 class="font-medium text-base mr-auto">
                       Filter by Date
                     </h2>
                     <button
-                      class="button border items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"
+                      class="button border items-center text-gray-700 hidden sm:flex"
                     >
                       <FileIcon class="w-4 h-4 mr-2" /> Download Docs
                     </button>
@@ -284,16 +284,16 @@
                         href="javascript:;"
                       >
                         <MoreHorizontalIcon
-                          class="w-5 h-5 text-gray-700 dark:text-gray-600"
+                          class="w-5 h-5 text-gray-700"
                         />
                       </a>
                       <div class="dropdown-box w-40">
                         <div
-                          class="dropdown-box__content box dark:bg-dark-1 p-2"
+                          class="dropdown-box__content box p-2"
                         >
                           <a
                             href="javascript:;"
-                            class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                            class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                           >
                             <FileIcon class="w-4 h-4 mr-2" />
                             Download Docs
@@ -339,12 +339,12 @@
                     </div>
                   </div>
                   <div
-                    class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+                    class="px-5 py-3 text-right border-t border-gray-200"
                   >
                     <button
                       type="button"
                       data-dismiss="modal"
-                      class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1"
+                      class="button w-20 border text-gray-700 mr-1"
                     >
                       Cancel
                     </button>
@@ -361,7 +361,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-modal-datepicker"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -383,7 +383,7 @@
                       <div id="datepicker-modal-preview" class="modal">
                         <div class="modal__content">
                           <div
-                            class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+                            class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
                           >
                             <h2 class="font-medium text-base mr-auto">
                               Filter by Date
@@ -400,18 +400,18 @@
                                 href="javascript:;"
                               >
                                 <MoreHorizontalIcon
-                                  class="w-5 h-5 text-gray-700 dark:text-gray-600"
+                                  class="w-5 h-5 text-gray-700"
                                 />
                               </a>
                               <div
                                 class="dropdown-box w-40"
                               >
                                 <div
-                                  class="dropdown-box__content box dark:bg-dark-1 p-2"
+                                  class="dropdown-box__content box p-2"
                                 >
                                   <a
                                     href="javascript:;"
-                                    class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                    class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                   >
                                     <FileIcon class="w-4 h-4 mr-2" />
                                     Download Docs
@@ -457,12 +457,12 @@
                             </div>
                           </div>
                           <div
-                            class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+                            class="px-5 py-3 text-right border-t border-gray-200"
                           >
                             <button
                               type="button"
                               data-dismiss="modal"
-                              class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1"
+                              class="button w-20 border text-gray-700 mr-1"
                             >
                               Cancel
                             </button>
diff --git a/src/views/Dropdown.vue b/src/views/Dropdown.vue
index 46dd5e6..9e36614 100644
--- a/src/views/Dropdown.vue
+++ b/src/views/Dropdown.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Basic Dropdown -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Basic Dropdown</h2>
             <div
@@ -32,15 +32,15 @@
                     Show Dropdown
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -51,7 +51,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-basic-dropdown"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -68,15 +68,15 @@
                           Show Dropdown
                         </button>
                         <div class="dropdown-box w-40">
-                          <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                          <div class="dropdown-box__content box p-2">
                             <a
                               href=""
-                              class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                              class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >New Dropdown</a
                             >
                             <a
                               href=""
-                              class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                              class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >Delete Dropdown</a
                             >
                           </div>
@@ -93,7 +93,7 @@
         <!-- BEGIN: Header & Footer Dropdown -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Header & Footer Dropdown
@@ -119,28 +119,28 @@
                     Show Dropdown
                   </button>
                   <div class="dropdown-box w-56">
-                    <div class="dropdown-box__content box dark:bg-dark-1">
+                    <div class="dropdown-box__content box">
                       <div
-                        class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"
+                        class="p-4 border-b border-gray-200 font-medium"
                       >
                         Export Options
                       </div>
                       <div class="p-2">
                         <a
                           href=""
-                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >
                           <ActivityIcon
-                            class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                            class="w-4 h-4 text-gray-700 mr-2"
                           />
                           Export to PDF
                         </a>
                         <a
                           href=""
-                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >
                           <BoxIcon
-                            class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                            class="w-4 h-4 text-gray-700 mr-2"
                           />
                           Export to Excel
                           <div
@@ -151,25 +151,25 @@
                         </a>
                         <a
                           href=""
-                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >
                           <LayoutIcon
-                            class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                            class="w-4 h-4 text-gray-700 mr-2"
                           />
                           Export to CSV
                         </a>
                         <a
                           href=""
-                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >
                           <SidebarIcon
-                            class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                            class="w-4 h-4 text-gray-700 mr-2"
                           />
                           Export to Word
                         </a>
                       </div>
                       <div
-                        class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"
+                        class="px-3 py-3 border-t border-gray-200 font-medium flex"
                       >
                         <button
                           type="button"
@@ -179,7 +179,7 @@
                         </button>
                         <button
                           type="button"
-                          class="button button--sm bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+                          class="button button--sm bg-gray-200 text-gray-600 ml-auto"
                         >
                           View Profile
                         </button>
@@ -192,7 +192,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-header-footer-dropdown"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -214,28 +214,28 @@
                         <div
                           class="dropdown-box w-56"
                         >
-                          <div class="dropdown-box__content box dark:bg-dark-1">
+                          <div class="dropdown-box__content box">
                             <div
-                              class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"
+                              class="p-4 border-b border-gray-200 font-medium"
                             >
                               Export Options
                             </div>
                             <div class="p-2">
                               <a
                                 href=""
-                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >
                                 <ActivityIcon
-                                  class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                                  class="w-4 h-4 text-gray-700 mr-2"
                                 />
                                 Export to PDF
                               </a>
                               <a
                                 href=""
-                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >
                                 <BoxIcon
-                                  class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                                  class="w-4 h-4 text-gray-700 mr-2"
                                 />
                                 Export to Excel
                                 <div
@@ -246,25 +246,25 @@
                               </a>
                               <a
                                 href=""
-                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >
                                 <LayoutIcon
-                                  class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                                  class="w-4 h-4 text-gray-700 mr-2"
                                 />
                                 Export to CSV
                               </a>
                               <a
                                 href=""
-                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >
                                 <SidebarIcon
-                                  class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                                  class="w-4 h-4 text-gray-700 mr-2"
                                 />
                                 Export to Word
                               </a>
                             </div>
                             <div
-                              class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"
+                              class="px-3 py-3 border-t border-gray-200 font-medium flex"
                             >
                               <button
                                 type="button"
@@ -293,7 +293,7 @@
         <!-- BEGIN: Icon Dropdown -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Icon Dropdown</h2>
             <div
@@ -317,16 +317,16 @@
                     Show Dropdown
                   </button>
                   <div class="dropdown-box w-48">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <Edit2Icon class="w-4 h-4 mr-2" /> New Dropdown
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <TrashIcon class="w-4 h-4 mr-2" /> Delete Dropdown
                       </a>
@@ -338,7 +338,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-icon-dropdown"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -358,18 +358,18 @@
                           class="dropdown-box w-48"
                         >
                           <div
-                            class="dropdown-box__content box dark:bg-dark-1 p-2"
+                            class="dropdown-box__content box p-2"
                           >
                             <a
                               href=""
-                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                             >
                               <Edit2Icon class="w-4 h-4 mr-2" />
                               New Dropdown
                             </a>
                             <a
                               href=""
-                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                             >
                               <TrashIcon class="w-4 h-4 mr-2" />
                               Delete Dropdown
@@ -388,7 +388,7 @@
         <!-- BEGIN: Programmatically Show/Hide Dropdown -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Programmatically Show/Hide Dropdown
@@ -432,15 +432,15 @@
                     Example Dropdown
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -451,7 +451,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-programmatically-show-hide-dropdown"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -483,7 +483,7 @@
         <!-- BEGIN: Dropdown with close button -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Dropdown with close button
@@ -533,7 +533,7 @@
                       <div class="flex items-center mt-3">
                         <button
                           data-dismiss="dropdown"
-                          class="button w-32 justify-center block bg-gray-200 text-gray-600 dark:bg-dark-1 dark:text-gray-300 ml-auto"
+                          class="button w-32 justify-center block bg-gray-200 text-gray-600 ml-auto"
                         >
                           Close
                         </button>
@@ -551,7 +551,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-button-dropdown"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -592,7 +592,7 @@
                             <div class="flex items-center mt-3">
                               <button
                                 data-dismiss="dropdown"
-                                class="button w-32 justify-center block bg-gray-200 text-gray-600 dark:bg-dark-1 dark:text-gray-300 ml-auto"
+                                class="button w-32 justify-center block bg-gray-200 text-gray-600 ml-auto"
                               >
                                 Close
                               </button>
@@ -618,7 +618,7 @@
         <!-- BEGIN: Scrolled Dropdown -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Scrolled Dropdown</h2>
             <div
@@ -643,31 +643,31 @@
                   </button>
                   <div class="dropdown-box w-40">
                     <div
-                      class="dropdown-box__content box dark:bg-dark-1 p-2 overflow-y-auto h-32"
+                      class="dropdown-box__content box p-2 overflow-y-auto h-32"
                     >
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >January</a
                       >
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >February</a
                       >
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >March</a
                       >
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >June</a
                       >
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >July</a
                       >
                     </div>
@@ -678,7 +678,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-scrolled-dropdown"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -698,31 +698,31 @@
                           class="dropdown-box w-40"
                         >
                           <div
-                            class="dropdown-box__content box dark:bg-dark-1 p-2 overflow-y-auto h-32"
+                            class="dropdown-box__content box p-2 overflow-y-auto h-32"
                           >
                             <a
                               href=""
-                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >January</a
                             >
                             <a
                               href=""
-                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >February</a
                             >
                             <a
                               href=""
-                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >March</a
                             >
                             <a
                               href=""
-                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >June</a
                             >
                             <a
                               href=""
-                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                              class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >July</a
                             >
                           </div>
@@ -739,7 +739,7 @@
         <!-- BEGIN: Header & Icon Dropdown -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Header & Icon Dropdown
@@ -765,46 +765,46 @@
                     Show Dropdown
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1">
+                    <div class="dropdown-box__content box">
                       <div
-                        class="px-4 py-2 border-b border-gray-200 dark:border-dark-5 font-medium"
+                        class="px-4 py-2 border-b border-gray-200 font-medium"
                       >
                         Export Tools
                       </div>
                       <div class="p-2">
                         <a
                           href=""
-                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >
                           <PrinterIcon
-                            class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                            class="w-4 h-4 text-gray-700 mr-2"
                           />
                           Print
                         </a>
                         <a
                           href=""
-                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >
                           <ExternalLinkIcon
-                            class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                            class="w-4 h-4 text-gray-700 mr-2"
                           />
                           Excel
                         </a>
                         <a
                           href=""
-                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >
                           <FileTextIcon
-                            class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                            class="w-4 h-4 text-gray-700 mr-2"
                           />
                           CSV
                         </a>
                         <a
                           href=""
-                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                          class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >
                           <ArchiveIcon
-                            class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                            class="w-4 h-4 text-gray-700 mr-2"
                           />
                           PDF
                         </a>
@@ -817,7 +817,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-header-icon-dropdown"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -839,46 +839,46 @@
                         <div
                           class="dropdown-box w-40"
                         >
-                          <div class="dropdown-box__content box dark:bg-dark-1">
+                          <div class="dropdown-box__content box">
                             <div
-                              class="px-4 py-2 border-b border-gray-200 dark:border-dark-5 font-medium"
+                              class="px-4 py-2 border-b border-gray-200 font-medium"
                             >
                               Export Tools
                             </div>
                             <div class="p-2">
                               <a
                                 href=""
-                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >
                                 <PrinterIcon
-                                  class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                                  class="w-4 h-4 text-gray-700 mr-2"
                                 />
                                 Print
                               </a>
                               <a
                                 href=""
-                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >
                                 <ExternalLinkIcon
-                                  class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                                  class="w-4 h-4 text-gray-700 mr-2"
                                 />
                                 Excel
                               </a>
                               <a
                                 href=""
-                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >
                                 <FileTextIcon
-                                  class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                                  class="w-4 h-4 text-gray-700 mr-2"
                                 />
                                 CSV
                               </a>
                               <a
                                 href=""
-                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                               >
                                 <ArchiveIcon
-                                  class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                                  class="w-4 h-4 text-gray-700 mr-2"
                                 />
                                 PDF
                               </a>
@@ -897,7 +897,7 @@
         <!-- BEGIN: Dropdown Placement -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Dropdown Placement</h2>
             <div
@@ -921,15 +921,15 @@
                     Top Start
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -942,15 +942,15 @@
                     Top
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -963,15 +963,15 @@
                     Top End
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -984,15 +984,15 @@
                     Right Start
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -1005,15 +1005,15 @@
                     Right
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -1026,15 +1026,15 @@
                     Right End
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -1047,15 +1047,15 @@
                     Bottom End
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -1068,15 +1068,15 @@
                     Bottom
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -1092,15 +1092,15 @@
                     Bottom Start
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -1113,15 +1113,15 @@
                     Left Start
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -1134,15 +1134,15 @@
                     Left
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -1155,15 +1155,15 @@
                     Left End
                   </button>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >New Dropdown</a
                       >
                       <a
                         href=""
-                        class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                         >Delete Dropdown</a
                       >
                     </div>
@@ -1174,7 +1174,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-dropdown-placement"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -1192,15 +1192,15 @@
                             Top Start
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1213,15 +1213,15 @@
                             Top
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1234,15 +1234,15 @@
                             Top End
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1255,15 +1255,15 @@
                             Right Start
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1276,15 +1276,15 @@
                             Right
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1297,15 +1297,15 @@
                             Right End
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1318,15 +1318,15 @@
                             Bottom End
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1339,15 +1339,15 @@
                             Bottom
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1363,15 +1363,15 @@
                             Bottom Start
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1384,15 +1384,15 @@
                             Left Start
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1405,15 +1405,15 @@
                             Left
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
@@ -1426,15 +1426,15 @@
                             Left End
                           </button>
                           <div class="dropdown-box w-40">
-                            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                            <div class="dropdown-box__content box p-2">
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >New Dropdown</a
                               >
                               <a
                                 href=""
-                                class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                 >Delete Dropdown</a
                               >
                             </div>
diff --git a/src/views/ErrorPage.vue b/src/views/ErrorPage.vue
index 9a0fe4a..440757a 100644
--- a/src/views/ErrorPage.vue
+++ b/src/views/ErrorPage.vue
@@ -21,7 +21,7 @@
             You may have mistyped the address or the page may have moved.
           </div>
           <button
-            class="intro-x button button--lg border border-white dark:border-dark-5 dark:text-gray-300 mt-10"
+            class="intro-x button button--lg border border-white mt-10"
           >
             Back to Home
           </button>
diff --git a/src/views/FaqLayout1.vue b/src/views/FaqLayout1.vue
index 22ef107..37c4c67 100644
--- a/src/views/FaqLayout1.vue
+++ b/src/views/FaqLayout1.vue
@@ -7,9 +7,9 @@
       <!-- BEGIN: FAQ Menu -->
       <a
         href=""
-        class="intro-y col-span-12 lg:col-span-4 box py-10 border-2 border-theme-1 dark:border-theme-1"
+        class="intro-y col-span-12 lg:col-span-4 box py-10 border-2 border-theme-1"
       >
-        <ShieldIcon class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto" />
+        <ShieldIcon class="w-12 h-12 text-theme-1 mx-auto" />
         <div class="font-medium text-center text-base mt-3">
           Single Application
         </div>
@@ -18,7 +18,7 @@
         </div>
       </a>
       <a href="" class="intro-y col-span-12 lg:col-span-4 box py-10">
-        <SendIcon class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto" />
+        <SendIcon class="w-12 h-12 text-theme-1 mx-auto" />
         <div class="font-medium text-center text-base mt-3">
           Multi Application
         </div>
@@ -28,7 +28,7 @@
       </a>
       <a href="" class="intro-y col-span-12 lg:col-span-4 box py-10">
         <TrendingUpIcon
-          class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+          class="w-12 h-12 text-theme-1 mx-auto"
         />
         <div class="font-medium text-center text-base mt-3">Custom License</div>
         <div class="text-gray-600 mt-2 w-3/4 text-center mx-auto">
@@ -39,13 +39,13 @@
       <!-- BEGIN: FAQ Content -->
       <div class="intro-y col-span-12 lg:col-span-6 box">
         <div
-          class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+          class="flex items-center p-5 border-b border-gray-200"
         >
           <h2 class="font-medium text-base mr-auto">Working with Dropplets</h2>
         </div>
         <div class="accordion px-5 py-1">
           <div
-            class="accordion__pane active border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane active border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -54,7 +54,7 @@
               Keys</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -65,7 +65,7 @@
             </div>
           </div>
           <div
-            class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -73,7 +73,7 @@
               >Understanding IP Addresses, Subnets, and CIDR Notation</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -84,7 +84,7 @@
             </div>
           </div>
           <div
-            class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -92,7 +92,7 @@
               >How To Troubleshoot Common HTTP Error Codes</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -109,7 +109,7 @@
               >An Introduction to Securing your Linux VPS</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -123,13 +123,13 @@
       </div>
       <div class="intro-y col-span-12 lg:col-span-6 box">
         <div
-          class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+          class="flex items-center p-5 border-b border-gray-200"
         >
           <h2 class="font-medium text-base mr-auto">Working with Dropplets</h2>
         </div>
         <div class="accordion px-5 py-1">
           <div
-            class="accordion__pane active border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane active border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -138,7 +138,7 @@
               Keys</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -149,7 +149,7 @@
             </div>
           </div>
           <div
-            class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -157,7 +157,7 @@
               >Understanding IP Addresses, Subnets, and CIDR Notation</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -168,7 +168,7 @@
             </div>
           </div>
           <div
-            class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -176,7 +176,7 @@
               >How To Troubleshoot Common HTTP Error Codes</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -193,7 +193,7 @@
               >An Introduction to Securing your Linux VPS</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -207,13 +207,13 @@
       </div>
       <div class="intro-y col-span-12 lg:col-span-6 box">
         <div
-          class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+          class="flex items-center p-5 border-b border-gray-200"
         >
           <h2 class="font-medium text-base mr-auto">Working with Dropplets</h2>
         </div>
         <div class="accordion px-5 py-1">
           <div
-            class="accordion__pane active border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane active border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -222,7 +222,7 @@
               Keys</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -233,7 +233,7 @@
             </div>
           </div>
           <div
-            class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -241,7 +241,7 @@
               >Understanding IP Addresses, Subnets, and CIDR Notation</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -252,7 +252,7 @@
             </div>
           </div>
           <div
-            class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -260,7 +260,7 @@
               >How To Troubleshoot Common HTTP Error Codes</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -277,7 +277,7 @@
               >An Introduction to Securing your Linux VPS</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -291,13 +291,13 @@
       </div>
       <div class="intro-y col-span-12 lg:col-span-6 box">
         <div
-          class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+          class="flex items-center p-5 border-b border-gray-200"
         >
           <h2 class="font-medium text-base mr-auto">Working with Dropplets</h2>
         </div>
         <div class="accordion px-5 py-1">
           <div
-            class="accordion__pane active border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane active border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -306,7 +306,7 @@
               Keys</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -317,7 +317,7 @@
             </div>
           </div>
           <div
-            class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -325,7 +325,7 @@
               >Understanding IP Addresses, Subnets, and CIDR Notation</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -336,7 +336,7 @@
             </div>
           </div>
           <div
-            class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+            class="accordion__pane border-b border-gray-200 py-4"
           >
             <a
               href="javascript:;"
@@ -344,7 +344,7 @@
               >How To Troubleshoot Common HTTP Error Codes</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
@@ -361,7 +361,7 @@
               >An Introduction to Securing your Linux VPS</a
             >
             <div
-              class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+              class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text
diff --git a/src/views/FaqLayout2.vue b/src/views/FaqLayout2.vue
index aa55851..dd616d0 100644
--- a/src/views/FaqLayout2.vue
+++ b/src/views/FaqLayout2.vue
@@ -9,7 +9,7 @@
         <div class="box mt-5">
           <div class="p-5">
             <a
-              class="flex items-center text-theme-1 dark:text-theme-10 font-medium"
+              class="flex items-center text-theme-1 font-medium"
               href=""
             >
               <ActivityIcon class="w-4 h-4 mr-2" /> About Our Products
@@ -24,7 +24,7 @@
               <SettingsIcon class="w-4 h-4 mr-2" /> Multi Application License
             </a>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a class="flex items-center" href="">
               <ActivityIcon class="w-4 h-4 mr-2" /> Trem of Use
             </a>
@@ -38,7 +38,7 @@
               <SettingsIcon class="w-4 h-4 mr-2" /> Privacy Policy
             </a>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a class="flex items-center" href="">
               <ActivityIcon class="w-4 h-4 mr-2" /> About Our Products
             </a>
@@ -59,13 +59,13 @@
       <div class="intro-y col-span-12 lg:col-span-8 xl:col-span-9">
         <div class="intro-y box lg:mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">About Our Products</h2>
           </div>
           <div class="accordion px-5 py-1">
             <div
-              class="accordion__pane active border-b border-gray-200 dark:border-dark-5 py-4"
+              class="accordion__pane active border-b border-gray-200 py-4"
             >
               <a
                 href="javascript:;"
@@ -74,7 +74,7 @@
                 Keys</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -85,7 +85,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+              class="accordion__pane border-b border-gray-200 py-4"
             >
               <a
                 href="javascript:;"
@@ -93,7 +93,7 @@
                 >Understanding IP Addresses, Subnets, and CIDR Notation</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -104,7 +104,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+              class="accordion__pane border-b border-gray-200 py-4"
             >
               <a
                 href="javascript:;"
@@ -112,7 +112,7 @@
                 >How To Troubleshoot Common HTTP Error Codes</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -129,7 +129,7 @@
                 >An Introduction to Securing your Linux VPS</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -143,13 +143,13 @@
         </div>
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Related License</h2>
           </div>
           <div class="accordion px-5 py-1">
             <div
-              class="accordion__pane active border-b border-gray-200 dark:border-dark-5 py-4"
+              class="accordion__pane active border-b border-gray-200 py-4"
             >
               <a
                 href="javascript:;"
@@ -158,7 +158,7 @@
                 Keys</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -169,7 +169,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+              class="accordion__pane border-b border-gray-200 py-4"
             >
               <a
                 href="javascript:;"
@@ -177,7 +177,7 @@
                 >Understanding IP Addresses, Subnets, and CIDR Notation</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -188,7 +188,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+              class="accordion__pane border-b border-gray-200 py-4"
             >
               <a
                 href="javascript:;"
@@ -196,7 +196,7 @@
                 >How To Troubleshoot Common HTTP Error Codes</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -213,7 +213,7 @@
                 >An Introduction to Securing your Linux VPS</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -227,7 +227,7 @@
         </div>
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Single Application License
@@ -235,7 +235,7 @@
           </div>
           <div class="accordion px-5 py-1">
             <div
-              class="accordion__pane active border-b border-gray-200 dark:border-dark-5 py-4"
+              class="accordion__pane active border-b border-gray-200 py-4"
             >
               <a
                 href="javascript:;"
@@ -244,7 +244,7 @@
                 Keys</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -255,7 +255,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+              class="accordion__pane border-b border-gray-200 py-4"
             >
               <a
                 href="javascript:;"
@@ -263,7 +263,7 @@
                 >Understanding IP Addresses, Subnets, and CIDR Notation</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -274,7 +274,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border-b border-gray-200 dark:border-dark-5 py-4"
+              class="accordion__pane border-b border-gray-200 py-4"
             >
               <a
                 href="javascript:;"
@@ -282,7 +282,7 @@
                 >How To Troubleshoot Common HTTP Error Codes</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -299,7 +299,7 @@
                 >An Introduction to Securing your Linux VPS</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
diff --git a/src/views/FaqLayout3.vue b/src/views/FaqLayout3.vue
index 0c9cdbe..4a5e2b2 100644
--- a/src/views/FaqLayout3.vue
+++ b/src/views/FaqLayout3.vue
@@ -28,7 +28,7 @@
               <div class="flex-1 truncate">Multi Application License</div>
             </a>
           </div>
-          <div class="px-4 py-3 border-t border-gray-200 dark:border-dark-5">
+          <div class="px-4 py-3 border-t border-gray-200">
             <a class="flex items-center px-4 py-2" href="">
               <ActivityIcon class="w-4 h-4 mr-2" />
               <div class="flex-1 truncate">Trem of Use</div>
@@ -47,7 +47,7 @@
             </a>
           </div>
           <div
-            class="px-4 pt-3 pb-5 border-t border-gray-200 dark:border-dark-5"
+            class="px-4 pt-3 pb-5 border-t border-gray-200"
           >
             <a class="flex items-center px-4 py-2" href="">
               <ActivityIcon class="w-4 h-4 mr-2" />
@@ -73,13 +73,13 @@
       <div class="intro-y col-span-12 lg:col-span-8 xl:col-span-9">
         <div class="intro-y box lg:mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">About Our Products</h2>
           </div>
           <div class="accordion p-5">
             <div
-              class="accordion__pane active border border-gray-200 dark:border-dark-5 p-4"
+              class="accordion__pane active border border-gray-200 p-4"
             >
               <a
                 href="javascript:;"
@@ -88,7 +88,7 @@
                 Keys</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -99,7 +99,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+              class="accordion__pane border border-gray-200 p-4 mt-3"
             >
               <a
                 href="javascript:;"
@@ -107,7 +107,7 @@
                 >Understanding IP Addresses, Subnets, and CIDR Notation</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -118,7 +118,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+              class="accordion__pane border border-gray-200 p-4 mt-3"
             >
               <a
                 href="javascript:;"
@@ -126,7 +126,7 @@
                 >How To Troubleshoot Common HTTP Error Codes</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -137,7 +137,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+              class="accordion__pane border border-gray-200 p-4 mt-3"
             >
               <a
                 href="javascript:;"
@@ -145,7 +145,7 @@
                 >An Introduction to Securing your Linux VPS</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -159,7 +159,7 @@
         </div>
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Single Application License
@@ -167,7 +167,7 @@
           </div>
           <div class="accordion p-5">
             <div
-              class="accordion__pane active border border-gray-200 dark:border-dark-5 p-4"
+              class="accordion__pane active border border-gray-200 p-4"
             >
               <a
                 href="javascript:;"
@@ -176,7 +176,7 @@
                 Keys</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -187,7 +187,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+              class="accordion__pane border border-gray-200 p-4 mt-3"
             >
               <a
                 href="javascript:;"
@@ -195,7 +195,7 @@
                 >Understanding IP Addresses, Subnets, and CIDR Notation</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -206,7 +206,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+              class="accordion__pane border border-gray-200 p-4 mt-3"
             >
               <a
                 href="javascript:;"
@@ -214,7 +214,7 @@
                 >How To Troubleshoot Common HTTP Error Codes</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -225,7 +225,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+              class="accordion__pane border border-gray-200 p-4 mt-3"
             >
               <a
                 href="javascript:;"
@@ -233,7 +233,7 @@
                 >An Introduction to Securing your Linux VPS</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -247,7 +247,7 @@
         </div>
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Multi Application License
@@ -255,7 +255,7 @@
           </div>
           <div class="accordion p-5">
             <div
-              class="accordion__pane active border border-gray-200 dark:border-dark-5 p-4"
+              class="accordion__pane active border border-gray-200 p-4"
             >
               <a
                 href="javascript:;"
@@ -264,7 +264,7 @@
                 Keys</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -275,7 +275,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+              class="accordion__pane border border-gray-200 p-4 mt-3"
             >
               <a
                 href="javascript:;"
@@ -283,7 +283,7 @@
                 >Understanding IP Addresses, Subnets, and CIDR Notation</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -294,7 +294,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+              class="accordion__pane border border-gray-200 p-4 mt-3"
             >
               <a
                 href="javascript:;"
@@ -302,7 +302,7 @@
                 >How To Troubleshoot Common HTTP Error Codes</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -313,7 +313,7 @@
               </div>
             </div>
             <div
-              class="accordion__pane border border-gray-200 dark:border-dark-5 p-4 mt-3"
+              class="accordion__pane border border-gray-200 p-4 mt-3"
             >
               <a
                 href="javascript:;"
@@ -321,7 +321,7 @@
                 >An Introduction to Securing your Linux VPS</a
               >
               <div
-                class="accordion__pane__content mt-3 text-gray-700 dark:text-gray-600 leading-relaxed"
+                class="accordion__pane__content mt-3 text-gray-700 leading-relaxed"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
diff --git a/src/views/FileManager.vue b/src/views/FileManager.vue
index 7cfddf8..a964b92 100644
--- a/src/views/FileManager.vue
+++ b/src/views/FileManager.vue
@@ -26,7 +26,7 @@
             <TrashIcon class="w-4 h-4 mr-2" /> Trash
           </a>
         </div>
-        <div class="border-t border-gray-200 dark:border-dark-5 mt-5 pt-5">
+        <div class="border-t border-gray-200 mt-5 pt-5">
           <a href="" class="flex items-center px-3 py-2 rounded-md">
             <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>
             Custom Work
@@ -59,11 +59,11 @@
       <div class="intro-y flex flex-col-reverse sm:flex-row items-center">
         <div class="w-full sm:w-auto relative mr-auto mt-3 sm:mt-0">
           <SearchIcon
-            class="w-4 h-4 absolute my-auto inset-y-0 ml-3 left-0 z-10 text-gray-700 dark:text-gray-300"
+            class="w-4 h-4 absolute my-auto inset-y-0 ml-3 left-0 z-10 text-gray-700"
           />
           <input
             type="text"
-            class="input w-full sm:w-64 box px-10 text-gray-700 dark:text-gray-300 placeholder-theme-13"
+            class="input w-full sm:w-64 box px-10 text-gray-700 placeholder-theme-13"
             placeholder="Search files"
           />
           <div
@@ -71,7 +71,7 @@
             data-placement="bottom-start"
           >
             <ChevronDownIcon
-              class="dropdown-toggle w-4 h-4 cursor-pointer text-gray-700 dark:text-gray-300"
+              class="dropdown-toggle w-4 h-4 cursor-pointer text-gray-700"
             />
             <div class="inbox-filter__dropdown-box dropdown-box pt-2">
               <div class="dropdown-box__content box p-5">
@@ -111,7 +111,7 @@
                   </div>
                   <div class="col-span-12 flex items-center mt-3">
                     <button
-                      class="button w-32 justify-center block bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 ml-auto"
+                      class="button w-32 justify-center block bg-gray-200 text-gray-600 ml-auto"
                     >
                       Create Filter
                     </button>
@@ -132,23 +132,23 @@
           </button>
           <div id="test" class="dropdown">
             <button
-              class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+              class="dropdown-toggle button px-2 box text-gray-700"
             >
               <span class="w-5 h-5 flex items-center justify-center">
                 <PlusIcon class="w-4 h-4" />
               </span>
             </button>
             <div class="dropdown-box w-40">
-              <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+              <div class="dropdown-box__content box p-2">
                 <a
                   href="javascript:;"
-                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                 >
                   <FileIcon class="w-4 h-4 mr-2" /> Share Files
                 </a>
                 <a
                   href="javascript:;"
-                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                 >
                   <SettingsIcon class="w-4 h-4 mr-2" /> Settings
                 </a>
@@ -213,16 +213,16 @@
                 <MoreVerticalIcon class="w-5 h-5 text-gray-500" />
               </a>
               <div class="dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2  rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2  rounded-md"
                   >
                     <UsersIcon class="w-4 h-4 mr-2" /> Share File
                   </a>
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2  rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2  rounded-md"
                   >
                     <TrashIcon class="w-4 h-4 mr-2" /> Delete
                   </a>
diff --git a/src/views/FileUpload.vue b/src/views/FileUpload.vue
index cc41239..63d4d2b 100644
--- a/src/views/FileUpload.vue
+++ b/src/views/FileUpload.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Single File Upload -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Single File Upload</h2>
             <div
@@ -48,7 +48,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-single-file-upload"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -89,7 +89,7 @@
         <!-- BEGIN: Multiple File Upload -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Multiple File Upload</h2>
             <div
@@ -128,7 +128,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-multiple-file-upload"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -173,7 +173,7 @@
         <!-- BEGIN: File Type Validation -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">File Type Validation</h2>
             <div
@@ -214,7 +214,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-file-type-validation"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
diff --git a/src/views/ImageZoom.vue b/src/views/ImageZoom.vue
index 13f467e..f5b5577 100644
--- a/src/views/ImageZoom.vue
+++ b/src/views/ImageZoom.vue
@@ -8,7 +8,7 @@
       <div class="intro-y col-span-12 lg:col-span-6">
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Implementation</h2>
             <div
@@ -150,7 +150,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-image-zoom"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
diff --git a/src/views/Inbox.vue b/src/views/Inbox.vue
index 01a6983..7481ef6 100644
--- a/src/views/Inbox.vue
+++ b/src/views/Inbox.vue
@@ -6,16 +6,16 @@
       <div class="intro-y box bg-theme-1 p-5 mt-6">
         <button
           type="button"
-          class="button button--lg flex items-center justify-center text-gray-700 dark:text-gray-300 w-full bg-white dark:bg-theme-1 mt-2"
+          class="button button--lg flex items-center justify-center text-gray-700 w-full bg-white mt-2"
         >
           <Edit3Icon class="w-4 h-4 mr-2" /> Compose
         </button>
         <div
-          class="border-t border-theme-3 dark:border-dark-5 mt-6 pt-6 text-white"
+          class="border-t border-theme-3 mt-6 pt-6 text-white"
         >
           <a
             href=""
-            class="flex items-center px-3 py-2 rounded-md bg-theme-22 dark:bg-dark-1 font-medium"
+            class="flex items-center px-3 py-2 rounded-md bg-theme-22 font-medium"
           >
             <MailIcon class="w-4 h-4 mr-2" /> Inbox
           </a>
@@ -33,7 +33,7 @@
           </a>
         </div>
         <div
-          class="border-t border-theme-3 dark:border-dark-5 mt-5 pt-5 text-white"
+          class="border-t border-theme-3 mt-5 pt-5 text-white"
         >
           <a href="" class="flex items-center px-3 py-2 truncate">
             <div class="w-2 h-2 bg-theme-11 rounded-full mr-3"></div>
@@ -82,11 +82,11 @@
       <div class="intro-y flex flex-col-reverse sm:flex-row items-center">
         <div class="w-full sm:w-auto relative mr-auto mt-3 sm:mt-0">
           <SearchIcon
-            class="w-4 h-4 absolute my-auto inset-y-0 ml-3 left-0 z-10 text-gray-700 dark:text-gray-300"
+            class="w-4 h-4 absolute my-auto inset-y-0 ml-3 left-0 z-10 text-gray-700"
           />
           <input
             type="text"
-            class="input w-full sm:w-64 box px-10 text-gray-700 dark:text-gray-300 placeholder-theme-13"
+            class="input w-full sm:w-64 box px-10 text-gray-700 placeholder-theme-13"
             placeholder="Search mail"
           />
           <div
@@ -94,7 +94,7 @@
             data-placement="bottom-start"
           >
             <ChevronDownIcon
-              class="dropdown-toggle w-4 h-4 cursor-pointer text-gray-700 dark:text-gray-300"
+              class="dropdown-toggle w-4 h-4 cursor-pointer text-gray-700"
             />
             <div class="inbox-filter__dropdown-box dropdown-box pt-2">
               <div class="dropdown-box__content box p-5">
@@ -150,7 +150,7 @@
                   </div>
                   <div class="col-span-12 flex items-center mt-3">
                     <button
-                      class="button w-32 justify-center block bg-gray-200 text-gray-600 dark:bg-dark-1 dark:text-gray-300 ml-auto"
+                      class="button w-32 justify-center block bg-gray-200 text-gray-600 ml-auto"
                     >
                       Create Filter
                     </button>
@@ -171,23 +171,23 @@
           </button>
           <div class="dropdown">
             <button
-              class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+              class="dropdown-toggle button px-2 box text-gray-700"
             >
               <span class="w-5 h-5 flex items-center justify-center">
                 <PlusIcon class="w-4 h-4" />
               </span>
             </button>
             <div class="dropdown-box w-40">
-              <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+              <div class="dropdown-box__content box p-2">
                 <a
                   href=""
-                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                 >
                   <UserIcon class="w-4 h-4 mr-2" /> Contacts
                 </a>
                 <a
                   href=""
-                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                 >
                   <SettingsIcon class="w-4 h-4 mr-2" /> Settings
                 </a>
@@ -200,7 +200,7 @@
       <!-- BEGIN: Inbox Content -->
       <div class="intro-y inbox box mt-5">
         <div
-          class="p-5 flex flex-col-reverse sm:flex-row text-gray-600 border-b border-gray-200 dark:border-dark-1"
+          class="p-5 flex flex-col-reverse sm:flex-row text-gray-600 border-b border-gray-200"
         >
           <div
             class="flex items-center mt-3 sm:mt-0 border-t sm:border-0 border-gray-200 pt-5 sm:pt-0 mt-5 sm:mt-0 -mx-5 sm:mx-0 px-5 sm:px-0"
@@ -208,7 +208,7 @@
             <input class="input border border-gray-500" type="checkbox" />
             <div class="dropdown ml-1" data-placement="bottom-start">
               <a
-                class="dropdown-toggle w-5 h-5 block dark:text-gray-300"
+                class="dropdown-toggle w-5 h-5 block"
                 href="javascript:;"
               >
                 <ChevronDownIcon class="w-5 h-5" />
@@ -217,32 +217,32 @@
                 <div class="dropdown-box__content box p-2">
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >All</a
                   >
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >None</a
                   >
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Read</a
                   >
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Unread</a
                   >
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Starred</a
                   >
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Unstarred</a
                   >
                 </div>
@@ -250,13 +250,13 @@
             </div>
             <a
               href="javascript:;"
-              class="w-5 h-5 ml-5 flex items-center justify-center dark:text-gray-300"
+              class="w-5 h-5 ml-5 flex items-center justify-center"
             >
               <RefreshCwIcon class="w-4 h-4" />
             </a>
             <a
               href="javascript:;"
-              class="w-5 h-5 ml-5 flex items-center justify-center dark:text-gray-300"
+              class="w-5 h-5 ml-5 flex items-center justify-center"
             >
               <MoreHorizontalIcon class="w-4 h-4" />
             </a>
@@ -265,19 +265,19 @@
             <div class="dark:text-gray-300">1 - 50 of 5,238</div>
             <a
               href="javascript:;"
-              class="w-5 h-5 ml-5 flex items-center justify-center dark:text-gray-300"
+              class="w-5 h-5 ml-5 flex items-center justify-center"
             >
               <ChevronLeftIcon class="w-4 h-4" />
             </a>
             <a
               href="javascript:;"
-              class="w-5 h-5 ml-5 flex items-center justify-center dark:text-gray-300"
+              class="w-5 h-5 ml-5 flex items-center justify-center"
             >
               <ChevronRightIcon class="w-4 h-4" />
             </a>
             <a
               href="javascript:;"
-              class="w-5 h-5 ml-5 flex items-center justify-center dark:text-gray-300"
+              class="w-5 h-5 ml-5 flex items-center justify-center"
             >
               <SettingsIcon class="w-4 h-4" />
             </a>
@@ -290,7 +290,7 @@
             class="intro-y"
           >
             <div
-              class="inbox__item inline-block sm:block text-gray-700 dark:text-gray-500 bg-gray-100 dark:bg-dark-1 border-b border-gray-200 dark:border-dark-1"
+              class="inbox__item inline-block sm:block text-gray-700 bg-gray-100 border-b border-gray-200"
               :class="{ 'inbox__item--active': faker.true_false[0] }"
             >
               <div class="flex px-5 py-3">
@@ -342,7 +342,7 @@
           <div class="dark:text-gray-300">
             4.41 GB (25%) of 17 GB used Manage
           </div>
-          <div class="sm:ml-auto mt-2 sm:mt-0 dark:text-gray-300">
+          <div class="sm:ml-auto mt-2 sm:mt-0">
             Last account activity: 36 minutes ago
           </div>
         </div>
diff --git a/src/views/Invitation.vue b/src/views/Invitation.vue
index 650e94f..92809c5 100644
--- a/src/views/Invitation.vue
+++ b/src/views/Invitation.vue
@@ -24,32 +24,32 @@
             <div class="dropdown">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                    class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="dropdown-box w-56">
-                <div class="dropdown-box__content box dark:bg-dark-1">
+                <div class="dropdown-box__content box">
                   <div
-                      class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"
+                      class="p-4 border-b border-gray-200 font-medium"
                   >
                     Export Options
                   </div>
                   <div class="p-2">
                     <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <ActivityIcon
-                          class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                          class="w-4 h-4 text-gray-700 mr-2"
                       />
                       English
                     </a>
                     <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <BoxIcon
-                          class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                          class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Indonesia
                       <div
@@ -60,25 +60,25 @@
                     </a>
                     <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <LayoutIcon
-                          class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                          class="w-4 h-4 text-gray-700 mr-2"
                       />
                       English
                     </a>
                     <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <SidebarIcon
-                          class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                          class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Indonesia
                     </a>
                   </div>
                   <div
-                      class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"
+                      class="px-3 py-3 border-t border-gray-200 font-medium flex"
                   >
                     <button
                         type="button"
@@ -88,7 +88,7 @@
                     </button>
                     <button
                         type="button"
-                        class="button button--sm bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+                        class="button button--sm bg-gray-200 text-gray-600 ml-auto"
                     >
                       View Profile
                     </button>
@@ -97,9 +97,9 @@
               </div>
             </div>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a
-                class="flex items-center text-theme-1 dark:text-theme-10 font-medium"
+                class="flex items-center text-theme-1 font-medium"
                 href=""
             >
               <ActivityIcon class="w-4 h-4 mr-2"/>
@@ -118,7 +118,7 @@
               User Settings
             </a>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a class="flex items-center" href="">
               <ActivityIcon class="w-4 h-4 mr-2"/>
               Email Settings
@@ -136,7 +136,7 @@
               Tax Information
             </a>
           </div>
-          <div class="p-5 border-t flex dark:border-dark-5">
+          <div class="p-5 border-t flex">
             <button
                 type="button"
                 class="button button--sm block bg-theme-1 text-white"
@@ -145,7 +145,7 @@
             </button>
             <button
                 type="button"
-                class="button button--sm border text-gray-700 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+                class="button button--sm border text-gray-700 ml-auto"
             >
               New Quick Link
             </button>
@@ -157,7 +157,7 @@
         <!-- BEGIN: Change Password -->
         <div class="intro-y box lg:mt-5">
           <div
-              class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Change Password</h2>
           </div>
diff --git a/src/views/InvoiceLayout1.vue b/src/views/InvoiceLayout1.vue
index b9ababd..a0eb02a 100644
--- a/src/views/InvoiceLayout1.vue
+++ b/src/views/InvoiceLayout1.vue
@@ -8,23 +8,23 @@
         </button>
         <div class="dropdown ml-auto sm:ml-0">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <PlusIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Export Word
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Export PDF
               </a>
@@ -36,10 +36,10 @@
     <!-- BEGIN: Invoice -->
     <div class="intro-y box overflow-hidden mt-5">
       <div
-        class="border-b border-gray-200 dark:border-dark-5 text-center sm:text-left"
+        class="border-b border-gray-200 text-center sm:text-left"
       >
         <div class="px-5 py-10 sm:px-20 sm:py-20">
-          <div class="text-theme-1 dark:text-theme-10 font-semibold text-3xl">
+          <div class="text-theme-1 font-semibold text-3xl">
             INVOICE
           </div>
           <div class="mt-2">
@@ -53,7 +53,7 @@
           <div class="">
             <div class="text-base text-gray-600">Client Details</div>
             <div
-              class="text-lg font-medium text-theme-1 dark:text-theme-10 mt-2"
+              class="text-lg font-medium text-theme-1 mt-2"
             >
               Arnold Schwarzenegger
             </div>
@@ -63,7 +63,7 @@
           <div class="lg:text-right mt-10 lg:mt-0 lg:ml-auto">
             <div class="text-base text-gray-600">Payment to</div>
             <div
-              class="text-lg font-medium text-theme-1 dark:text-theme-10 mt-2"
+              class="text-lg font-medium text-theme-1 mt-2"
             >
               Left4code
             </div>
@@ -76,21 +76,21 @@
           <table class="table">
             <thead>
               <tr>
-                <th class="border-b-2 dark:border-dark-5 whitespace-no-wrap">
+                <th class="border-b-2 whitespace-no-wrap">
                   DESCRIPTION
                 </th>
                 <th
-                  class="border-b-2 dark:border-dark-5 text-right whitespace-no-wrap"
+                  class="border-b-2 text-right whitespace-no-wrap"
                 >
                   QTY
                 </th>
                 <th
-                  class="border-b-2 dark:border-dark-5 text-right whitespace-no-wrap"
+                  class="border-b-2 text-right whitespace-no-wrap"
                 >
                   PRICE
                 </th>
                 <th
-                  class="border-b-2 dark:border-dark-5 text-right whitespace-no-wrap"
+                  class="border-b-2 text-right whitespace-no-wrap"
                 >
                   SUBTOTAL
                 </th>
@@ -98,7 +98,7 @@
             </thead>
             <tbody>
               <tr>
-                <td class="border-b dark:border-dark-5">
+                <td class="border-b">
                   <div class="font-medium whitespace-no-wrap">
                     Midone HTML Admin Template
                   </div>
@@ -106,16 +106,16 @@
                     Regular License
                   </div>
                 </td>
-                <td class="text-right border-b dark:border-dark-5 w-32">2</td>
-                <td class="text-right border-b dark:border-dark-5 w-32">$25</td>
+                <td class="text-right border-b w-32">2</td>
+                <td class="text-right border-b w-32">$25</td>
                 <td
-                  class="text-right border-b dark:border-dark-5 w-32 font-medium"
+                  class="text-right border-b w-32 font-medium"
                 >
                   $50
                 </td>
               </tr>
               <tr>
-                <td class="border-b dark:border-dark-5">
+                <td class="border-b">
                   <div class="font-medium whitespace-no-wrap">
                     Vuejs Admin Template
                   </div>
@@ -123,16 +123,16 @@
                     Regular License
                   </div>
                 </td>
-                <td class="text-right border-b dark:border-dark-5 w-32">1</td>
-                <td class="text-right border-b dark:border-dark-5 w-32">$25</td>
+                <td class="text-right border-b w-32">1</td>
+                <td class="text-right border-b w-32">$25</td>
                 <td
-                  class="text-right border-b dark:border-dark-5 w-32 font-medium"
+                  class="text-right border-b w-32 font-medium"
                 >
                   $25
                 </td>
               </tr>
               <tr>
-                <td class="border-b dark:border-dark-5">
+                <td class="border-b">
                   <div class="font-medium whitespace-no-wrap">
                     React Admin Template
                   </div>
@@ -140,10 +140,10 @@
                     Regular License
                   </div>
                 </td>
-                <td class="text-right border-b dark:border-dark-5 w-32">1</td>
-                <td class="text-right border-b dark:border-dark-5 w-32">$25</td>
+                <td class="text-right border-b w-32">1</td>
+                <td class="text-right border-b w-32">$25</td>
                 <td
-                  class="text-right border-b dark:border-dark-5 w-32 font-medium"
+                  class="text-right border-b w-32 font-medium"
                 >
                   $25
                 </td>
@@ -170,7 +170,7 @@
       >
         <div class="text-center sm:text-left mt-10 sm:mt-0">
           <div class="text-base text-gray-600">Bank Transfer</div>
-          <div class="text-lg text-theme-1 dark:text-theme-10 font-medium mt-2">
+          <div class="text-lg text-theme-1 font-medium mt-2">
             Elon Musk
           </div>
           <div class="mt-1">Bank Account : 098347234832</div>
@@ -178,7 +178,7 @@
         </div>
         <div class="text-center sm:text-right sm:ml-auto">
           <div class="text-base text-gray-600">Total Amount</div>
-          <div class="text-xl text-theme-1 dark:text-theme-10 font-medium mt-2">
+          <div class="text-xl text-theme-1 font-medium mt-2">
             $20.600.00
           </div>
           <div class="mt-1 tetx-xs">Taxes included</div>
diff --git a/src/views/InvoiceLayout2.vue b/src/views/InvoiceLayout2.vue
index 09750b7..cc58a77 100644
--- a/src/views/InvoiceLayout2.vue
+++ b/src/views/InvoiceLayout2.vue
@@ -8,23 +8,23 @@
         </button>
         <div class="dropdown ml-auto sm:ml-0">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <PlusIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Export Word
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Export PDF
               </a>
@@ -38,11 +38,11 @@
       <div
         class="flex flex-col lg:flex-row pt-10 px-5 sm:px-20 sm:pt-20 lg:pb-20 text-center sm:text-left"
       >
-        <div class="font-semibold text-theme-1 dark:text-theme-10 text-3xl">
+        <div class="font-semibold text-theme-1 text-3xl">
           INVOICE
         </div>
         <div class="mt-20 lg:mt-0 lg:ml-auto lg:text-right">
-          <div class="text-xl text-theme-1 dark:text-theme-10 font-medium">
+          <div class="text-xl text-theme-1 font-medium">
             Left4code
           </div>
           <div class="mt-1">left4code@gmail.com</div>
@@ -54,7 +54,7 @@
       >
         <div>
           <div class="text-base text-gray-600">Client Details</div>
-          <div class="text-lg font-medium text-theme-1 dark:text-theme-10 mt-2">
+          <div class="text-lg font-medium text-theme-1 mt-2">
             Arnold Schwarzenegger
           </div>
           <div class="mt-1">arnodlschwarzenegger@gmail.com</div>
@@ -62,7 +62,7 @@
         </div>
         <div class="mt-10 lg:mt-0 lg:ml-auto lg:text-right">
           <div class="text-base text-gray-600">Receipt</div>
-          <div class="text-lg text-theme-1 dark:text-theme-10 font-medium mt-2">
+          <div class="text-lg text-theme-1 font-medium mt-2">
             #1923195
           </div>
           <div class="mt-1">Jan 02, 2021</div>
@@ -73,21 +73,21 @@
           <table class="table">
             <thead>
               <tr>
-                <th class="border-b-2 dark:border-dark-5 whitespace-no-wrap">
+                <th class="border-b-2 whitespace-no-wrap">
                   DESCRIPTION
                 </th>
                 <th
-                  class="border-b-2 dark:border-dark-5 text-right whitespace-no-wrap"
+                  class="border-b-2 text-right whitespace-no-wrap"
                 >
                   QTY
                 </th>
                 <th
-                  class="border-b-2 dark:border-dark-5 text-right whitespace-no-wrap"
+                  class="border-b-2 text-right whitespace-no-wrap"
                 >
                   PRICE
                 </th>
                 <th
-                  class="border-b-2 dark:border-dark-5 text-right whitespace-no-wrap"
+                  class="border-b-2 text-right whitespace-no-wrap"
                 >
                   SUBTOTAL
                 </th>
@@ -95,7 +95,7 @@
             </thead>
             <tbody>
               <tr>
-                <td class="border-b dark:border-dark-5">
+                <td class="border-b">
                   <div class="font-medium whitespace-no-wrap">
                     Midone HTML Admin Template
                   </div>
@@ -103,16 +103,16 @@
                     Regular License
                   </div>
                 </td>
-                <td class="text-right border-b dark:border-dark-5 w-32">2</td>
-                <td class="text-right border-b dark:border-dark-5 w-32">$25</td>
+                <td class="text-right border-b w-32">2</td>
+                <td class="text-right border-b w-32">$25</td>
                 <td
-                  class="text-right border-b dark:border-dark-5 w-32 font-medium"
+                  class="text-right border-b w-32 font-medium"
                 >
                   $50
                 </td>
               </tr>
               <tr>
-                <td class="border-b dark:border-dark-5">
+                <td class="border-b">
                   <div class="font-medium whitespace-no-wrap">
                     Vuejs Admin Template
                   </div>
@@ -120,16 +120,16 @@
                     Regular License
                   </div>
                 </td>
-                <td class="text-right border-b dark:border-dark-5 w-32">1</td>
-                <td class="text-right border-b dark:border-dark-5 w-32">$25</td>
+                <td class="text-right border-b w-32">1</td>
+                <td class="text-right border-b w-32">$25</td>
                 <td
-                  class="text-right border-b dark:border-dark-5 w-32 font-medium"
+                  class="text-right border-b w-32 font-medium"
                 >
                   $25
                 </td>
               </tr>
               <tr>
-                <td class="border-b dark:border-dark-5">
+                <td class="border-b">
                   <div class="font-medium whitespace-no-wrap">
                     React Admin Template
                   </div>
@@ -137,10 +137,10 @@
                     Regular License
                   </div>
                 </td>
-                <td class="text-right border-b dark:border-dark-5 w-32">1</td>
-                <td class="text-right border-b dark:border-dark-5 w-32">$25</td>
+                <td class="text-right border-b w-32">1</td>
+                <td class="text-right border-b w-32">$25</td>
                 <td
-                  class="text-right border-b dark:border-dark-5 w-32 font-medium"
+                  class="text-right border-b w-32 font-medium"
                 >
                   $25
                 </td>
@@ -167,7 +167,7 @@
       >
         <div class="text-center sm:text-left mt-10 sm:mt-0">
           <div class="text-base text-gray-600">Bank Transfer</div>
-          <div class="text-lg text-theme-1 dark:text-theme-10 font-medium mt-2">
+          <div class="text-lg text-theme-1 font-medium mt-2">
             Elon Musk
           </div>
           <div class="mt-1">Bank Account : 098347234832</div>
@@ -175,7 +175,7 @@
         </div>
         <div class="text-center sm:text-right sm:ml-auto">
           <div class="text-base text-gray-600">Total Amount</div>
-          <div class="text-xl text-theme-1 dark:text-theme-10 font-medium mt-2">
+          <div class="text-xl text-theme-1 font-medium mt-2">
             $20.600.00
           </div>
           <div class="mt-1 tetx-xs">Taxes included</div>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index aa9e750..2b85137 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -26,7 +26,7 @@
               A few more clicks to <br />
               sign in to your account.
             </div>
-            <div class="-intro-x mt-5 text-lg text-white dark:text-gray-500">
+            <div class="-intro-x mt-5 text-lg text-white">
               Manage all your e-commerce accounts in one place
             </div>
           </div>
@@ -59,7 +59,7 @@
               />
             </div>
             <div
-              class="intro-x flex text-gray-700 dark:text-gray-600 text-xs sm:text-sm mt-4"
+              class="intro-x flex text-gray-700 text-xs sm:text-sm mt-4"
             >
               <div class="flex items-center mr-auto">
                 <input
@@ -80,20 +80,20 @@
                 Login
               </button>
               <button
-                class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 dark:border-dark-5 dark:text-gray-300 mt-3 xl:mt-0 align-top"
+                class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 mt-3 xl:mt-0 align-top"
               >
                 Sign up
               </button>
             </div>
             <div
-              class="intro-x mt-10 xl:mt-24 text-gray-700 dark:text-gray-600 text-center xl:text-left"
+              class="intro-x mt-10 xl:mt-24 text-gray-700 text-center xl:text-left"
             >
               By signin up, you agree to our <br />
-              <a class="text-theme-1 dark:text-theme-10" href=""
+              <a class="text-theme-1" href=""
                 >Terms and Conditions</a
               >
               &
-              <a class="text-theme-1 dark:text-theme-10" href=""
+              <a class="text-theme-1" href=""
                 >Privacy Policy</a
               >
             </div>
diff --git a/src/views/Modal.vue b/src/views/Modal.vue
index f0a6908..537b460 100644
--- a/src/views/Modal.vue
+++ b/src/views/Modal.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Blank Modal -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Blank Modal</h2>
             <div
@@ -42,7 +42,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-blank-modal"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -77,7 +77,7 @@
         <!-- BEGIN: Modal Size -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Modal Size</h2>
             <div
@@ -147,7 +147,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-modal-size"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -224,7 +224,7 @@
         <!-- BEGIN: Programmatically Show/Hide Modal -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Programmatically Show/Hide Modal
@@ -270,7 +270,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-programmatically-show-hide-modal"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -302,7 +302,7 @@
         <!-- BEGIN: Warning Modal -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Warning Modal</h2>
             <div
@@ -344,9 +344,9 @@
                     </button>
                   </div>
                   <div
-                    class="p-5 text-center border-t border-gray-200 dark:border-dark-5"
+                    class="p-5 text-center border-t border-gray-200"
                   >
-                    <a href="" class="text-theme-1 dark:text-theme-10"
+                    <a href="" class="text-theme-1"
                       >Why do I have this issue?</a
                     >
                   </div>
@@ -356,7 +356,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-warning-modal"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -396,9 +396,9 @@
                             </button>
                           </div>
                           <div
-                            class="p-5 text-center border-t border-gray-200 dark:border-dark-5"
+                            class="p-5 text-center border-t border-gray-200"
                           >
-                            <a href="" class="text-theme-1 dark:text-theme-10"
+                            <a href="" class="text-theme-1"
                               >Why do I have this issue?</a
                             >
                           </div>
@@ -415,7 +415,7 @@
         <!-- BEGIN: Modal With Close Button -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Modal With Close Button
@@ -475,7 +475,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-button-modal"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -536,7 +536,7 @@
         <!-- BEGIN: Overlapping Modal -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Overlapping Modal</h2>
             <div
@@ -588,7 +588,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-overlapping-modal"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -641,7 +641,7 @@
         <!-- BEGIN: Header & Footer Modal -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Header & Footer Modal</h2>
             <div
@@ -669,13 +669,13 @@
               <div id="header-footer-modal-preview" class="modal">
                 <div class="modal__content">
                   <div
-                    class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+                    class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
                   >
                     <h2 class="font-medium text-base mr-auto">
                       Broadcast Message
                     </h2>
                     <button
-                      class="button border items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"
+                      class="button border items-center text-gray-700 hidden sm:flex"
                     >
                       <FileIcon class="w-4 h-4 mr-2" /> Download Docs
                     </button>
@@ -685,16 +685,16 @@
                         href="javascript:;"
                       >
                         <MoreHorizontalIcon
-                          class="w-5 h-5 text-gray-700 dark:text-gray-600"
+                          class="w-5 h-5 text-gray-700"
                         />
                       </a>
                       <div class="dropdown-box w-40">
                         <div
-                          class="dropdown-box__content box dark:bg-dark-1 p-2"
+                          class="dropdown-box__content box p-2"
                         >
                           <a
                             href="javascript:;"
-                            class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                            class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                           >
                             <FileIcon class="w-4 h-4 mr-2" />
                             Download Docs
@@ -755,12 +755,12 @@
                     </div>
                   </div>
                   <div
-                    class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+                    class="px-5 py-3 text-right border-t border-gray-200"
                   >
                     <button
                       type="button"
                       data-dismiss="modal"
-                      class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1"
+                      class="button w-20 border text-gray-700 mr-1"
                     >
                       Cancel
                     </button>
@@ -777,7 +777,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-header-footer-modal"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -799,13 +799,13 @@
                       <div id="header-footer-modal-preview" class="modal">
                         <div class="modal__content">
                           <div
-                            class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+                            class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
                           >
                             <h2 class="font-medium text-base mr-auto">
                               Broadcast Message
                             </h2>
                             <button
-                              class="button border items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"
+                              class="button border items-center text-gray-700 hidden sm:flex"
                             >
                               <FileIcon class="w-4 h-4 mr-2" />
                               Download Docs
@@ -816,18 +816,18 @@
                                 href="javascript:;"
                               >
                                 <MoreHorizontalIcon
-                                  class="w-5 h-5 text-gray-700 dark:text-gray-600"
+                                  class="w-5 h-5 text-gray-700"
                                 />
                               </a>
                               <div
                                 class="dropdown-box w-40"
                               >
                                 <div
-                                  class="dropdown-box__content box dark:bg-dark-1 p-2"
+                                  class="dropdown-box__content box p-2"
                                 >
                                   <a
                                     href="javascript:;"
-                                    class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                                    class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                                   >
                                     <FileIcon class="w-4 h-4 mr-2" />
                                     Download Docs
@@ -888,11 +888,11 @@
                             </div>
                           </div>
                           <div
-                            class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+                            class="px-5 py-3 text-right border-t border-gray-200"
                           >
                             <button
                               type="button"
-                              class="button w-20 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1"
+                              class="button w-20 border text-gray-700 mr-1"
                             >
                               Cancel
                             </button>
@@ -916,7 +916,7 @@
         <!-- BEGIN: Delete Modal -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Delete Modal</h2>
             <div
@@ -955,7 +955,7 @@
                     <button
                       type="button"
                       data-dismiss="modal"
-                      class="button w-24 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1"
+                      class="button w-24 border text-gray-700 mr-1"
                     >
                       Cancel
                     </button>
@@ -972,7 +972,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-delete-modal"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -1007,7 +1007,7 @@
                             <button
                               type="button"
                               data-dismiss="modal"
-                              class="button w-24 border text-gray-700 dark:border-dark-5 dark:text-gray-300 mr-1"
+                              class="button w-24 border text-gray-700 mr-1"
                             >
                               Cancel
                             </button>
@@ -1031,7 +1031,7 @@
         <!-- BEGIN: Success Modal -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Success Modal</h2>
             <div
@@ -1082,7 +1082,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-success-modal"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -1134,7 +1134,7 @@
         <!-- BEGIN: Slick Modal -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Slick Modal</h2>
             <div
@@ -1223,7 +1223,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-slick-modal"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
diff --git a/src/views/MyApp.vue b/src/views/MyApp.vue
index 3b3d54d..7872a45 100644
--- a/src/views/MyApp.vue
+++ b/src/views/MyApp.vue
@@ -12,17 +12,17 @@
         >
         <div class="pos-dropdown dropdown ml-auto sm:ml-0">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <ChevronDownIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="pos-dropdown__dropdown-box dropdown-box">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate"
@@ -31,7 +31,7 @@
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate"
@@ -40,7 +40,7 @@
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate"
@@ -56,7 +56,7 @@
       <!-- BEGIN: Item List -->
       <div class="intro-y col-span-12 lg:col-span-8">
         <div class="lg:flex intro-y">
-          <div class="relative text-gray-700 dark:text-gray-300">
+          <div class="relative text-gray-700">
             <input
               type="text"
               class="input input--lg w-full lg:w-64 box pr-10 placeholder-theme-13"
@@ -84,10 +84,10 @@
             <div class="text-gray-600">5 Items</div>
           </div>
           <div
-            class="col-span-12 sm:col-span-4 xxl:col-span-3 box bg-theme-1 dark:bg-theme-1 p-5 cursor-pointer zoom-in"
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box bg-theme-1 p-5 cursor-pointer zoom-in"
           >
             <div class="font-medium text-base text-white">Pancake & Toast</div>
-            <div class="text-theme-25 dark:text-gray-400">8 Items</div>
+            <div class="text-theme-25">8 Items</div>
           </div>
           <div
             class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
@@ -177,7 +177,7 @@
                 href="javascript:;"
                 data-toggle="modal"
                 data-target="#add-item-modal"
-                class="flex items-center p-3 cursor-pointer transition duration-300 ease-in-out bg-white dark:bg-dark-3 hover:bg-gray-200 dark:hover:bg-dark-1 rounded-md"
+                class="flex items-center p-3 cursor-pointer transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-1 rounded-md"
               >
                 <div class="pos__ticket__item-name truncate mr-1">
                   {{ faker.foods[0].name }}
@@ -214,7 +214,7 @@
                 <div>15%</div>
               </div>
               <div
-                class="flex mt-4 pt-4 border-t border-gray-200 dark:border-dark-5"
+                class="flex mt-4 pt-4 border-t border-gray-200"
               >
                 <div class="mr-auto font-medium text-base">Charge</div>
                 <div class="font-medium text-base">$220</div>
@@ -222,7 +222,7 @@
             </div>
             <div class="flex mt-5">
               <button
-                class="button w-32 border border-gray-400 dark:border-dark-5 text-gray-600 dark:text-gray-300"
+                class="button w-32 border border-gray-400 text-gray-600"
               >
                 Clear Items
               </button>
@@ -235,21 +235,21 @@
           </div>
           <div id="details" class="tab-content__pane">
             <div class="box p-5 mt-5">
-              <div class="flex items-center border-b dark:border-dark-5 pb-5">
+              <div class="flex items-center border-b pb-5">
                 <div class="">
                   <div class="text-gray-600">Time</div>
                   <div>02/06/20 02:10 PM</div>
                 </div>
                 <ClockIcon class="w-4 h-4 text-gray-600 ml-auto" />
               </div>
-              <div class="flex items-center border-b dark:border-dark-5 py-5">
+              <div class="flex items-center border-b py-5">
                 <div class="">
                   <div class="text-gray-600">Customer</div>
                   <div>{{ $f()[0].users[0].name }}</div>
                 </div>
                 <UserIcon class="w-4 h-4 text-gray-600 ml-auto" />
               </div>
-              <div class="flex items-center border-b dark:border-dark-5 py-5">
+              <div class="flex items-center border-b py-5">
                 <div class="">
                   <div class="text-gray-600">People</div>
                   <div>3</div>
@@ -273,7 +273,7 @@
     <div id="new-order-modal" class="modal">
       <div class="modal__content">
         <div
-          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
         >
           <h2 class="font-medium text-base mr-auto">New Order</h2>
         </div>
@@ -304,12 +304,12 @@
           </div>
         </div>
         <div
-          class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+          class="px-5 py-3 text-right border-t border-gray-200"
         >
           <button
             type="button"
             data-dismiss="modal"
-            class="button w-32 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+            class="button w-32 border text-gray-700 mr-1"
           >
             Cancel
           </button>
@@ -324,7 +324,7 @@
     <div id="add-item-modal" class="modal">
       <div class="modal__content">
         <div
-          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
         >
           <h2 class="font-medium text-base mr-auto">
             {{ $f()[0].foods[0].name }}
@@ -336,7 +336,7 @@
             <div class="flex mt-2 flex-1">
               <button
                 type="button"
-                class="button w-12 border bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 mr-1"
+                class="button w-12 border bg-gray-200 text-gray-600 mr-1"
               >
                 -
               </button>
@@ -348,7 +348,7 @@
               />
               <button
                 type="button"
-                class="button w-12 border bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 ml-1"
+                class="button w-12 border bg-gray-200 text-gray-600 ml-1"
               >
                 +
               </button>
@@ -363,12 +363,12 @@
           </div>
         </div>
         <div
-          class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+          class="px-5 py-3 text-right border-t border-gray-200"
         >
           <button
             type="button"
             data-dismiss="modal"
-            class="button w-24 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+            class="button w-24 border text-gray-700 mr-1"
           >
             Cancel
           </button>
diff --git a/src/views/PointOfSale.vue b/src/views/PointOfSale.vue
index 3b3d54d..7872a45 100644
--- a/src/views/PointOfSale.vue
+++ b/src/views/PointOfSale.vue
@@ -12,17 +12,17 @@
         >
         <div class="pos-dropdown dropdown ml-auto sm:ml-0">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <ChevronDownIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="pos-dropdown__dropdown-box dropdown-box">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate"
@@ -31,7 +31,7 @@
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate"
@@ -40,7 +40,7 @@
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate"
@@ -56,7 +56,7 @@
       <!-- BEGIN: Item List -->
       <div class="intro-y col-span-12 lg:col-span-8">
         <div class="lg:flex intro-y">
-          <div class="relative text-gray-700 dark:text-gray-300">
+          <div class="relative text-gray-700">
             <input
               type="text"
               class="input input--lg w-full lg:w-64 box pr-10 placeholder-theme-13"
@@ -84,10 +84,10 @@
             <div class="text-gray-600">5 Items</div>
           </div>
           <div
-            class="col-span-12 sm:col-span-4 xxl:col-span-3 box bg-theme-1 dark:bg-theme-1 p-5 cursor-pointer zoom-in"
+            class="col-span-12 sm:col-span-4 xxl:col-span-3 box bg-theme-1 p-5 cursor-pointer zoom-in"
           >
             <div class="font-medium text-base text-white">Pancake & Toast</div>
-            <div class="text-theme-25 dark:text-gray-400">8 Items</div>
+            <div class="text-theme-25">8 Items</div>
           </div>
           <div
             class="col-span-12 sm:col-span-4 xxl:col-span-3 box p-5 cursor-pointer zoom-in"
@@ -177,7 +177,7 @@
                 href="javascript:;"
                 data-toggle="modal"
                 data-target="#add-item-modal"
-                class="flex items-center p-3 cursor-pointer transition duration-300 ease-in-out bg-white dark:bg-dark-3 hover:bg-gray-200 dark:hover:bg-dark-1 rounded-md"
+                class="flex items-center p-3 cursor-pointer transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-1 rounded-md"
               >
                 <div class="pos__ticket__item-name truncate mr-1">
                   {{ faker.foods[0].name }}
@@ -214,7 +214,7 @@
                 <div>15%</div>
               </div>
               <div
-                class="flex mt-4 pt-4 border-t border-gray-200 dark:border-dark-5"
+                class="flex mt-4 pt-4 border-t border-gray-200"
               >
                 <div class="mr-auto font-medium text-base">Charge</div>
                 <div class="font-medium text-base">$220</div>
@@ -222,7 +222,7 @@
             </div>
             <div class="flex mt-5">
               <button
-                class="button w-32 border border-gray-400 dark:border-dark-5 text-gray-600 dark:text-gray-300"
+                class="button w-32 border border-gray-400 text-gray-600"
               >
                 Clear Items
               </button>
@@ -235,21 +235,21 @@
           </div>
           <div id="details" class="tab-content__pane">
             <div class="box p-5 mt-5">
-              <div class="flex items-center border-b dark:border-dark-5 pb-5">
+              <div class="flex items-center border-b pb-5">
                 <div class="">
                   <div class="text-gray-600">Time</div>
                   <div>02/06/20 02:10 PM</div>
                 </div>
                 <ClockIcon class="w-4 h-4 text-gray-600 ml-auto" />
               </div>
-              <div class="flex items-center border-b dark:border-dark-5 py-5">
+              <div class="flex items-center border-b py-5">
                 <div class="">
                   <div class="text-gray-600">Customer</div>
                   <div>{{ $f()[0].users[0].name }}</div>
                 </div>
                 <UserIcon class="w-4 h-4 text-gray-600 ml-auto" />
               </div>
-              <div class="flex items-center border-b dark:border-dark-5 py-5">
+              <div class="flex items-center border-b py-5">
                 <div class="">
                   <div class="text-gray-600">People</div>
                   <div>3</div>
@@ -273,7 +273,7 @@
     <div id="new-order-modal" class="modal">
       <div class="modal__content">
         <div
-          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
         >
           <h2 class="font-medium text-base mr-auto">New Order</h2>
         </div>
@@ -304,12 +304,12 @@
           </div>
         </div>
         <div
-          class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+          class="px-5 py-3 text-right border-t border-gray-200"
         >
           <button
             type="button"
             data-dismiss="modal"
-            class="button w-32 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+            class="button w-32 border text-gray-700 mr-1"
           >
             Cancel
           </button>
@@ -324,7 +324,7 @@
     <div id="add-item-modal" class="modal">
       <div class="modal__content">
         <div
-          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+          class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
         >
           <h2 class="font-medium text-base mr-auto">
             {{ $f()[0].foods[0].name }}
@@ -336,7 +336,7 @@
             <div class="flex mt-2 flex-1">
               <button
                 type="button"
-                class="button w-12 border bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 mr-1"
+                class="button w-12 border bg-gray-200 text-gray-600 mr-1"
               >
                 -
               </button>
@@ -348,7 +348,7 @@
               />
               <button
                 type="button"
-                class="button w-12 border bg-gray-200 dark:bg-dark-1 text-gray-600 dark:text-gray-300 ml-1"
+                class="button w-12 border bg-gray-200 text-gray-600 ml-1"
               >
                 +
               </button>
@@ -363,12 +363,12 @@
           </div>
         </div>
         <div
-          class="px-5 py-3 text-right border-t border-gray-200 dark:border-dark-5"
+          class="px-5 py-3 text-right border-t border-gray-200"
         >
           <button
             type="button"
             data-dismiss="modal"
-            class="button w-24 border dark:border-dark-5 text-gray-700 dark:text-gray-300 mr-1"
+            class="button w-24 border text-gray-700 mr-1"
           >
             Cancel
           </button>
diff --git a/src/views/Post.vue b/src/views/Post.vue
index 54566b7..e0cefc7 100644
--- a/src/views/Post.vue
+++ b/src/views/Post.vue
@@ -5,22 +5,22 @@
       <div class="w-full sm:w-auto flex mt-4 sm:mt-0">
         <div class="dropdown mr-2">
           <button
-            class="dropdown-toggle button box text-gray-700 dark:text-gray-300 flex items-center"
+            class="dropdown-toggle button box text-gray-700 flex items-center"
           >
             English <ChevronDownIcon class="w-4 h-4 ml-2" />
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate">English</span>
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <ActivityIcon class="w-4 h-4 mr-2" />
                 <span class="truncate">Indonesian</span>
@@ -30,7 +30,7 @@
         </div>
         <button
           type="button"
-          class="button box text-gray-700 dark:text-gray-300 mr-2 flex items-center ml-auto sm:ml-0"
+          class="button box text-gray-700 mr-2 flex items-center ml-auto sm:ml-0"
         >
           <EyeIcon class="w-4 h-4 mr-2" /> Preview
         </button>
@@ -41,28 +41,28 @@
             Save <ChevronDownIcon class="w-4 h-4 ml-2" />
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <FileTextIcon class="w-4 h-4 mr-2" /> As New Post
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <FileTextIcon class="w-4 h-4 mr-2" /> As Draft
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <FileTextIcon class="w-4 h-4 mr-2" /> Export to PDF
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <FileTextIcon class="w-4 h-4 mr-2" /> Export to Word
               </a>
@@ -81,7 +81,7 @@
         />
         <div class="post intro-y overflow-hidden box mt-5">
           <div
-            class="post__tabs nav-tabs flex flex-col sm:flex-row bg-gray-200 dark:bg-dark-2 text-gray-600"
+            class="post__tabs nav-tabs flex flex-col sm:flex-row bg-gray-200 text-gray-600"
           >
             <Tippy
               tag="a"
@@ -117,10 +117,10 @@
           <div class="post__content tab-content">
             <div id="content" class="tab-content__pane p-5 active">
               <div
-                class="border border-gray-200 dark:border-dark-5 rounded-md p-5"
+                class="border border-gray-200 rounded-md p-5"
               >
                 <div
-                  class="font-medium flex items-center border-b border-gray-200 dark:border-dark-5 pb-5"
+                  class="font-medium flex items-center border-b border-gray-200 pb-5"
                 >
                   <ChevronDownIcon class="w-4 h-4 mr-2" /> Text Content
                 </div>
@@ -133,10 +133,10 @@
                 </div>
               </div>
               <div
-                class="border border-gray-200 dark:border-dark-5 rounded-md p-5 mt-5"
+                class="border border-gray-200 rounded-md p-5 mt-5"
               >
                 <div
-                  class="font-medium flex items-center border-b border-gray-200 dark:border-dark-5 pb-5"
+                  class="font-medium flex items-center border-b border-gray-200 pb-5"
                 >
                   <ChevronDownIcon class="w-4 h-4 mr-2" />
                   Caption & Images
@@ -153,7 +153,7 @@
                   <div class="mt-3">
                     <label>Upload Image</label>
                     <div
-                      class="border-2 border-dashed dark:border-dark-5 rounded-md mt-3 pt-4"
+                      class="border-2 border-dashed rounded-md mt-3 pt-4"
                     >
                       <div class="flex flex-wrap px-4">
                         <div
@@ -179,7 +179,7 @@
                         class="px-4 pb-4 flex items-center cursor-pointer relative"
                       >
                         <ImageIcon class="w-4 h-4 mr-2" />
-                        <span class="text-theme-1 dark:text-theme-10 mr-1"
+                        <span class="text-theme-1 mr-1"
                           >Upload a file</span
                         >
                         or drag and drop
@@ -204,7 +204,7 @@
             <label>Written By</label>
             <div class="dropdown mt-2">
               <button
-                class="dropdown-toggle button w-full border dark:bg-dark-2 dark:border-dark-4 flex items-center"
+                class="dropdown-toggle button w-full border flex items-center"
               >
                 <div class="w-6 h-6 absolute image-fit mr-3">
                   <img
@@ -219,12 +219,12 @@
                 <ChevronDownIcon class="w-4 h-4 ml-auto" />
               </button>
               <div class="dropdown-box w-full">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     v-for="(faker, fakerKey) in $_.take($f(), 5)"
                     :key="fakerKey"
                     href="javascript:;"
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <div class="w-6 h-6 absolute image-fit mr-3">
                       <img
diff --git a/src/views/PricingLayout1.vue b/src/views/PricingLayout1.vue
index ad9493a..d562b55 100644
--- a/src/views/PricingLayout1.vue
+++ b/src/views/PricingLayout1.vue
@@ -7,15 +7,15 @@
     <div class="intro-y box flex flex-col lg:flex-row mt-5">
       <div class="intro-y flex-1 px-5 py-16">
         <CreditCardIcon
-          class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+          class="w-12 h-12 text-theme-1 mx-auto"
         />
         <div class="text-xl font-medium text-center mt-10">Basic Plan</div>
-        <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+        <div class="text-gray-700 text-center mt-5">
           1 Domain <span class="mx-1">•</span> 10 Users
           <span class="mx-1">•</span> 20 Copies
         </div>
         <div
-          class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+          class="text-gray-600 px-10 text-center mx-auto mt-2"
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting
           industry.
@@ -37,18 +37,18 @@
         </button>
       </div>
       <div
-        class="intro-y border-b border-t lg:border-b-0 lg:border-t-0 flex-1 p-5 lg:border-l lg:border-r border-gray-200 dark:border-dark-5 py-16"
+        class="intro-y border-b border-t lg:border-b-0 lg:border-t-0 flex-1 p-5 lg:border-l lg:border-r border-gray-200 py-16"
       >
         <BriefcaseIcon
-          class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+          class="w-12 h-12 text-theme-1 mx-auto"
         />
         <div class="text-xl font-medium text-center mt-10">Business</div>
-        <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+        <div class="text-gray-700 text-center mt-5">
           1 Domain <span class="mx-1">•</span> 10 Users
           <span class="mx-1">•</span> 20 Copies
         </div>
         <div
-          class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+          class="text-gray-600 px-10 text-center mx-auto mt-2"
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting
           industry.
@@ -71,15 +71,15 @@
       </div>
       <div class="intro-y flex-1 px-5 py-16">
         <ShoppingBagIcon
-          class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+          class="w-12 h-12 text-theme-1 mx-auto"
         />
         <div class="text-xl font-medium text-center mt-10">Enterprise</div>
-        <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+        <div class="text-gray-700 text-center mt-5">
           1 Domain <span class="mx-1">•</span> 10 Users
           <span class="mx-1">•</span> 20 Copies
         </div>
         <div
-          class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+          class="text-gray-600 px-10 text-center mx-auto mt-2"
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting
           industry.
@@ -106,15 +106,15 @@
     <div class="intro-y box flex flex-col lg:flex-row mt-5">
       <div class="intro-y flex-1 px-5 py-16">
         <ActivityIcon
-          class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+          class="w-12 h-12 text-theme-1 mx-auto"
         />
         <div class="text-xl font-medium text-center mt-10">Basic Plan</div>
-        <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+        <div class="text-gray-700 text-center mt-5">
           1 Domain <span class="mx-1">•</span> 10 Users
           <span class="mx-1">•</span> 20 Copies
         </div>
         <div
-          class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+          class="text-gray-600 px-10 text-center mx-auto mt-2"
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting
           industry.
@@ -136,16 +136,16 @@
         </button>
       </div>
       <div
-        class="intro-y border-b border-t lg:border-b-0 lg:border-t-0 flex-1 px-5 lg:border-l lg:border-r border-gray-200 dark:border-dark-5 py-16"
+        class="intro-y border-b border-t lg:border-b-0 lg:border-t-0 flex-1 px-5 lg:border-l lg:border-r border-gray-200 py-16"
       >
-        <BoxIcon class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto" />
+        <BoxIcon class="w-12 h-12 text-theme-1 mx-auto" />
         <div class="text-xl font-medium text-center mt-10">Business</div>
-        <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+        <div class="text-gray-700 text-center mt-5">
           1 Domain <span class="mx-1">•</span> 10 Users
           <span class="mx-1">•</span> 20 Copies
         </div>
         <div
-          class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+          class="text-gray-600 px-10 text-center mx-auto mt-2"
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting
           industry.
@@ -167,14 +167,14 @@
         </button>
       </div>
       <div class="intro-y flex-1 px-5 py-16">
-        <SendIcon class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto" />
+        <SendIcon class="w-12 h-12 text-theme-1 mx-auto" />
         <div class="text-xl font-medium text-center mt-10">Enterprise</div>
-        <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+        <div class="text-gray-700 text-center mt-5">
           1 Domain <span class="mx-1">•</span> 10 Users
           <span class="mx-1">•</span> 20 Copies
         </div>
         <div
-          class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+          class="text-gray-600 px-10 text-center mx-auto mt-2"
         >
           Lorem Ipsum is simply dummy text of the printing and typesetting
           industry.
diff --git a/src/views/PricingLayout2.vue b/src/views/PricingLayout2.vue
index c820e26..cb43e6d 100644
--- a/src/views/PricingLayout2.vue
+++ b/src/views/PricingLayout2.vue
@@ -34,7 +34,7 @@
             class="intro-y flex justify-center flex-col flex-1 text-center sm:px-10 lg:px-5 pb-10 lg:pb-0"
           >
             <div class="font-medium text-lg">Monthly Product Pricing</div>
-            <div class="mt-3 lg:text-justify text-gray-700 dark:text-gray-600">
+            <div class="mt-3 lg:text-justify text-gray-700">
               <p>
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -50,15 +50,15 @@
           </div>
           <div class="intro-y flex-1 box py-16 lg:ml-5 mb-5 lg:mb-0">
             <BriefcaseIcon
-              class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+              class="w-12 h-12 text-theme-1 mx-auto"
             />
             <div class="text-xl font-medium text-center mt-10">Business</div>
-            <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+            <div class="text-gray-700 text-center mt-5">
               1 Domain <span class="mx-1">•</span> 10 Users
               <span class="mx-1">•</span> 20 Copies
             </div>
             <div
-              class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+              class="text-gray-600 px-10 text-center mx-auto mt-2"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry.
@@ -81,15 +81,15 @@
           </div>
           <div class="intro-y flex-1 box py-16 lg:ml-5">
             <ShoppingBagIcon
-              class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+              class="w-12 h-12 text-theme-1 mx-auto"
             />
             <div class="text-xl font-medium text-center mt-10">Enterprise</div>
-            <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+            <div class="text-gray-700 text-center mt-5">
               1 Domain <span class="mx-1">•</span> 10 Users
               <span class="mx-1">•</span> 20 Copies
             </div>
             <div
-              class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+              class="text-gray-600 px-10 text-center mx-auto mt-2"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry.
@@ -119,7 +119,7 @@
             class="intro-y flex justify-center flex-col flex-1 text-center sm:px-10 lg:px-5 pb-10 lg:pb-0"
           >
             <div class="font-medium text-lg">Annual Product Pricing</div>
-            <div class="mt-3 lg:text-justify text-gray-700 dark:text-gray-600">
+            <div class="mt-3 lg:text-justify text-gray-700">
               <p>
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
@@ -135,15 +135,15 @@
           </div>
           <div class="intro-y flex-1 box py-16 lg:ml-5 mb-5 lg:mb-0">
             <BriefcaseIcon
-              class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+              class="w-12 h-12 text-theme-1 mx-auto"
             />
             <div class="text-xl font-medium text-center mt-10">Business</div>
-            <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+            <div class="text-gray-700 text-center mt-5">
               1 Domain <span class="mx-1">•</span> 10 Users
               <span class="mx-1">•</span> 20 Copies
             </div>
             <div
-              class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+              class="text-gray-600 px-10 text-center mx-auto mt-2"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry.
@@ -166,15 +166,15 @@
           </div>
           <div class="intro-y flex-1 box py-16 lg:ml-5">
             <ShoppingBagIcon
-              class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+              class="w-12 h-12 text-theme-1 mx-auto"
             />
             <div class="text-xl font-medium text-center mt-10">Enterprise</div>
-            <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+            <div class="text-gray-700 text-center mt-5">
               1 Domain <span class="mx-1">•</span> 10 Users
               <span class="mx-1">•</span> 20 Copies
             </div>
             <div
-              class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+              class="text-gray-600 px-10 text-center mx-auto mt-2"
             >
               Lorem Ipsum is simply dummy text of the printing and typesetting
               industry.
@@ -206,7 +206,7 @@
       <!-- BEGIN: Pricing Tab -->
       <div class="intro-y flex justify-center mt-6">
         <div
-          class="pricing-tabs nav-tabs box dark:bg-dark-1 rounded-full overflow-hidden flex"
+          class="pricing-tabs nav-tabs box rounded-full overflow-hidden flex"
         >
           <a
             data-toggle="tab"
@@ -237,7 +237,7 @@
             >
               <div class="font-medium text-lg">Monthly Product Pricing</div>
               <div
-                class="mt-3 lg:text-justify text-gray-700 dark:text-gray-600"
+                class="mt-3 lg:text-justify text-gray-700"
               >
                 <p>
                   Lorem Ipsum is simply dummy text of the printing and
@@ -253,18 +253,18 @@
               </div>
             </div>
             <div
-              class="intro-y flex-1 border-t border-b lg:border-t-0 lg:border-b-0 lg:border-l lg:border-r border-gray-200 dark:border-dark-5 py-16 lg:ml-8"
+              class="intro-y flex-1 border-t border-b lg:border-t-0 lg:border-b-0 lg:border-l lg:border-r border-gray-200 py-16 lg:ml-8"
             >
               <BriefcaseIcon
-                class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+                class="w-12 h-12 text-theme-1 mx-auto"
               />
               <div class="text-xl font-medium text-center mt-10">Business</div>
-              <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+              <div class="text-gray-700 text-center mt-5">
                 1 Domain <span class="mx-1">•</span> 10 Users
                 <span class="mx-1">•</span> 20 Copies
               </div>
               <div
-                class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+                class="text-gray-600 px-10 text-center mx-auto mt-2"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry.
@@ -287,17 +287,17 @@
             </div>
             <div class="intro-y flex-1 py-16">
               <ShoppingBagIcon
-                class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+                class="w-12 h-12 text-theme-1 mx-auto"
               />
               <div class="text-xl font-medium text-center mt-10">
                 Enterprise
               </div>
-              <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+              <div class="text-gray-700 text-center mt-5">
                 1 Domain <span class="mx-1">•</span> 10 Users
                 <span class="mx-1">•</span> 20 Copies
               </div>
               <div
-                class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+                class="text-gray-600 px-10 text-center mx-auto mt-2"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry.
@@ -342,18 +342,18 @@
               </div>
             </div>
             <div
-              class="intro-y flex-1 border-t border-b lg:border-t-0 lg:border-b-0 lg:border-l lg:border-r border-gray-200 dark:border-dark-5 py-16 lg:ml-8"
+              class="intro-y flex-1 border-t border-b lg:border-t-0 lg:border-b-0 lg:border-l lg:border-r border-gray-200 py-16 lg:ml-8"
             >
               <BriefcaseIcon
-                class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+                class="w-12 h-12 text-theme-1 mx-auto"
               />
               <div class="text-xl font-medium text-center mt-10">Business</div>
-              <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+              <div class="text-gray-700 text-center mt-5">
                 1 Domain <span class="mx-1">•</span> 10 Users
                 <span class="mx-1">•</span> 20 Copies
               </div>
               <div
-                class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+                class="text-gray-600 px-10 text-center mx-auto mt-2"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry.
@@ -376,17 +376,17 @@
             </div>
             <div class="intro-y flex-1 py-16">
               <ShoppingBagIcon
-                class="w-12 h-12 text-theme-1 dark:text-theme-10 mx-auto"
+                class="w-12 h-12 text-theme-1 mx-auto"
               />
               <div class="text-xl font-medium text-center mt-10">
                 Enterprise
               </div>
-              <div class="text-gray-700 dark:text-gray-600 text-center mt-5">
+              <div class="text-gray-700 text-center mt-5">
                 1 Domain <span class="mx-1">•</span> 10 Users
                 <span class="mx-1">•</span> 20 Copies
               </div>
               <div
-                class="text-gray-600 dark:text-gray-400 px-10 text-center mx-auto mt-2"
+                class="text-gray-600 px-10 text-center mx-auto mt-2"
               >
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry.
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index ada6422..47de53e 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -26,32 +26,32 @@
             <div class="dropdown">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="dropdown-box w-56">
-                <div class="dropdown-box__content box dark:bg-dark-1">
+                <div class="dropdown-box__content box">
                   <div
-                    class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"
+                    class="p-4 border-b border-gray-200 font-medium"
                   >
                     Export Options
                   </div>
                   <div class="p-2">
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <ActivityIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       English
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <BoxIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Indonesia
                       <div
@@ -62,25 +62,25 @@
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <LayoutIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       English
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <SidebarIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Indonesia
                     </a>
                   </div>
                   <div
-                    class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"
+                    class="px-3 py-3 border-t border-gray-200 font-medium flex"
                   >
                     <button
                       type="button"
@@ -90,7 +90,7 @@
                     </button>
                     <button
                       type="button"
-                      class="button button--sm bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+                      class="button button--sm bg-gray-200 text-gray-600 ml-auto"
                     >
                       View Profile
                     </button>
@@ -99,9 +99,9 @@
               </div>
             </div>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a
-              class="flex items-center text-theme-1 dark:text-theme-10 font-medium"
+              class="flex items-center text-theme-1 font-medium"
               href=""
             >
               <ActivityIcon class="w-4 h-4 mr-2" /> Personal Information
@@ -116,7 +116,7 @@
               <SettingsIcon class="w-4 h-4 mr-2" /> User Settings
             </a>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a class="flex items-center" href="">
               <ActivityIcon class="w-4 h-4 mr-2" /> Email Settings
             </a>
@@ -139,7 +139,7 @@
             </button>
             <button
               type="button"
-              class="button button--sm border text-gray-700 dark:border-dark-5 dark:text-gray-300 ml-auto"
+              class="button button--sm border text-gray-700 ml-auto"
             >
               New Quick Link
             </button>
@@ -149,7 +149,7 @@
           <div class="flex items-center">
             <div class="font-medium text-lg">Important Update</div>
             <div
-              class="text-xs bg-white dark:bg-theme-1 dark:text-white text-gray-800 px-1 rounded-md ml-auto"
+              class="text-xs bg-white text-gray-800 px-1 rounded-md ml-auto"
             >
               New
             </div>
@@ -162,13 +162,13 @@
           <div class="font-medium flex mt-5">
             <button
               type="button"
-              class="button button--sm border border-white text-white dark:border-dark-5 dark:text-gray-300"
+              class="button button--sm border border-white text-white"
             >
               Take Action
             </button>
             <button
               type="button"
-              class="button button--sm dark:text-gray-500 ml-auto"
+              class="button button--sm ml-auto"
             >
               Dismiss
             </button>
@@ -180,20 +180,20 @@
         <!-- BEGIN: Daily Sales -->
         <div class="intro-y box lg:mt-5">
           <div
-            class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Daily Sales</h2>
             <div class="dropdown ml-auto sm:hidden">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href="javascript:;"
-                    class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <FileIcon class="w-4 h-4 mr-2" /> Download Excel
                   </a>
@@ -201,7 +201,7 @@
               </div>
             </div>
             <button
-              class="button border relative flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"
+              class="button border relative flex items-center text-gray-700 hidden sm:flex"
             >
               <FileIcon class="w-4 h-4 mr-2" /> Download Excel
             </button>
@@ -221,7 +221,7 @@
                   Bootstrap 4 HTML Admin Template
                 </div>
               </div>
-              <div class="font-medium text-gray-700 dark:text-gray-500">
+              <div class="font-medium text-gray-700">
                 +$19
               </div>
             </div>
@@ -239,7 +239,7 @@
                   Tailwind HTML Admin Template
                 </div>
               </div>
-              <div class="font-medium text-gray-700 dark:text-gray-500">
+              <div class="font-medium text-gray-700">
                 +$25
               </div>
             </div>
@@ -257,7 +257,7 @@
                   Vuejs HTML Admin Template
                 </div>
               </div>
-              <div class="font-medium text-gray-700 dark:text-gray-500">
+              <div class="font-medium text-gray-700">
                 +$21
               </div>
             </div>
@@ -267,17 +267,17 @@
         <!-- BEGIN: Announcement -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-3 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Announcement</h2>
             <button
-              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700 mr-2"
               @click="prevAnnouncement"
             >
               <ChevronLeftIcon class="w-4 h-4" />
             </button>
             <button
-              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300"
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700"
               @click="nextAnnouncement"
             >
               <ChevronRightIcon class="w-4 h-4" />
@@ -291,19 +291,19 @@
           >
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="flex items-center mt-5">
                 <div
-                  class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium"
+                  class="px-3 py-2 bg-theme-14 text-theme-10 rounded font-medium"
                 >
                   02 June 2021
                 </div>
                 <button
-                  class="button justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                  class="button justify-center block bg-gray-200 text-gray-600 ml-auto"
                 >
                   View Details
                 </button>
@@ -311,19 +311,19 @@
             </div>
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="flex items-center mt-5">
                 <div
-                  class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium"
+                  class="px-3 py-2 bg-theme-14 text-theme-10 rounded font-medium"
                 >
                   02 June 2021
                 </div>
                 <button
-                  class="button justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                  class="button justify-center block bg-gray-200 text-gray-600 ml-auto"
                 >
                   View Details
                 </button>
@@ -331,19 +331,19 @@
             </div>
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="flex items-center mt-5">
                 <div
-                  class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium"
+                  class="px-3 py-2 bg-theme-14 text-theme-10 rounded font-medium"
                 >
                   02 June 2021
                 </div>
                 <button
-                  class="button justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                  class="button justify-center block bg-gray-200 text-gray-600 ml-auto"
                 >
                   View Details
                 </button>
@@ -355,17 +355,17 @@
         <!-- BEGIN: Projects -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-3 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Projects</h2>
             <button
-              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700 mr-2"
               @click="prevNewProjects"
             >
               <ChevronLeftIcon class="w-4 h-4" />
             </button>
             <button
-              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300"
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700"
               @click="nextNewProjects"
             >
               <ChevronRightIcon class="w-4 h-4" />
@@ -379,20 +379,20 @@
           >
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="mt-5">
                 <div class="flex">
-                  <div class="text-gray-700 dark:text-gray-600 mr-auto">
+                  <div class="text-gray-700 mr-auto">
                     Pending Tasks
                   </div>
                   <div class="font-medium">20%</div>
                 </div>
                 <div
-                  class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                  class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                 >
                   <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                 </div>
@@ -400,20 +400,20 @@
             </div>
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="mt-5">
                 <div class="flex">
-                  <div class="text-gray-700 dark:text-gray-600 mr-auto">
+                  <div class="text-gray-700 mr-auto">
                     Pending Tasks
                   </div>
                   <div class="font-medium">20%</div>
                 </div>
                 <div
-                  class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                  class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                 >
                   <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                 </div>
@@ -421,20 +421,20 @@
             </div>
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="mt-5">
                 <div class="flex">
-                  <div class="text-gray-700 dark:text-gray-600 mr-auto">
+                  <div class="text-gray-700 mr-auto">
                     Pending Tasks
                   </div>
                   <div class="font-medium">20%</div>
                 </div>
                 <div
-                  class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                  class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                 >
                   <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                 </div>
@@ -446,17 +446,17 @@
         <!-- BEGIN: Today's Schedule -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-3 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Today's Schedule</h2>
             <button
-              class="slick-navigator button px-2 border text-white relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+              class="slick-navigator button px-2 border text-white relative flex items-center text-gray-700 mr-2"
               @click="prevTodaysSchedule"
             >
               <ChevronLeftIcon class="w-4 h-4" />
             </button>
             <button
-              class="slick-navigator button px-2 border text-white relative flex items-center text-gray-700 dark:text-gray-300"
+              class="slick-navigator button px-2 border text-white relative flex items-center text-gray-700"
               @click="nextTodaysSchedule"
             >
               <ChevronRightIcon class="w-4 h-4" />
@@ -471,7 +471,7 @@
             <div class="px-5 text-center sm:text-left">
               <div class="font-medium">Developing rest API with Laravel 7</div>
               <div
-                class="text-theme-1 dark:text-theme-10 font-medium text-lg mt-2"
+                class="text-theme-1 font-medium text-lg mt-2"
               >
                 11:15AM - 12:30PM
               </div>
@@ -481,7 +481,7 @@
                   1396 Pooh Bear Lane, New Market
                 </div>
                 <button
-                  class="button button--sm justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
+                  class="button button--sm justify-center block bg-gray-200 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
                 >
                   View On Map
                 </button>
@@ -490,7 +490,7 @@
             <div class="px-5 text-center sm:text-left">
               <div class="font-medium">Developing rest API with Laravel 7</div>
               <div
-                class="text-theme-1 dark:text-theme-10 font-medium text-lg mt-2"
+                class="text-theme-1 font-medium text-lg mt-2"
               >
                 11:15AM - 12:30PM
               </div>
@@ -500,7 +500,7 @@
                   1396 Pooh Bear Lane, New Market
                 </div>
                 <button
-                  class="button button--sm justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
+                  class="button button--sm justify-center block bg-gray-200 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
                 >
                   View On Map
                 </button>
@@ -509,7 +509,7 @@
             <div class="px-5 text-center sm:text-left">
               <div class="font-medium">Developing rest API with Laravel 7</div>
               <div
-                class="text-theme-1 dark:text-theme-10 font-medium text-lg mt-2"
+                class="text-theme-1 font-medium text-lg mt-2"
               >
                 11:15AM - 12:30PM
               </div>
@@ -519,7 +519,7 @@
                   1396 Pooh Bear Lane, New Market
                 </div>
                 <button
-                  class="button button--sm justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
+                  class="button button--sm justify-center block bg-gray-200 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
                 >
                   View On Map
                 </button>
@@ -531,26 +531,26 @@
         <!-- BEGIN: Top Products -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Top Products</h2>
             <div class="dropdown ml-auto">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <Edit2Icon class="w-4 h-4 mr-2" /> New Chat
                   </a>
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <TrashIcon class="w-4 h-4 mr-2" /> Delete
                   </a>
@@ -560,13 +560,13 @@
           </div>
           <div class="p-5">
             <div
-              class="boxed-tabs nav-tabs justify-center flex flex-col sm:flex-row text-gray-700 dark:text-gray-300"
+              class="boxed-tabs nav-tabs justify-center flex flex-col sm:flex-row text-gray-700"
             >
               <a
                 data-toggle="tab"
                 data-target="#laravel"
                 href="javascript:;"
-                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box dark:bg-dark-5 text-center sm:mx-2 active"
+                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box text-center sm:mx-2 active"
               >
                 <BoxIcon class="w-6 h-6 mb-2 mx-auto" /> Laravel
               </a>
@@ -574,7 +574,7 @@
                 data-toggle="tab"
                 data-target="#symfony"
                 href="javascript:;"
-                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box dark:bg-dark-5 text-center sm:mx-2"
+                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box text-center sm:mx-2"
               >
                 <InboxIcon class="w-6 h-6 mb-2 mx-auto" />
                 Symfony
@@ -583,7 +583,7 @@
                 data-toggle="tab"
                 data-target="#bootstrap"
                 href="javascript:;"
-                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box dark:bg-dark-5 text-center sm:mx-2"
+                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box text-center sm:mx-2"
               >
                 <ActivityIcon class="w-6 h-6 mb-2 mx-auto" />
                 Bootstrap
@@ -601,7 +601,7 @@
                       +20%
                     </div>
                     <div
-                      class="w-full sm:w-40 h-1 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full sm:w-40 h-1 bg-gray-400 rounded-full"
                     >
                       <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                     </div>
@@ -617,7 +617,7 @@
                       +55%
                     </div>
                     <div
-                      class="w-full sm:w-40 h-1 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full sm:w-40 h-1 bg-gray-400 rounded-full"
                     >
                       <div class="w-2/3 h-full bg-theme-1 rounded-full"></div>
                     </div>
@@ -633,7 +633,7 @@
                       +40%
                     </div>
                     <div
-                      class="w-full sm:w-40 h-1 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full sm:w-40 h-1 bg-gray-400 rounded-full"
                     >
                       <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
                     </div>
@@ -647,29 +647,29 @@
         <!-- BEGIN: Work In Progress -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Work In Progress</h2>
             <div class="dropdown ml-auto sm:hidden">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="nav-tabs dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href="javascript:;"
                     data-toggle="tab"
                     data-target="#new"
-                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >New</a
                   >
                   <a
                     href="javascript:;"
                     data-toggle="tab"
                     data-target="#last-week"
-                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Last Week</a
                   >
                 </div>
@@ -697,20 +697,20 @@
               <div id="work-in-progress-new" class="tab-content__pane active">
                 <div>
                   <div class="flex">
-                    <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                    <div class="text-gray-700 mr-auto">
                       Pending Tasks
                     </div>
                     <div class="font-medium">20%</div>
                   </div>
                   <div
-                    class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                    class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                   >
                     <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                   </div>
                 </div>
                 <div class="mt-5">
                   <div class="flex">
-                    <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                    <div class="text-gray-700 mr-auto">
                       Completed Tasks
                     </div>
                     <div class="font-medium">
@@ -718,27 +718,27 @@
                     </div>
                   </div>
                   <div
-                    class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                    class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                   >
                     <div class="w-1/4 h-full bg-theme-1 rounded-full"></div>
                   </div>
                 </div>
                 <div class="mt-5">
                   <div class="flex">
-                    <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                    <div class="text-gray-700 mr-auto">
                       Tasks In Progress
                     </div>
                     <div class="font-medium">42</div>
                   </div>
                   <div
-                    class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                    class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                   >
                     <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
                   </div>
                 </div>
                 <a
                   href=""
-                  class="button w-40 mx-auto justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 mt-5"
+                  class="button w-40 mx-auto justify-center block bg-gray-200 text-gray-600 mt-5"
                   >View More Details</a
                 >
               </div>
@@ -749,29 +749,29 @@
         <!-- BEGIN: Latest Tasks -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Latest Tasks</h2>
             <div class="dropdown ml-auto sm:hidden">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="nav-tabs dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href="javascript:;"
                     data-toggle="tab"
                     data-target="#new"
-                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >New</a
                   >
                   <a
                     href="javascript:;"
                     data-toggle="tab"
                     data-target="#last-week"
-                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Last Week</a
                   >
                 </div>
@@ -835,7 +835,7 @@
         <!-- BEGIN: General Statistics -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-3 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">General Statistics</h2>
             <div class="dropdown ml-auto">
@@ -844,55 +844,55 @@
                 href="javascript:;"
               >
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <button
-                class="dropdown-toggle button font-normal border dark:border-dark-5 text-white relative items-center text-gray-700 dark:text-gray-300 hidden sm:flex"
+                class="dropdown-toggle button font-normal border text-white relative items-center text-gray-700 hidden sm:flex"
               >
                 Export <ChevronDownIcon class="w-4 h-4 ml-2" />
               </button>
               <div class="dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1">
+                <div class="dropdown-box__content box">
                   <div
-                    class="px-4 py-2 border-b border-gray-200 dark:border-dark-5 font-medium"
+                    class="px-4 py-2 border-b border-gray-200 font-medium"
                   >
                     Export Tools
                   </div>
                   <div class="p-2">
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <PrinterIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Print
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <ExternalLinkIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Excel
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <FileTextIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       CSV
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <ArchiveIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       PDF
                     </a>
@@ -915,38 +915,38 @@
               </div>
               <div class="dropdown mt-3 sm:mt-0 mr-auto sm:mr-0">
                 <button
-                  class="dropdown-toggle button font-normal border dark:border-dark-5 text-white relative flex items-center text-gray-700 dark:text-gray-300"
+                  class="dropdown-toggle button font-normal border text-white relative flex items-center text-gray-700"
                 >
                   Filter by Month
                   <ChevronDownIcon class="w-4 h-4 ml-2" />
                 </button>
                 <div class="dropdown-box w-40">
                   <div
-                    class="dropdown-box__content box dark:bg-dark-1 p-2 overflow-y-auto h-32"
+                    class="dropdown-box__content box p-2 overflow-y-auto h-32"
                   >
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >January</a
                     >
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >February</a
                     >
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >March</a
                     >
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >June</a
                     >
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >July</a
                     >
                   </div>
diff --git a/src/views/ProfileOverview1.vue b/src/views/ProfileOverview1.vue
index 337fd0d..d4866ce 100644
--- a/src/views/ProfileOverview1.vue
+++ b/src/views/ProfileOverview1.vue
@@ -6,7 +6,7 @@
     <!-- BEGIN: Profile Info -->
     <div class="intro-y box px-5 pt-5 mt-5">
       <div
-        class="flex flex-col lg:flex-row border-b border-gray-200 dark:border-dark-5 pb-5 -mx-5"
+        class="flex flex-col lg:flex-row border-b border-gray-200 pb-5 -mx-5"
       >
         <div
           class="flex flex-1 px-5 items-center justify-center lg:justify-start"
@@ -35,7 +35,7 @@
           </div>
         </div>
         <div
-          class="flex mt-6 lg:mt-0 items-center lg:items-start flex-1 flex-col justify-center text-gray-600 dark:text-gray-300 px-5 border-l border-r border-gray-200 dark:border-dark-5 border-t lg:border-t-0 pt-5 lg:pt-0"
+          class="flex mt-6 lg:mt-0 items-center lg:items-start flex-1 flex-col justify-center text-gray-600 px-5 border-l border-r border-gray-200 border-t lg:border-t-0 pt-5 lg:pt-0"
         >
           <div class="truncate sm:whitespace-normal flex items-center">
             <MailIcon class="w-4 h-4 mr-2" />
@@ -51,7 +51,7 @@
           </div>
         </div>
         <div
-          class="mt-6 lg:mt-0 flex-1 px-5 border-t lg:border-0 border-gray-200 dark:border-dark-5 pt-5 lg:pt-0"
+          class="mt-6 lg:mt-0 flex-1 px-5 border-t lg:border-0 border-gray-200 pt-5 lg:pt-0"
         >
           <div class="font-medium text-center lg:text-left lg:mt-5">
             Sales Growth
@@ -114,26 +114,26 @@
           <!-- BEGIN: Top Categories -->
           <div class="intro-y box col-span-12 lg:col-span-6">
             <div
-              class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center p-5 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">Top Categories</h2>
               <div class="dropdown ml-auto">
                 <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                   <MoreHorizontalIcon
-                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                    class="w-5 h-5 text-gray-700"
                   />
                 </a>
                 <div class="dropdown-box w-40">
-                  <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <div class="dropdown-box__content box p-2">
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <PlusIcon class="w-4 h-4 mr-2" /> Add Category
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <SettingsIcon class="w-4 h-4 mr-2" />
                       Settings
@@ -212,29 +212,29 @@
           <!-- BEGIN: Work In Progress -->
           <div class="intro-y box col-span-12 lg:col-span-6">
             <div
-              class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">Work In Progress</h2>
               <div class="dropdown ml-auto sm:hidden">
                 <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                   <MoreHorizontalIcon
-                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                    class="w-5 h-5 text-gray-700"
                   />
                 </a>
                 <div class="nav-tabs dropdown-box w-40">
-                  <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <div class="dropdown-box__content box p-2">
                     <a
                       href="javascript:;"
                       data-toggle="tab"
                       data-target="#new"
-                      class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >New</a
                     >
                     <a
                       href="javascript:;"
                       data-toggle="tab"
                       data-target="#last-week"
-                      class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >Last Week</a
                     >
                   </div>
@@ -262,20 +262,20 @@
                 <div id="work-in-progress-new" class="tab-content__pane active">
                   <div>
                     <div class="flex">
-                      <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                      <div class="text-gray-700 mr-auto">
                         Pending Tasks
                       </div>
                       <div class="font-medium">20%</div>
                     </div>
                     <div
-                      class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                     >
                       <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                     </div>
                   </div>
                   <div class="mt-5">
                     <div class="flex">
-                      <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                      <div class="text-gray-700 mr-auto">
                         Completed Tasks
                       </div>
                       <div class="font-medium">
@@ -283,27 +283,27 @@
                       </div>
                     </div>
                     <div
-                      class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                     >
                       <div class="w-1/4 h-full bg-theme-1 rounded-full"></div>
                     </div>
                   </div>
                   <div class="mt-5">
                     <div class="flex">
-                      <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                      <div class="text-gray-700 mr-auto">
                         Tasks In Progress
                       </div>
                       <div class="font-medium">42</div>
                     </div>
                     <div
-                      class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                     >
                       <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
                     </div>
                   </div>
                   <a
                     href=""
-                    class="button w-40 mx-auto justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 mt-5"
+                    class="button w-40 mx-auto justify-center block bg-gray-200 text-gray-600 mt-5"
                     >View More Details</a
                   >
                 </div>
@@ -314,20 +314,20 @@
           <!-- BEGIN: Daily Sales -->
           <div class="intro-y box col-span-12 lg:col-span-6">
             <div
-              class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">Daily Sales</h2>
               <div class="dropdown ml-auto sm:hidden">
                 <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                   <MoreHorizontalIcon
-                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                    class="w-5 h-5 text-gray-700"
                   />
                 </a>
                 <div class="dropdown-box w-40">
-                  <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <div class="dropdown-box__content box p-2">
                     <a
                       href="javascript:;"
-                      class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <FileIcon class="w-4 h-4 mr-2" /> Download Excel
                     </a>
@@ -335,7 +335,7 @@
                 </div>
               </div>
               <button
-                class="button border relative flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"
+                class="button border relative flex items-center text-gray-700 hidden sm:flex"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Download Excel
               </button>
@@ -355,7 +355,7 @@
                     Bootstrap 4 HTML Admin Template
                   </div>
                 </div>
-                <div class="font-medium text-gray-700 dark:text-gray-600">
+                <div class="font-medium text-gray-700">
                   +$19
                 </div>
               </div>
@@ -373,7 +373,7 @@
                     Tailwind HTML Admin Template
                   </div>
                 </div>
-                <div class="font-medium text-gray-700 dark:text-gray-600">
+                <div class="font-medium text-gray-700">
                   +$25
                 </div>
               </div>
@@ -391,7 +391,7 @@
                     Vuejs HTML Admin Template
                   </div>
                 </div>
-                <div class="font-medium text-gray-700 dark:text-gray-600">
+                <div class="font-medium text-gray-700">
                   +$21
                 </div>
               </div>
@@ -401,29 +401,29 @@
           <!-- BEGIN: Latest Tasks -->
           <div class="intro-y box col-span-12 lg:col-span-6">
             <div
-              class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">Latest Tasks</h2>
               <div class="dropdown ml-auto sm:hidden">
                 <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                   <MoreHorizontalIcon
-                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                    class="w-5 h-5 text-gray-700"
                   />
                 </a>
                 <div class="nav-tabs dropdown-box w-40">
-                  <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <div class="dropdown-box__content box p-2">
                     <a
                       href="javascript:;"
                       data-toggle="tab"
                       data-target="#new"
-                      class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >New</a
                     >
                     <a
                       href="javascript:;"
                       data-toggle="tab"
                       data-target="#last-week"
-                      class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >Last Week</a
                     >
                   </div>
@@ -451,7 +451,7 @@
                 <div id="latest-tasks-new" class="tab-content__pane active">
                   <div class="flex items-center">
                     <div
-                      class="border-l-2 border-theme-1 dark:border-theme-1 pl-4"
+                      class="border-l-2 border-theme-1 pl-4"
                     >
                       <a href="" class="font-medium">Create New Campaign</a>
                       <div class="text-gray-600">10:00 AM</div>
@@ -463,7 +463,7 @@
                   </div>
                   <div class="flex items-center mt-5">
                     <div
-                      class="border-l-2 border-theme-1 dark:border-theme-1 pl-4"
+                      class="border-l-2 border-theme-1 pl-4"
                     >
                       <a href="" class="font-medium">Meeting With Client</a>
                       <div class="text-gray-600">02:00 PM</div>
@@ -475,7 +475,7 @@
                   </div>
                   <div class="flex items-center mt-5">
                     <div
-                      class="border-l-2 border-theme-1 dark:border-theme-1 pl-4"
+                      class="border-l-2 border-theme-1 pl-4"
                     >
                       <a href="" class="font-medium">Create New Repository</a>
                       <div class="text-gray-600">04:00 PM</div>
@@ -493,20 +493,20 @@
           <!-- BEGIN: General Statistic -->
           <div class="intro-y box col-span-12">
             <div
-              class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">General Statistics</h2>
               <div class="dropdown ml-auto sm:hidden">
                 <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                   <MoreHorizontalIcon
-                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                    class="w-5 h-5 text-gray-700"
                   />
                 </a>
                 <div class="dropdown-box w-40">
-                  <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <div class="dropdown-box__content box p-2">
                     <a
                       href="javascript:;"
-                      class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <FileIcon class="w-4 h-4 mr-2" /> Download XML
                     </a>
@@ -514,14 +514,14 @@
                 </div>
               </div>
               <button
-                class="button border relative flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"
+                class="button border relative flex items-center text-gray-700 hidden sm:flex"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Download XML
               </button>
             </div>
             <div class="p-5">
               <div class="grid grid-cols-2 gap-6">
-                <div class="col-span-2 sm:col-span-1 box dark:bg-dark-6 p-5">
+                <div class="col-span-2 sm:col-span-1 box p-5">
                   <div class="font-medium">Net Worth</div>
                   <div class="flex items-center mt-1 sm:mt-0">
                     <div class="mr-2 w-20 flex mr-auto">
@@ -533,7 +533,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="col-span-2 sm:col-span-1 box dark:bg-dark-6 p-5">
+                <div class="col-span-2 sm:col-span-1 box p-5">
                   <div class="font-medium">Sales</div>
                   <div class="flex items-center mt-1 sm:mt-0">
                     <div class="mr-2 w-20 flex mr-auto">
@@ -545,7 +545,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="col-span-2 sm:col-span-1 box dark:bg-dark-6 p-5">
+                <div class="col-span-2 sm:col-span-1 box p-5">
                   <div class="font-medium">Profit</div>
                   <div class="flex items-center mt-1 sm:mt-0">
                     <div class="mr-2 w-20 flex mr-auto">
@@ -557,7 +557,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="col-span-2 sm:col-span-1 box dark:bg-dark-6 p-5">
+                <div class="col-span-2 sm:col-span-1 box p-5">
                   <div class="font-medium">Products</div>
                   <div class="flex items-center mt-1 sm:mt-0">
                     <div class="mr-2 w-20 flex mr-auto">
diff --git a/src/views/ProfileOverview2.vue b/src/views/ProfileOverview2.vue
index 9e504ad..9c4f22b 100644
--- a/src/views/ProfileOverview2.vue
+++ b/src/views/ProfileOverview2.vue
@@ -6,7 +6,7 @@
     <!-- BEGIN: Profile Info -->
     <div class="intro-y box px-5 pt-5 mt-5">
       <div
-        class="flex flex-col lg:flex-row border-b border-gray-200 dark:border-dark-5 pb-5 -mx-5"
+        class="flex flex-col lg:flex-row border-b border-gray-200 pb-5 -mx-5"
       >
         <div
           class="flex flex-1 px-5 items-center justify-center lg:justify-start"
@@ -30,7 +30,7 @@
           </div>
         </div>
         <div
-          class="flex mt-6 lg:mt-0 items-center lg:items-start flex-1 flex-col justify-center text-gray-600 dark:text-gray-300 px-5 border-l border-r border-gray-200 dark:border-dark-5 border-t lg:border-t-0 pt-5 lg:pt-0"
+          class="flex mt-6 lg:mt-0 items-center lg:items-start flex-1 flex-col justify-center text-gray-600 px-5 border-l border-r border-gray-200 border-t lg:border-t-0 pt-5 lg:pt-0"
         >
           <div class="truncate sm:whitespace-normal flex items-center">
             <MailIcon class="w-4 h-4 mr-2" />
@@ -46,22 +46,22 @@
           </div>
         </div>
         <div
-          class="mt-6 lg:mt-0 flex-1 flex items-center justify-center px-5 border-t lg:border-0 border-gray-200 dark:border-dark-5 pt-5 lg:pt-0"
+          class="mt-6 lg:mt-0 flex-1 flex items-center justify-center px-5 border-t lg:border-0 border-gray-200 pt-5 lg:pt-0"
         >
           <div class="text-center rounded-md w-20 py-3">
-            <div class="font-semibold text-theme-1 dark:text-theme-10 text-lg">
+            <div class="font-semibold text-theme-1 text-lg">
               201
             </div>
             <div class="text-gray-600">Orders</div>
           </div>
           <div class="text-center rounded-md w-20 py-3">
-            <div class="font-semibold text-theme-1 dark:text-theme-10 text-lg">
+            <div class="font-semibold text-theme-1 text-lg">
               1k
             </div>
             <div class="text-gray-600">Purchases</div>
           </div>
           <div class="text-center rounded-md w-20 py-3">
-            <div class="font-semibold text-theme-1 dark:text-theme-10 text-lg">
+            <div class="font-semibold text-theme-1 text-lg">
               492
             </div>
             <div class="text-gray-600">Reviews</div>
@@ -112,27 +112,27 @@
           <!-- BEGIN: Latest Uploads -->
           <div class="intro-y box col-span-12 lg:col-span-6">
             <div
-              class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">Latest Uploads</h2>
               <div class="dropdown ml-auto sm:hidden">
                 <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                   <MoreHorizontalIcon
-                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                    class="w-5 h-5 text-gray-700"
                   />
                 </a>
                 <div class="dropdown-box w-40">
-                  <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <div class="dropdown-box__content box p-2">
                     <a
                       href="javascript:;"
-                      class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >All Files</a
                     >
                   </div>
                 </div>
               </div>
               <button
-                class="button border text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"
+                class="button border text-gray-700 hidden sm:flex"
               >
                 All Files
               </button>
@@ -149,20 +149,20 @@
                 <div class="dropdown ml-auto">
                   <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                     <MoreHorizontalIcon
-                      class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                      class="w-5 h-5 text-gray-700"
                     />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <UsersIcon class="w-4 h-4 mr-2" /> Share File
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <TrashIcon class="w-4 h-4 mr-2" /> Delete
                       </a>
@@ -183,20 +183,20 @@
                 <div class="dropdown ml-auto">
                   <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                     <MoreHorizontalIcon
-                      class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                      class="w-5 h-5 text-gray-700"
                     />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <UsersIcon class="w-4 h-4 mr-2" /> Share File
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <TrashIcon class="w-4 h-4 mr-2" /> Delete
                       </a>
@@ -218,20 +218,20 @@
                 <div class="dropdown ml-auto">
                   <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                     <MoreHorizontalIcon
-                      class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                      class="w-5 h-5 text-gray-700"
                     />
                   </a>
                   <div class="dropdown-box w-40">
-                    <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                    <div class="dropdown-box__content box p-2">
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <UsersIcon class="w-4 h-4 mr-2" /> Share File
                       </a>
                       <a
                         href=""
-                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                        class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >
                         <TrashIcon class="w-4 h-4 mr-2" /> Delete
                       </a>
@@ -245,29 +245,29 @@
           <!-- BEGIN: Work In Progress -->
           <div class="intro-y box col-span-12 lg:col-span-6">
             <div
-              class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">Work In Progress</h2>
               <div class="dropdown ml-auto sm:hidden">
                 <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                   <MoreHorizontalIcon
-                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                    class="w-5 h-5 text-gray-700"
                   />
                 </a>
                 <div class="nav-tabs dropdown-box w-40">
-                  <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <div class="dropdown-box__content box p-2">
                     <a
                       href="javascript:;"
                       data-toggle="tab"
                       data-target="#new"
-                      class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >New</a
                     >
                     <a
                       href="javascript:;"
                       data-toggle="tab"
                       data-target="#last-week"
-                      class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >Last Week</a
                     >
                   </div>
@@ -295,20 +295,20 @@
                 <div id="work-in-progress-new" class="tab-content__pane active">
                   <div>
                     <div class="flex">
-                      <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                      <div class="text-gray-700 mr-auto">
                         Pending Tasks
                       </div>
                       <div class="font-medium">20%</div>
                     </div>
                     <div
-                      class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                     >
                       <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                     </div>
                   </div>
                   <div class="mt-5">
                     <div class="flex">
-                      <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                      <div class="text-gray-700 mr-auto">
                         Completed Tasks
                       </div>
                       <div class="font-medium">
@@ -316,27 +316,27 @@
                       </div>
                     </div>
                     <div
-                      class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                     >
                       <div class="w-1/4 h-full bg-theme-1 rounded-full"></div>
                     </div>
                   </div>
                   <div class="mt-5">
                     <div class="flex">
-                      <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                      <div class="text-gray-700 mr-auto">
                         Tasks In Progress
                       </div>
                       <div class="font-medium">42</div>
                     </div>
                     <div
-                      class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                     >
                       <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
                     </div>
                   </div>
                   <a
                     href=""
-                    class="button w-40 mx-auto justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 mt-5"
+                    class="button w-40 mx-auto justify-center block bg-gray-200 text-gray-600 mt-5"
                     >View More Details</a
                   >
                 </div>
@@ -347,17 +347,17 @@
           <!-- BEGIN: Daily Sales -->
           <div class="intro-y box col-span-12 lg:col-span-6">
             <div
-              class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">Daily Sales</h2>
               <div class="dropdown ml-auto sm:hidden">
                 <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                   <MoreHorizontalIcon
-                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                    class="w-5 h-5 text-gray-700"
                   />
                 </a>
                 <div class="dropdown-box w-40">
-                  <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <div class="dropdown-box__content box p-2">
                     <a
                       href="javascript:;"
                       class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200 rounded-md"
@@ -368,7 +368,7 @@
                 </div>
               </div>
               <button
-                class="button border relative flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"
+                class="button border relative flex items-center text-gray-700 hidden sm:flex"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Download Excel
               </button>
@@ -388,7 +388,7 @@
                     Bootstrap 4 HTML Admin Template
                   </div>
                 </div>
-                <div class="font-medium text-gray-700 dark:text-gray-600">
+                <div class="font-medium text-gray-700">
                   +$19
                 </div>
               </div>
@@ -406,7 +406,7 @@
                     Tailwind HTML Admin Template
                   </div>
                 </div>
-                <div class="font-medium text-gray-700 dark:text-gray-600">
+                <div class="font-medium text-gray-700">
                   +$25
                 </div>
               </div>
@@ -424,7 +424,7 @@
                     Vuejs HTML Admin Template
                   </div>
                 </div>
-                <div class="font-medium text-gray-700 dark:text-gray-600">
+                <div class="font-medium text-gray-700">
                   +$21
                 </div>
               </div>
@@ -434,29 +434,29 @@
           <!-- BEGIN: Latest Tasks -->
           <div class="intro-y box col-span-12 lg:col-span-6">
             <div
-              class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">Latest Tasks</h2>
               <div class="dropdown ml-auto sm:hidden">
                 <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                   <MoreHorizontalIcon
-                    class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                    class="w-5 h-5 text-gray-700"
                   />
                 </a>
                 <div class="nav-tabs dropdown-box w-40">
-                  <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                  <div class="dropdown-box__content box p-2">
                     <a
                       href="javascript:;"
                       data-toggle="tab"
                       data-target="#new"
-                      class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >New</a
                     >
                     <a
                       href="javascript:;"
                       data-toggle="tab"
                       data-target="#last-week"
-                      class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >Last Week</a
                     >
                   </div>
@@ -520,17 +520,17 @@
           <!-- BEGIN: New Products -->
           <div class="intro-y box col-span-12">
             <div
-              class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center px-5 py-3 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">New Products</h2>
               <button
-                class="button px-2 border relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+                class="button px-2 border relative flex items-center text-gray-700 mr-2"
                 @click="prevNewProducts"
               >
                 <ChevronLeftIcon class="w-4 h-4" />
               </button>
               <button
-                class="button px-2 border relative flex items-center text-gray-700 dark:text-gray-300"
+                class="button px-2 border relative flex items-center text-gray-700"
                 @click="nextNewProducts"
               >
                 <ChevronRightIcon class="w-4 h-4" />
@@ -549,7 +549,7 @@
               >
                 <div class="flex flex-col lg:flex-row items-center pb-5">
                   <div
-                    class="flex flex-col sm:flex-row items-center pr-5 lg:border-r border-gray-200 dark:border-dark-5"
+                    class="flex flex-col sm:flex-row items-center pr-5 lg:border-r border-gray-200"
                   >
                     <div class="sm:mr-5">
                       <div class="w-20 h-20 image-fit">
@@ -570,11 +570,11 @@
                     </div>
                   </div>
                   <div
-                    class="w-full lg:w-auto mt-6 lg:mt-0 pt-4 lg:pt-0 flex-1 flex items-center justify-center px-5 border-t lg:border-t-0 border-gray-200 dark:border-dark-5"
+                    class="w-full lg:w-auto mt-6 lg:mt-0 pt-4 lg:pt-0 flex-1 flex items-center justify-center px-5 border-t lg:border-t-0 border-gray-200"
                   >
                     <div class="text-center rounded-md w-20 py-3">
                       <div
-                        class="font-semibold text-theme-1 dark:text-theme-10 text-lg"
+                        class="font-semibold text-theme-1 text-lg"
                       >
                         {{ faker.totals[0] }}
                       </div>
@@ -582,7 +582,7 @@
                     </div>
                     <div class="text-center rounded-md w-20 py-3">
                       <div
-                        class="font-semibold text-theme-1 dark:text-theme-10 text-lg"
+                        class="font-semibold text-theme-1 text-lg"
                       >
                         {{ faker.totals[1] }}k
                       </div>
@@ -590,7 +590,7 @@
                     </div>
                     <div class="text-center rounded-md w-20 py-3">
                       <div
-                        class="font-semibold text-theme-1 dark:text-theme-10 text-lg"
+                        class="font-semibold text-theme-1 text-lg"
                       >
                         {{ faker.totals[0] }}
                       </div>
@@ -599,13 +599,13 @@
                   </div>
                 </div>
                 <div
-                  class="flex flex-col sm:flex-row items-center border-t border-gray-200 dark:border-dark-5 pt-5"
+                  class="flex flex-col sm:flex-row items-center border-t border-gray-200 pt-5"
                 >
                   <div
-                    class="w-full sm:w-auto flex justify-center sm:justify-start items-center border-b sm:border-b-0 border-gray-200 dark:border-dark-5 pb-5 sm:pb-0"
+                    class="w-full sm:w-auto flex justify-center sm:justify-start items-center border-b sm:border-b-0 border-gray-200 pb-5 sm:pb-0"
                   >
                     <div
-                      class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium mr-3"
+                      class="px-3 py-2 bg-theme-14 text-theme-10 rounded font-medium mr-3"
                     >
                       {{ faker.dates[0] }}
                     </div>
@@ -613,12 +613,12 @@
                   </div>
                   <div class="flex sm:ml-auto mt-5 sm:mt-0">
                     <button
-                      class="button w-20 justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                      class="button w-20 justify-center block bg-gray-200 text-gray-600 ml-auto"
                     >
                       Preview
                     </button>
                     <button
-                      class="button w-20 justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-2"
+                      class="button w-20 justify-center block bg-gray-200 text-gray-600 ml-2"
                     >
                       Details
                     </button>
@@ -631,17 +631,17 @@
           <!-- BEGIN: New Authors -->
           <div class="intro-y box col-span-12">
             <div
-              class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+              class="flex items-center px-5 py-3 border-b border-gray-200"
             >
               <h2 class="font-medium text-base mr-auto">New Authors</h2>
               <button
-                class="button px-2 border relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+                class="button px-2 border relative flex items-center text-gray-700 mr-2"
                 @click="prevNewAuthors"
               >
                 <ChevronLeftIcon class="w-4 h-4" />
               </button>
               <button
-                class="button px-2 border relative flex items-center text-gray-700 dark:text-gray-300"
+                class="button px-2 border relative flex items-center text-gray-700"
                 @click="nextNewAuthors"
               >
                 <ChevronRightIcon class="w-4 h-4" />
@@ -660,7 +660,7 @@
               >
                 <div class="flex flex-col lg:flex-row items-center pb-5">
                   <div
-                    class="flex-1 flex flex-col sm:flex-row items-center pr-5 lg:border-r border-gray-200 dark:border-dark-5"
+                    class="flex-1 flex flex-col sm:flex-row items-center pr-5 lg:border-r border-gray-200"
                   >
                     <div class="sm:mr-5">
                       <div class="w-20 h-20 image-fit">
@@ -681,7 +681,7 @@
                     </div>
                   </div>
                   <div
-                    class="w-full lg:w-auto mt-6 lg:mt-0 pt-4 lg:pt-0 flex-1 flex flex-col justify-center items-center lg:items-start px-5 border-t lg:border-t-0 border-gray-200 dark:border-dark-5"
+                    class="w-full lg:w-auto mt-6 lg:mt-0 pt-4 lg:pt-0 flex-1 flex flex-col justify-center items-center lg:items-start px-5 border-t lg:border-t-0 border-gray-200"
                   >
                     <div class="flex items-center">
                       <a
@@ -704,13 +704,13 @@
                   </div>
                 </div>
                 <div
-                  class="flex flex-col sm:flex-row items-center border-t border-gray-200 dark:border-dark-5 pt-5"
+                  class="flex flex-col sm:flex-row items-center border-t border-gray-200 pt-5"
                 >
                   <div
-                    class="w-full sm:w-auto flex justify-center sm:justify-start items-center border-b sm:border-b-0 border-gray-200 dark:border-dark-5 pb-5 sm:pb-0"
+                    class="w-full sm:w-auto flex justify-center sm:justify-start items-center border-b sm:border-b-0 border-gray-200 pb-5 sm:pb-0"
                   >
                     <div
-                      class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium mr-3"
+                      class="px-3 py-2 bg-theme-14 text-theme-10 rounded font-medium mr-3"
                     >
                       {{ faker.dates[0] }}
                     </div>
@@ -718,12 +718,12 @@
                   </div>
                   <div class="flex sm:ml-auto mt-5 sm:mt-0">
                     <button
-                      class="button w-20 justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                      class="button w-20 justify-center block bg-gray-200 text-gray-600 ml-auto"
                     >
                       Message
                     </button>
                     <button
-                      class="button w-20 justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-2"
+                      class="button w-20 justify-center block bg-gray-200 text-gray-600 ml-2"
                     >
                       Profile
                     </button>
diff --git a/src/views/ProfileOverview3.vue b/src/views/ProfileOverview3.vue
index ada6422..47de53e 100644
--- a/src/views/ProfileOverview3.vue
+++ b/src/views/ProfileOverview3.vue
@@ -26,32 +26,32 @@
             <div class="dropdown">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="dropdown-box w-56">
-                <div class="dropdown-box__content box dark:bg-dark-1">
+                <div class="dropdown-box__content box">
                   <div
-                    class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"
+                    class="p-4 border-b border-gray-200 font-medium"
                   >
                     Export Options
                   </div>
                   <div class="p-2">
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <ActivityIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       English
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <BoxIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Indonesia
                       <div
@@ -62,25 +62,25 @@
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <LayoutIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       English
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <SidebarIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Indonesia
                     </a>
                   </div>
                   <div
-                    class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"
+                    class="px-3 py-3 border-t border-gray-200 font-medium flex"
                   >
                     <button
                       type="button"
@@ -90,7 +90,7 @@
                     </button>
                     <button
                       type="button"
-                      class="button button--sm bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+                      class="button button--sm bg-gray-200 text-gray-600 ml-auto"
                     >
                       View Profile
                     </button>
@@ -99,9 +99,9 @@
               </div>
             </div>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a
-              class="flex items-center text-theme-1 dark:text-theme-10 font-medium"
+              class="flex items-center text-theme-1 font-medium"
               href=""
             >
               <ActivityIcon class="w-4 h-4 mr-2" /> Personal Information
@@ -116,7 +116,7 @@
               <SettingsIcon class="w-4 h-4 mr-2" /> User Settings
             </a>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a class="flex items-center" href="">
               <ActivityIcon class="w-4 h-4 mr-2" /> Email Settings
             </a>
@@ -139,7 +139,7 @@
             </button>
             <button
               type="button"
-              class="button button--sm border text-gray-700 dark:border-dark-5 dark:text-gray-300 ml-auto"
+              class="button button--sm border text-gray-700 ml-auto"
             >
               New Quick Link
             </button>
@@ -149,7 +149,7 @@
           <div class="flex items-center">
             <div class="font-medium text-lg">Important Update</div>
             <div
-              class="text-xs bg-white dark:bg-theme-1 dark:text-white text-gray-800 px-1 rounded-md ml-auto"
+              class="text-xs bg-white text-gray-800 px-1 rounded-md ml-auto"
             >
               New
             </div>
@@ -162,13 +162,13 @@
           <div class="font-medium flex mt-5">
             <button
               type="button"
-              class="button button--sm border border-white text-white dark:border-dark-5 dark:text-gray-300"
+              class="button button--sm border border-white text-white"
             >
               Take Action
             </button>
             <button
               type="button"
-              class="button button--sm dark:text-gray-500 ml-auto"
+              class="button button--sm ml-auto"
             >
               Dismiss
             </button>
@@ -180,20 +180,20 @@
         <!-- BEGIN: Daily Sales -->
         <div class="intro-y box lg:mt-5">
           <div
-            class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-5 sm:py-3 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Daily Sales</h2>
             <div class="dropdown ml-auto sm:hidden">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href="javascript:;"
-                    class="flex items-center p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <FileIcon class="w-4 h-4 mr-2" /> Download Excel
                   </a>
@@ -201,7 +201,7 @@
               </div>
             </div>
             <button
-              class="button border relative flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300 hidden sm:flex"
+              class="button border relative flex items-center text-gray-700 hidden sm:flex"
             >
               <FileIcon class="w-4 h-4 mr-2" /> Download Excel
             </button>
@@ -221,7 +221,7 @@
                   Bootstrap 4 HTML Admin Template
                 </div>
               </div>
-              <div class="font-medium text-gray-700 dark:text-gray-500">
+              <div class="font-medium text-gray-700">
                 +$19
               </div>
             </div>
@@ -239,7 +239,7 @@
                   Tailwind HTML Admin Template
                 </div>
               </div>
-              <div class="font-medium text-gray-700 dark:text-gray-500">
+              <div class="font-medium text-gray-700">
                 +$25
               </div>
             </div>
@@ -257,7 +257,7 @@
                   Vuejs HTML Admin Template
                 </div>
               </div>
-              <div class="font-medium text-gray-700 dark:text-gray-500">
+              <div class="font-medium text-gray-700">
                 +$21
               </div>
             </div>
@@ -267,17 +267,17 @@
         <!-- BEGIN: Announcement -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-3 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Announcement</h2>
             <button
-              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700 mr-2"
               @click="prevAnnouncement"
             >
               <ChevronLeftIcon class="w-4 h-4" />
             </button>
             <button
-              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300"
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700"
               @click="nextAnnouncement"
             >
               <ChevronRightIcon class="w-4 h-4" />
@@ -291,19 +291,19 @@
           >
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="flex items-center mt-5">
                 <div
-                  class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium"
+                  class="px-3 py-2 bg-theme-14 text-theme-10 rounded font-medium"
                 >
                   02 June 2021
                 </div>
                 <button
-                  class="button justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                  class="button justify-center block bg-gray-200 text-gray-600 ml-auto"
                 >
                   View Details
                 </button>
@@ -311,19 +311,19 @@
             </div>
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="flex items-center mt-5">
                 <div
-                  class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium"
+                  class="px-3 py-2 bg-theme-14 text-theme-10 rounded font-medium"
                 >
                   02 June 2021
                 </div>
                 <button
-                  class="button justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                  class="button justify-center block bg-gray-200 text-gray-600 ml-auto"
                 >
                   View Details
                 </button>
@@ -331,19 +331,19 @@
             </div>
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="flex items-center mt-5">
                 <div
-                  class="px-3 py-2 bg-theme-14 dark:bg-dark-5 dark:text-gray-300 text-theme-10 rounded font-medium"
+                  class="px-3 py-2 bg-theme-14 text-theme-10 rounded font-medium"
                 >
                   02 June 2021
                 </div>
                 <button
-                  class="button justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 ml-auto"
+                  class="button justify-center block bg-gray-200 text-gray-600 ml-auto"
                 >
                   View Details
                 </button>
@@ -355,17 +355,17 @@
         <!-- BEGIN: Projects -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-3 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Projects</h2>
             <button
-              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700 mr-2"
               @click="prevNewProjects"
             >
               <ChevronLeftIcon class="w-4 h-4" />
             </button>
             <button
-              class="slick-navigator button px-2 border relative flex items-center text-gray-700 dark:text-gray-300"
+              class="slick-navigator button px-2 border relative flex items-center text-gray-700"
               @click="nextNewProjects"
             >
               <ChevronRightIcon class="w-4 h-4" />
@@ -379,20 +379,20 @@
           >
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="mt-5">
                 <div class="flex">
-                  <div class="text-gray-700 dark:text-gray-600 mr-auto">
+                  <div class="text-gray-700 mr-auto">
                     Pending Tasks
                   </div>
                   <div class="font-medium">20%</div>
                 </div>
                 <div
-                  class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                  class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                 >
                   <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                 </div>
@@ -400,20 +400,20 @@
             </div>
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="mt-5">
                 <div class="flex">
-                  <div class="text-gray-700 dark:text-gray-600 mr-auto">
+                  <div class="text-gray-700 mr-auto">
                     Pending Tasks
                   </div>
                   <div class="font-medium">20%</div>
                 </div>
                 <div
-                  class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                  class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                 >
                   <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                 </div>
@@ -421,20 +421,20 @@
             </div>
             <div class="px-5">
               <div class="font-medium text-lg">Midone Admin Template</div>
-              <div class="text-gray-700 dark:text-gray-600 mt-2">
+              <div class="text-gray-700 mt-2">
                 Lorem Ipsum is simply dummy text of the printing and typesetting
                 industry. Lorem Ipsum has been the industry's standard dummy
                 text ever since the 1500s.
               </div>
               <div class="mt-5">
                 <div class="flex">
-                  <div class="text-gray-700 dark:text-gray-600 mr-auto">
+                  <div class="text-gray-700 mr-auto">
                     Pending Tasks
                   </div>
                   <div class="font-medium">20%</div>
                 </div>
                 <div
-                  class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                  class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                 >
                   <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                 </div>
@@ -446,17 +446,17 @@
         <!-- BEGIN: Today's Schedule -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-3 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Today's Schedule</h2>
             <button
-              class="slick-navigator button px-2 border text-white relative flex items-center text-gray-700 dark:text-gray-300 mr-2"
+              class="slick-navigator button px-2 border text-white relative flex items-center text-gray-700 mr-2"
               @click="prevTodaysSchedule"
             >
               <ChevronLeftIcon class="w-4 h-4" />
             </button>
             <button
-              class="slick-navigator button px-2 border text-white relative flex items-center text-gray-700 dark:text-gray-300"
+              class="slick-navigator button px-2 border text-white relative flex items-center text-gray-700"
               @click="nextTodaysSchedule"
             >
               <ChevronRightIcon class="w-4 h-4" />
@@ -471,7 +471,7 @@
             <div class="px-5 text-center sm:text-left">
               <div class="font-medium">Developing rest API with Laravel 7</div>
               <div
-                class="text-theme-1 dark:text-theme-10 font-medium text-lg mt-2"
+                class="text-theme-1 font-medium text-lg mt-2"
               >
                 11:15AM - 12:30PM
               </div>
@@ -481,7 +481,7 @@
                   1396 Pooh Bear Lane, New Market
                 </div>
                 <button
-                  class="button button--sm justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
+                  class="button button--sm justify-center block bg-gray-200 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
                 >
                   View On Map
                 </button>
@@ -490,7 +490,7 @@
             <div class="px-5 text-center sm:text-left">
               <div class="font-medium">Developing rest API with Laravel 7</div>
               <div
-                class="text-theme-1 dark:text-theme-10 font-medium text-lg mt-2"
+                class="text-theme-1 font-medium text-lg mt-2"
               >
                 11:15AM - 12:30PM
               </div>
@@ -500,7 +500,7 @@
                   1396 Pooh Bear Lane, New Market
                 </div>
                 <button
-                  class="button button--sm justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
+                  class="button button--sm justify-center block bg-gray-200 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
                 >
                   View On Map
                 </button>
@@ -509,7 +509,7 @@
             <div class="px-5 text-center sm:text-left">
               <div class="font-medium">Developing rest API with Laravel 7</div>
               <div
-                class="text-theme-1 dark:text-theme-10 font-medium text-lg mt-2"
+                class="text-theme-1 font-medium text-lg mt-2"
               >
                 11:15AM - 12:30PM
               </div>
@@ -519,7 +519,7 @@
                   1396 Pooh Bear Lane, New Market
                 </div>
                 <button
-                  class="button button--sm justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
+                  class="button button--sm justify-center block bg-gray-200 text-gray-600 sm:ml-auto mt-3 sm:mt-0"
                 >
                   View On Map
                 </button>
@@ -531,26 +531,26 @@
         <!-- BEGIN: Top Products -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Top Products</h2>
             <div class="dropdown ml-auto">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <Edit2Icon class="w-4 h-4 mr-2" /> New Chat
                   </a>
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <TrashIcon class="w-4 h-4 mr-2" /> Delete
                   </a>
@@ -560,13 +560,13 @@
           </div>
           <div class="p-5">
             <div
-              class="boxed-tabs nav-tabs justify-center flex flex-col sm:flex-row text-gray-700 dark:text-gray-300"
+              class="boxed-tabs nav-tabs justify-center flex flex-col sm:flex-row text-gray-700"
             >
               <a
                 data-toggle="tab"
                 data-target="#laravel"
                 href="javascript:;"
-                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box dark:bg-dark-5 text-center sm:mx-2 active"
+                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box text-center sm:mx-2 active"
               >
                 <BoxIcon class="w-6 h-6 mb-2 mx-auto" /> Laravel
               </a>
@@ -574,7 +574,7 @@
                 data-toggle="tab"
                 data-target="#symfony"
                 href="javascript:;"
-                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box dark:bg-dark-5 text-center sm:mx-2"
+                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box text-center sm:mx-2"
               >
                 <InboxIcon class="w-6 h-6 mb-2 mx-auto" />
                 Symfony
@@ -583,7 +583,7 @@
                 data-toggle="tab"
                 data-target="#bootstrap"
                 href="javascript:;"
-                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box dark:bg-dark-5 text-center sm:mx-2"
+                class="w-full sm:w-20 mb-2 sm:mb-0 py-2 rounded-md box text-center sm:mx-2"
               >
                 <ActivityIcon class="w-6 h-6 mb-2 mx-auto" />
                 Bootstrap
@@ -601,7 +601,7 @@
                       +20%
                     </div>
                     <div
-                      class="w-full sm:w-40 h-1 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full sm:w-40 h-1 bg-gray-400 rounded-full"
                     >
                       <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                     </div>
@@ -617,7 +617,7 @@
                       +55%
                     </div>
                     <div
-                      class="w-full sm:w-40 h-1 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full sm:w-40 h-1 bg-gray-400 rounded-full"
                     >
                       <div class="w-2/3 h-full bg-theme-1 rounded-full"></div>
                     </div>
@@ -633,7 +633,7 @@
                       +40%
                     </div>
                     <div
-                      class="w-full sm:w-40 h-1 bg-gray-400 dark:bg-dark-1 rounded-full"
+                      class="w-full sm:w-40 h-1 bg-gray-400 rounded-full"
                     >
                       <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
                     </div>
@@ -647,29 +647,29 @@
         <!-- BEGIN: Work In Progress -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Work In Progress</h2>
             <div class="dropdown ml-auto sm:hidden">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="nav-tabs dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href="javascript:;"
                     data-toggle="tab"
                     data-target="#new"
-                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >New</a
                   >
                   <a
                     href="javascript:;"
                     data-toggle="tab"
                     data-target="#last-week"
-                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Last Week</a
                   >
                 </div>
@@ -697,20 +697,20 @@
               <div id="work-in-progress-new" class="tab-content__pane active">
                 <div>
                   <div class="flex">
-                    <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                    <div class="text-gray-700 mr-auto">
                       Pending Tasks
                     </div>
                     <div class="font-medium">20%</div>
                   </div>
                   <div
-                    class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                    class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                   >
                     <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                   </div>
                 </div>
                 <div class="mt-5">
                   <div class="flex">
-                    <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                    <div class="text-gray-700 mr-auto">
                       Completed Tasks
                     </div>
                     <div class="font-medium">
@@ -718,27 +718,27 @@
                     </div>
                   </div>
                   <div
-                    class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                    class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                   >
                     <div class="w-1/4 h-full bg-theme-1 rounded-full"></div>
                   </div>
                 </div>
                 <div class="mt-5">
                   <div class="flex">
-                    <div class="text-gray-700 dark:text-gray-300 mr-auto">
+                    <div class="text-gray-700 mr-auto">
                       Tasks In Progress
                     </div>
                     <div class="font-medium">42</div>
                   </div>
                   <div
-                    class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                    class="w-full h-1 mt-2 bg-gray-400 rounded-full"
                   >
                     <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
                   </div>
                 </div>
                 <a
                   href=""
-                  class="button w-40 mx-auto justify-center block bg-gray-200 dark:bg-dark-5 dark:text-gray-300 text-gray-600 mt-5"
+                  class="button w-40 mx-auto justify-center block bg-gray-200 text-gray-600 mt-5"
                   >View More Details</a
                 >
               </div>
@@ -749,29 +749,29 @@
         <!-- BEGIN: Latest Tasks -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-5 sm:py-0 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Latest Tasks</h2>
             <div class="dropdown ml-auto sm:hidden">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="nav-tabs dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href="javascript:;"
                     data-toggle="tab"
                     data-target="#new"
-                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >New</a
                   >
                   <a
                     href="javascript:;"
                     data-toggle="tab"
                     data-target="#last-week"
-                    class="block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >Last Week</a
                   >
                 </div>
@@ -835,7 +835,7 @@
         <!-- BEGIN: General Statistics -->
         <div class="intro-y box mt-5">
           <div
-            class="flex items-center px-5 py-3 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center px-5 py-3 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">General Statistics</h2>
             <div class="dropdown ml-auto">
@@ -844,55 +844,55 @@
                 href="javascript:;"
               >
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <button
-                class="dropdown-toggle button font-normal border dark:border-dark-5 text-white relative items-center text-gray-700 dark:text-gray-300 hidden sm:flex"
+                class="dropdown-toggle button font-normal border text-white relative items-center text-gray-700 hidden sm:flex"
               >
                 Export <ChevronDownIcon class="w-4 h-4 ml-2" />
               </button>
               <div class="dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1">
+                <div class="dropdown-box__content box">
                   <div
-                    class="px-4 py-2 border-b border-gray-200 dark:border-dark-5 font-medium"
+                    class="px-4 py-2 border-b border-gray-200 font-medium"
                   >
                     Export Tools
                   </div>
                   <div class="p-2">
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <PrinterIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Print
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <ExternalLinkIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Excel
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <FileTextIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       CSV
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <ArchiveIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       PDF
                     </a>
@@ -915,38 +915,38 @@
               </div>
               <div class="dropdown mt-3 sm:mt-0 mr-auto sm:mr-0">
                 <button
-                  class="dropdown-toggle button font-normal border dark:border-dark-5 text-white relative flex items-center text-gray-700 dark:text-gray-300"
+                  class="dropdown-toggle button font-normal border text-white relative flex items-center text-gray-700"
                 >
                   Filter by Month
                   <ChevronDownIcon class="w-4 h-4 ml-2" />
                 </button>
                 <div class="dropdown-box w-40">
                   <div
-                    class="dropdown-box__content box dark:bg-dark-1 p-2 overflow-y-auto h-32"
+                    class="dropdown-box__content box p-2 overflow-y-auto h-32"
                   >
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >January</a
                     >
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >February</a
                     >
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >March</a
                     >
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >June</a
                     >
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                       >July</a
                     >
                   </div>
diff --git a/src/views/ProgressBar.vue b/src/views/ProgressBar.vue
index 9768f72..bdd18a6 100644
--- a/src/views/ProgressBar.vue
+++ b/src/views/ProgressBar.vue
@@ -8,7 +8,7 @@
       <div class="intro-y col-span-12 lg:col-span-6">
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Basic Progressbar</h2>
             <div
@@ -24,16 +24,16 @@
           </div>
           <div id="basic-progressbar" class="p-5">
             <div class="preview">
-              <div class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full">
+              <div class="w-full h-2 bg-gray-400 rounded-full">
                 <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
               </div>
               <div
-                class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full mt-3"
+                class="w-full h-2 bg-gray-400 rounded-full mt-3"
               >
                 <div class="w-2/3 h-full bg-theme-1 rounded-full"></div>
               </div>
               <div
-                class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full mt-3"
+                class="w-full h-2 bg-gray-400 rounded-full mt-3"
               >
                 <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
               </div>
@@ -41,7 +41,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-basic-progressbar"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -52,17 +52,17 @@
                   >
                     <textarea>
                       <div
-                        class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                        class="w-full h-2 bg-gray-400 rounded-full"
                       >
                         <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                       </div>
                       <div
-                        class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full mt-3"
+                        class="w-full h-2 bg-gray-400 rounded-full mt-3"
                       >
                         <div class="w-2/3 h-full bg-theme-1 rounded-full"></div>
                       </div>
                       <div
-                        class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full mt-3"
+                        class="w-full h-2 bg-gray-400 rounded-full mt-3"
                       >
                         <div class="w-3/4 h-full bg-theme-1 rounded-full"></div>
                       </div>
@@ -75,7 +75,7 @@
         </div>
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Progressbar with Label
@@ -93,21 +93,21 @@
           </div>
           <div id="progressbar-label" class="p-5">
             <div class="preview">
-              <div class="w-full h-4 bg-gray-400 dark:bg-dark-1 rounded">
+              <div class="w-full h-4 bg-gray-400 rounded">
                 <div
                   class="w-1/2 h-full bg-theme-1 rounded text-center text-xs text-white"
                 >
                   50%
                 </div>
               </div>
-              <div class="w-full h-4 bg-gray-400 dark:bg-dark-1 rounded mt-3">
+              <div class="w-full h-4 bg-gray-400 rounded mt-3">
                 <div
                   class="w-2/3 h-full bg-theme-1 rounded text-center text-xs text-white"
                 >
                   60%
                 </div>
               </div>
-              <div class="w-full h-4 bg-gray-400 dark:bg-dark-1 rounded mt-3">
+              <div class="w-full h-4 bg-gray-400 rounded mt-3">
                 <div
                   class="w-3/4 h-full bg-theme-1 rounded text-center text-xs text-white"
                 >
@@ -118,7 +118,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-progressbar-label"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -128,7 +128,7 @@
                     class="text-xs p-0 rounded-md html pl-5 pt-8 pb-4 -mb-10 -mt-10"
                   >
                     <textarea>
-                      <div class="w-full h-4 bg-gray-400 dark:bg-dark-1 rounded">
+                      <div class="w-full h-4 bg-gray-400 rounded">
                         <div
                           class="w-1/2 h-full bg-theme-1 rounded text-center text-xs text-white"
                         >
@@ -136,7 +136,7 @@
                         </div>
                       </div>
                       <div
-                        class="w-full h-4 bg-gray-400 dark:bg-dark-1 rounded mt-3"
+                        class="w-full h-4 bg-gray-400 rounded mt-3"
                       >
                         <div
                           class="w-2/3 h-full bg-theme-1 rounded text-center text-xs text-white"
@@ -145,7 +145,7 @@
                         </div>
                       </div>
                       <div
-                        class="w-full h-4 bg-gray-400 dark:bg-dark-1 rounded mt-3"
+                        class="w-full h-4 bg-gray-400 rounded mt-3"
                       >
                         <div
                           class="w-3/4 h-full bg-theme-1 rounded text-center text-xs text-white"
@@ -166,7 +166,7 @@
       <div class="intro-y col-span-12 lg:col-span-6">
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Progressbar Height</h2>
             <div
@@ -182,20 +182,20 @@
           </div>
           <div id="progressbar-height" class="p-5">
             <div class="preview">
-              <div class="w-full h-1 bg-gray-400 dark:bg-dark-1 rounded-full">
+              <div class="w-full h-1 bg-gray-400 rounded-full">
                 <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
               </div>
-              <div class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3">
+              <div class="w-full h-2 bg-gray-400 rounded mt-3">
                 <div class="w-2/3 h-full bg-theme-1 rounded"></div>
               </div>
-              <div class="w-full h-3 bg-gray-400 dark:bg-dark-1 rounded mt-3">
+              <div class="w-full h-3 bg-gray-400 rounded mt-3">
                 <div class="w-3/4 h-full bg-theme-1 rounded"></div>
               </div>
             </div>
             <div class="source-code hidden">
               <button
                 data-target="#copy-progressbar-height"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -206,17 +206,17 @@
                   >
                     <textarea>
                       <div
-                        class="w-full h-1 bg-gray-400 dark:bg-dark-1 rounded-full"
+                        class="w-full h-1 bg-gray-400 rounded-full"
                       >
                         <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                       </div>
                       <div
-                        class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3"
+                        class="w-full h-2 bg-gray-400 rounded mt-3"
                       >
                         <div class="w-2/3 h-full bg-theme-1 rounded"></div>
                       </div>
                       <div
-                        class="w-full h-3 bg-gray-400 dark:bg-dark-1 rounded mt-3"
+                        class="w-full h-3 bg-gray-400 rounded mt-3"
                       >
                         <div class="w-3/4 h-full bg-theme-1 rounded"></div>
                       </div>
@@ -229,7 +229,7 @@
         </div>
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Progressbar Color</h2>
             <div
@@ -245,23 +245,23 @@
           </div>
           <div id="progressbar-color" class="p-5">
             <div class="preview">
-              <div class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full">
+              <div class="w-full h-2 bg-gray-400 rounded-full">
                 <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
               </div>
-              <div class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3">
+              <div class="w-full h-2 bg-gray-400 rounded mt-3">
                 <div class="w-2/3 h-full bg-theme-9 rounded"></div>
               </div>
-              <div class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3">
+              <div class="w-full h-2 bg-gray-400 rounded mt-3">
                 <div class="w-3/4 h-full bg-theme-12 rounded"></div>
               </div>
-              <div class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3">
+              <div class="w-full h-2 bg-gray-400 rounded mt-3">
                 <div class="w-3/4 h-full bg-theme-6 rounded"></div>
               </div>
             </div>
             <div class="source-code hidden">
               <button
                 data-target="#copy-progressbar-color"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -272,22 +272,22 @@
                   >
                     <textarea>
                       <div
-                        class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                        class="w-full h-2 bg-gray-400 rounded-full"
                       >
                         <div class="w-1/2 h-full bg-theme-1 rounded-full"></div>
                       </div>
                       <div
-                        class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3"
+                        class="w-full h-2 bg-gray-400 rounded mt-3"
                       >
                         <div class="w-2/3 h-full bg-theme-9 rounded"></div>
                       </div>
                       <div
-                        class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3"
+                        class="w-full h-2 bg-gray-400 rounded mt-3"
                       >
                         <div class="w-3/4 h-full bg-theme-12 rounded"></div>
                       </div>
                       <div
-                        class="w-full h-2 bg-gray-400 dark:bg-dark-1 rounded mt-3"
+                        class="w-full h-2 bg-gray-400 rounded mt-3"
                       >
                         <div class="w-3/4 h-full bg-theme-6 rounded"></div>
                       </div>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index ba76a0d..a2bd5e9 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -26,7 +26,7 @@
               A few more clicks to <br />
               sign up to your account.
             </div>
-            <div class="-intro-x mt-5 text-lg text-white dark:text-gray-500">
+            <div class="-intro-x mt-5 text-lg text-white">
               Manage all your e-commerce accounts in one place
             </div>
           </div>
@@ -43,7 +43,7 @@
               Sign Up
             </h2>
             <div
-              class="intro-x mt-2 text-gray-500 dark:text-gray-500 xl:hidden text-center"
+              class="intro-x mt-2 text-gray-500 xl:hidden text-center"
             >
               A few more clicks to sign in to your account. Manage all your
               e-commerce accounts in one place
@@ -74,7 +74,7 @@
                 <div class="col-span-3 h-full rounded bg-theme-9"></div>
                 <div class="col-span-3 h-full rounded bg-theme-9"></div>
                 <div
-                  class="col-span-3 h-full rounded bg-gray-200 dark:bg-dark-2"
+                  class="col-span-3 h-full rounded bg-gray-200"
                 ></div>
               </div>
               <a
@@ -89,7 +89,7 @@
               />
             </div>
             <div
-              class="intro-x flex items-center text-gray-700 dark:text-gray-600 mt-4 text-xs sm:text-sm"
+              class="intro-x flex items-center text-gray-700 mt-4 text-xs sm:text-sm"
             >
               <input
                 id="remember-me"
@@ -99,7 +99,7 @@
               <label class="cursor-pointer select-none" for="remember-me"
                 >I agree to the Envato</label
               >
-              <a class="text-theme-1 dark:text-theme-10 ml-1" href=""
+              <a class="text-theme-1 ml-1" href=""
                 >Privacy Policy</a
               >.
             </div>
@@ -110,7 +110,7 @@
                 Register
               </button>
               <button
-                class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 dark:border-dark-5 dark:text-gray-300 mt-3 xl:mt-0 align-top"
+                class="button button--lg w-full xl:w-32 text-gray-700 border border-gray-300 mt-3 xl:mt-0 align-top"
               >
                 Sign in
               </button>
diff --git a/src/views/RegularForm.vue b/src/views/RegularForm.vue
index 8e0da1c..4ad312f 100644
--- a/src/views/RegularForm.vue
+++ b/src/views/RegularForm.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Input -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Input</h2>
             <div
@@ -73,7 +73,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-input"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -139,7 +139,7 @@
         <!-- BEGIN: Input Sizing -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Input Sizing</h2>
             <div
@@ -174,7 +174,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-input-sizing"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -210,7 +210,7 @@
         <!-- BEGIN: Input Groups -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Input Groups</h2>
             <div
@@ -228,7 +228,7 @@
             <div class="preview">
               <div class="relative">
                 <div
-                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                 >
                   @
                 </div>
@@ -245,14 +245,14 @@
                   placeholder="Price"
                 />
                 <div
-                  class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                  class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                 >
                   .00
                 </div>
               </div>
               <div class="relative mt-2">
                 <div
-                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                  class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                 >
                   @
                 </div>
@@ -262,7 +262,7 @@
                   placeholder="Price"
                 />
                 <div
-                  class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                  class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                 >
                   .00
                 </div>
@@ -271,7 +271,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-input-groups"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -283,7 +283,7 @@
                     <textarea>
                       <div class="relative">
                         <div
-                          class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                          class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                         >
                           @
                         </div>
@@ -300,14 +300,14 @@
                           placeholder="Price"
                         />
                         <div
-                          class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                          class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                         >
                           .00
                         </div>
                       </div>
                       <div class="relative mt-2">
                         <div
-                          class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                          class="absolute rounded-l w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                         >
                           @
                         </div>
@@ -317,7 +317,7 @@
                           placeholder="Price"
                         />
                         <div
-                          class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 dark:bg-dark-1 dark:border-dark-4 border text-gray-600"
+                          class="absolute top-0 right-0 rounded-r w-10 h-full flex items-center justify-center bg-gray-100 border text-gray-600"
                         >
                           .00
                         </div>
@@ -333,7 +333,7 @@
         <!-- BEGIN: Input State -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Input State</h2>
             <div
@@ -361,7 +361,7 @@
                   <div class="col-span-3 h-full rounded bg-theme-9"></div>
                   <div class="col-span-3 h-full rounded bg-theme-9"></div>
                   <div
-                    class="col-span-3 h-full rounded bg-gray-200 dark:bg-dark-1"
+                    class="col-span-3 h-full rounded bg-gray-200"
                   ></div>
                 </div>
                 <div class="text-theme-9 mt-2">Strong password</div>
@@ -390,7 +390,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-input-state"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -412,7 +412,7 @@
                           <div class="col-span-3 h-full rounded bg-theme-9"></div>
                           <div class="col-span-3 h-full rounded bg-theme-9"></div>
                           <div
-                            class="col-span-3 h-full rounded bg-gray-200 dark:bg-dark-1"
+                            class="col-span-3 h-full rounded bg-gray-200"
                           ></div>
                         </div>
                         <div class="text-theme-9 mt-2">Strong password</div>
@@ -450,7 +450,7 @@
         <!-- BEGIN: Select Options -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Select Options</h2>
             <div
@@ -493,7 +493,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-select-options"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -539,7 +539,7 @@
         <!-- BEGIN: Vertical Form -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Vertical Form</h2>
             <div
@@ -572,7 +572,7 @@
                 />
               </div>
               <div
-                class="flex items-center text-gray-700 dark:text-gray-500 mt-5"
+                class="flex items-center text-gray-700 mt-5"
               >
                 <input
                   id="vertical-remember-me"
@@ -592,7 +592,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-vertical-form"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -619,7 +619,7 @@
                         />
                       </div>
                       <div
-                        class="flex items-center text-gray-700 dark:text-gray-500 mt-5"
+                        class="flex items-center text-gray-700 mt-5"
                       >
                         <input
                           id="vertical-remember-me"
@@ -649,7 +649,7 @@
         <!-- BEGIN: Horizontal Form -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Horizontal Form</h2>
             <div
@@ -686,7 +686,7 @@
                 />
               </div>
               <div
-                class="flex items-center text-gray-700 dark:text-gray-500 mt-5 sm:ml-20 sm:pl-5"
+                class="flex items-center text-gray-700 mt-5 sm:ml-20 sm:pl-5"
               >
                 <input
                   id="horizontal-remember-me"
@@ -708,7 +708,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-horizontal-form"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -739,7 +739,7 @@
                         />
                       </div>
                       <div
-                        class="flex items-center text-gray-700 dark:text-gray-500 mt-5 sm:ml-20 sm:pl-5"
+                        class="flex items-center text-gray-700 mt-5 sm:ml-20 sm:pl-5"
                       >
                         <input
                           id="horizontal-remember-me"
@@ -771,7 +771,7 @@
         <!-- BEGIN: Inline Form -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Inline Form</h2>
             <div
@@ -808,7 +808,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-inline-form"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -846,7 +846,7 @@
         <!-- BEGIN: Checkbox & Switch -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Checkbox & Switch</h2>
             <div
@@ -865,7 +865,7 @@
               <div>
                 <label>Vertical Checkbox</label>
                 <div
-                  class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                  class="flex items-center text-gray-700 mt-2"
                 >
                   <input
                     id="vertical-checkbox-chris-evans"
@@ -879,7 +879,7 @@
                   >
                 </div>
                 <div
-                  class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                  class="flex items-center text-gray-700 mt-2"
                 >
                   <input
                     id="vertical-checkbox-liam-neeson"
@@ -893,7 +893,7 @@
                   >
                 </div>
                 <div
-                  class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                  class="flex items-center text-gray-700 mt-2"
                 >
                   <input
                     id="vertical-checkbox-daniel-craig"
@@ -911,7 +911,7 @@
                 <label>Horizontal Checkbox</label>
                 <div class="flex flex-col sm:flex-row mt-2">
                   <div
-                    class="flex items-center text-gray-700 dark:text-gray-500 mr-2"
+                    class="flex items-center text-gray-700 mr-2"
                   >
                     <input
                       id="horizontal-checkbox-chris-evans"
@@ -925,7 +925,7 @@
                     >
                   </div>
                   <div
-                    class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0"
+                    class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"
                   >
                     <input
                       id="horizontal-checkbox-liam-neeson"
@@ -939,7 +939,7 @@
                     >
                   </div>
                   <div
-                    class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0"
+                    class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"
                   >
                     <input
                       id="horizontal-checkbox-daniel-craig"
@@ -964,7 +964,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-checkbox-switch"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -977,7 +977,7 @@
                       <div>
                         <label>Vertical Checkbox</label>
                         <div
-                          class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                          class="flex items-center text-gray-700 mt-2"
                         >
                           <input
                             id="vertical-checkbox-chris-evans"
@@ -991,7 +991,7 @@
                           >
                         </div>
                         <div
-                          class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                          class="flex items-center text-gray-700 mt-2"
                         >
                           <input
                             id="vertical-checkbox-liam-neeson"
@@ -1005,7 +1005,7 @@
                           >
                         </div>
                         <div
-                          class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                          class="flex items-center text-gray-700 mt-2"
                         >
                           <input
                             id="vertical-checkbox-daniel-craig"
@@ -1084,7 +1084,7 @@
         <!-- BEGIN: Radio Button -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Radio</h2>
             <div
@@ -1103,7 +1103,7 @@
               <div>
                 <label>Vertical Radio Button</label>
                 <div
-                  class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                  class="flex items-center text-gray-700 mt-2"
                 >
                   <input
                     id="vertical-radio-chris-evans"
@@ -1119,7 +1119,7 @@
                   >
                 </div>
                 <div
-                  class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                  class="flex items-center text-gray-700 mt-2"
                 >
                   <input
                     id="vertical-radio-liam-neeson"
@@ -1135,7 +1135,7 @@
                   >
                 </div>
                 <div
-                  class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                  class="flex items-center text-gray-700 mt-2"
                 >
                   <input
                     id="vertical-radio-daniel-craig"
@@ -1155,7 +1155,7 @@
                 <label>Horizontal Radio Button</label>
                 <div class="flex flex-col sm:flex-row mt-2">
                   <div
-                    class="flex items-center text-gray-700 dark:text-gray-500 mr-2"
+                    class="flex items-center text-gray-700 mr-2"
                   >
                     <input
                       id="horizontal-radio-chris-evans"
@@ -1171,7 +1171,7 @@
                     >
                   </div>
                   <div
-                    class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0"
+                    class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"
                   >
                     <input
                       id="horizontal-radio-liam-neeson"
@@ -1187,7 +1187,7 @@
                     >
                   </div>
                   <div
-                    class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0"
+                    class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"
                   >
                     <input
                       id="horizontal-radio-daniel-craig"
@@ -1208,7 +1208,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-radio"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -1221,7 +1221,7 @@
                       <div>
                         <label>Vertical Radio Button</label>
                         <div
-                          class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                          class="flex items-center text-gray-700 mt-2"
                         >
                           <input
                             id="vertical-radio-chris-evans"
@@ -1237,7 +1237,7 @@
                           >
                         </div>
                         <div
-                          class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                          class="flex items-center text-gray-700 mt-2"
                         >
                           <input
                             id="vertical-radio-liam-neeson"
@@ -1253,7 +1253,7 @@
                           >
                         </div>
                         <div
-                          class="flex items-center text-gray-700 dark:text-gray-500 mt-2"
+                          class="flex items-center text-gray-700 mt-2"
                         >
                           <input
                             id="vertical-radio-daniel-craig"
@@ -1273,7 +1273,7 @@
                         <label>Horizontal Radio Button</label>
                         <div class="flex flex-col sm:flex-row mt-2">
                           <div
-                            class="flex items-center text-gray-700 dark:text-gray-500 mr-2"
+                            class="flex items-center text-gray-700 mr-2"
                           >
                             <input
                               id="horizontal-radio-chris-evans"
@@ -1289,7 +1289,7 @@
                             >
                           </div>
                           <div
-                            class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0"
+                            class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"
                           >
                             <input
                               id="horizontal-radio-liam-neeson"
@@ -1305,7 +1305,7 @@
                             >
                           </div>
                           <div
-                            class="flex items-center text-gray-700 dark:text-gray-500 mr-2 mt-2 sm:mt-0"
+                            class="flex items-center text-gray-700 mr-2 mt-2 sm:mt-0"
                           >
                             <input
                               id="horizontal-radio-daniel-craig"
diff --git a/src/views/RegularTable.vue b/src/views/RegularTable.vue
index 23202e3..b2e4723 100644
--- a/src/views/RegularTable.vue
+++ b/src/views/RegularTable.vue
@@ -29,22 +29,22 @@
                   <thead>
                     <tr>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         #
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         First Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Last Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Username
                       </th>
@@ -52,24 +52,24 @@
                   </thead>
                   <tbody>
                     <tr>
-                      <td class="border-b dark:border-dark-5">1</td>
-                      <td class="border-b dark:border-dark-5">Angelina</td>
-                      <td class="border-b dark:border-dark-5">Jolie</td>
-                      <td class="border-b dark:border-dark-5">
+                      <td class="border-b">1</td>
+                      <td class="border-b">Angelina</td>
+                      <td class="border-b">Jolie</td>
+                      <td class="border-b">
                         @angelinajolie
                       </td>
                     </tr>
                     <tr>
-                      <td class="border-b dark:border-dark-5">2</td>
-                      <td class="border-b dark:border-dark-5">Brad</td>
-                      <td class="border-b dark:border-dark-5">Pitt</td>
-                      <td class="border-b dark:border-dark-5">@bradpitt</td>
+                      <td class="border-b">2</td>
+                      <td class="border-b">Brad</td>
+                      <td class="border-b">Pitt</td>
+                      <td class="border-b">@bradpitt</td>
                     </tr>
                     <tr>
-                      <td class="border-b dark:border-dark-5">3</td>
-                      <td class="border-b dark:border-dark-5">Charlie</td>
-                      <td class="border-b dark:border-dark-5">Hunnam</td>
-                      <td class="border-b dark:border-dark-5">
+                      <td class="border-b">3</td>
+                      <td class="border-b">Charlie</td>
+                      <td class="border-b">Hunnam</td>
+                      <td class="border-b">
                         @charliehunnam
                       </td>
                     </tr>
@@ -77,43 +77,43 @@
                 </table>
                 <table class="table mt-5">
                   <thead>
-                    <tr class="bg-gray-700 dark:bg-dark-1 text-white">
+                    <tr class="bg-gray-700 text-white">
                       <th
-                        class="border-b-2 dark:border-dark-5 border-gray-600 whitespace-no-wrap"
+                        class="border-b-2 border-gray-600 whitespace-no-wrap"
                       >
                         #
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 border-gray-600 whitespace-no-wrap"
+                        class="border-b-2 border-gray-600 whitespace-no-wrap"
                       >
                         First Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 border-gray-600 whitespace-no-wrap"
+                        class="border-b-2 border-gray-600 whitespace-no-wrap"
                       >
                         Last Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 border-gray-600 whitespace-no-wrap"
+                        class="border-b-2 border-gray-600 whitespace-no-wrap"
                       >
                         Username
                       </th>
                     </tr>
                   </thead>
                   <tbody>
-                    <tr class="bg-gray-700 dark:bg-dark-1 text-white">
+                    <tr class="bg-gray-700 text-white">
                       <td class="border-b border-gray-600">1</td>
                       <td class="border-b border-gray-600">Angelina</td>
                       <td class="border-b border-gray-600">Jolie</td>
                       <td class="border-b border-gray-600">@angelinajolie</td>
                     </tr>
-                    <tr class="bg-gray-700 dark:bg-dark-1 text-white">
+                    <tr class="bg-gray-700 text-white">
                       <td class="border-b border-gray-600">2</td>
                       <td class="border-b border-gray-600">Brad</td>
                       <td class="border-b border-gray-600">Pitt</td>
                       <td class="border-b border-gray-600">@bradpitt</td>
                     </tr>
-                    <tr class="bg-gray-700 dark:bg-dark-1 text-white">
+                    <tr class="bg-gray-700 text-white">
                       <td class="border-b border-gray-600">3</td>
                       <td class="border-b border-gray-600">Charlie</td>
                       <td class="border-b border-gray-600">Hunnam</td>
@@ -126,7 +126,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-basic-table"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -141,22 +141,22 @@
                           <thead>
                             <tr>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 #
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 First Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Last Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Username
                               </th>
@@ -164,28 +164,28 @@
                           </thead>
                           <tbody>
                             <tr>
-                              <td class="border-b dark:border-dark-5">1</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">1</td>
+                              <td class="border-b">
                                 Angelina
                               </td>
-                              <td class="border-b dark:border-dark-5">Jolie</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">Jolie</td>
+                              <td class="border-b">
                                 @angelinajolie
                               </td>
                             </tr>
                             <tr>
-                              <td class="border-b dark:border-dark-5">2</td>
-                              <td class="border-b dark:border-dark-5">Brad</td>
-                              <td class="border-b dark:border-dark-5">Pitt</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">2</td>
+                              <td class="border-b">Brad</td>
+                              <td class="border-b">Pitt</td>
+                              <td class="border-b">
                                 @bradpitt
                               </td>
                             </tr>
                             <tr>
-                              <td class="border-b dark:border-dark-5">3</td>
-                              <td class="border-b dark:border-dark-5">Charlie</td>
-                              <td class="border-b dark:border-dark-5">Hunnam</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">3</td>
+                              <td class="border-b">Charlie</td>
+                              <td class="border-b">Hunnam</td>
+                              <td class="border-b">
                                 @charliehunnam
                               </td>
                             </tr>
@@ -193,31 +193,31 @@
                         </table>
                         <table class="table mt-5">
                           <thead>
-                            <tr class="bg-gray-700 dark:bg-dark-1 text-white">
+                            <tr class="bg-gray-700 text-white">
                               <th
-                                class="border-b-2 dark:border-dark-5 border-gray-600 whitespace-no-wrap"
+                                class="border-b-2 border-gray-600 whitespace-no-wrap"
                               >
                                 #
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 border-gray-600 whitespace-no-wrap"
+                                class="border-b-2 border-gray-600 whitespace-no-wrap"
                               >
                                 First Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 border-gray-600 whitespace-no-wrap"
+                                class="border-b-2 border-gray-600 whitespace-no-wrap"
                               >
                                 Last Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 border-gray-600 whitespace-no-wrap"
+                                class="border-b-2 border-gray-600 whitespace-no-wrap"
                               >
                                 Username
                               </th>
                             </tr>
                           </thead>
                           <tbody>
-                            <tr class="bg-gray-700 dark:bg-dark-1 text-white">
+                            <tr class="bg-gray-700 text-white">
                               <td class="border-b border-gray-600">1</td>
                               <td class="border-b border-gray-600">Angelina</td>
                               <td class="border-b border-gray-600">Jolie</td>
@@ -225,13 +225,13 @@
                                 @angelinajolie
                               </td>
                             </tr>
-                            <tr class="bg-gray-700 dark:bg-dark-1 text-white">
+                            <tr class="bg-gray-700 text-white">
                               <td class="border-b border-gray-600">2</td>
                               <td class="border-b border-gray-600">Brad</td>
                               <td class="border-b border-gray-600">Pitt</td>
                               <td class="border-b border-gray-600">@bradpitt</td>
                             </tr>
-                            <tr class="bg-gray-700 dark:bg-dark-1 text-white">
+                            <tr class="bg-gray-700 text-white">
                               <td class="border-b border-gray-600">3</td>
                               <td class="border-b border-gray-600">Charlie</td>
                               <td class="border-b border-gray-600">Hunnam</td>
@@ -274,22 +274,22 @@
                   <thead>
                     <tr>
                       <th
-                        class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border border-b-2 whitespace-no-wrap"
                       >
                         #
                       </th>
                       <th
-                        class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border border-b-2 whitespace-no-wrap"
                       >
                         First Name
                       </th>
                       <th
-                        class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border border-b-2 whitespace-no-wrap"
                       >
                         Last Name
                       </th>
                       <th
-                        class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border border-b-2 whitespace-no-wrap"
                       >
                         Username
                       </th>
@@ -321,7 +321,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-bordered-table"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -336,22 +336,22 @@
                           <thead>
                             <tr>
                               <th
-                                class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border border-b-2 whitespace-no-wrap"
                               >
                                 #
                               </th>
                               <th
-                                class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border border-b-2 whitespace-no-wrap"
                               >
                                 First Name
                               </th>
                               <th
-                                class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border border-b-2 whitespace-no-wrap"
                               >
                                 Last Name
                               </th>
                               <th
-                                class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border border-b-2 whitespace-no-wrap"
                               >
                                 Username
                               </th>
@@ -411,22 +411,22 @@
                   <thead>
                     <tr>
                       <th
-                        class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border border-b-2 whitespace-no-wrap"
                       >
                         #
                       </th>
                       <th
-                        class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border border-b-2 whitespace-no-wrap"
                       >
                         First Name
                       </th>
                       <th
-                        class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border border-b-2 whitespace-no-wrap"
                       >
                         Last Name
                       </th>
                       <th
-                        class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border border-b-2 whitespace-no-wrap"
                       >
                         Username
                       </th>
@@ -458,7 +458,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-hoverable-table"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -473,22 +473,22 @@
                           <thead>
                             <tr>
                               <th
-                                class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border border-b-2 whitespace-no-wrap"
                               >
                                 #
                               </th>
                               <th
-                                class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border border-b-2 whitespace-no-wrap"
                               >
                                 First Name
                               </th>
                               <th
-                                class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border border-b-2 whitespace-no-wrap"
                               >
                                 Last Name
                               </th>
                               <th
-                                class="border border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border border-b-2 whitespace-no-wrap"
                               >
                                 Username
                               </th>
@@ -548,22 +548,22 @@
                   <thead>
                     <tr>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         #
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         First Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Last Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Username
                       </th>
@@ -571,24 +571,24 @@
                   </thead>
                   <tbody>
                     <tr class="bg-theme-1 text-white">
-                      <td class="border-b dark:border-dark-5">1</td>
-                      <td class="border-b dark:border-dark-5">Angelina</td>
-                      <td class="border-b dark:border-dark-5">Jolie</td>
-                      <td class="border-b dark:border-dark-5">
+                      <td class="border-b">1</td>
+                      <td class="border-b">Angelina</td>
+                      <td class="border-b">Jolie</td>
+                      <td class="border-b">
                         @angelinajolie
                       </td>
                     </tr>
                     <tr class="bg-theme-6 text-white">
-                      <td class="border-b dark:border-dark-5">2</td>
-                      <td class="border-b dark:border-dark-5">Brad</td>
-                      <td class="border-b dark:border-dark-5">Pitt</td>
-                      <td class="border-b dark:border-dark-5">@bradpitt</td>
+                      <td class="border-b">2</td>
+                      <td class="border-b">Brad</td>
+                      <td class="border-b">Pitt</td>
+                      <td class="border-b">@bradpitt</td>
                     </tr>
                     <tr class="bg-theme-11 text-white">
-                      <td class="border-b dark:border-dark-5">3</td>
-                      <td class="border-b dark:border-dark-5">Charlie</td>
-                      <td class="border-b dark:border-dark-5">Hunnam</td>
-                      <td class="border-b dark:border-dark-5">
+                      <td class="border-b">3</td>
+                      <td class="border-b">Charlie</td>
+                      <td class="border-b">Hunnam</td>
+                      <td class="border-b">
                         @charliehunnam
                       </td>
                     </tr>
@@ -599,7 +599,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-row-states-table"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -614,22 +614,22 @@
                           <thead>
                             <tr>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 #
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 First Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Last Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Username
                               </th>
@@ -637,28 +637,28 @@
                           </thead>
                           <tbody>
                             <tr class="bg-theme-1 text-white">
-                              <td class="border-b dark:border-dark-5">1</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">1</td>
+                              <td class="border-b">
                                 Angelina
                               </td>
-                              <td class="border-b dark:border-dark-5">Jolie</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">Jolie</td>
+                              <td class="border-b">
                                 @angelinajolie
                               </td>
                             </tr>
                             <tr class="bg-theme-6 text-white">
-                              <td class="border-b dark:border-dark-5">2</td>
-                              <td class="border-b dark:border-dark-5">Brad</td>
-                              <td class="border-b dark:border-dark-5">Pitt</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">2</td>
+                              <td class="border-b">Brad</td>
+                              <td class="border-b">Pitt</td>
+                              <td class="border-b">
                                 @bradpitt
                               </td>
                             </tr>
                             <tr class="bg-theme-11 text-white">
-                              <td class="border-b dark:border-dark-5">3</td>
-                              <td class="border-b dark:border-dark-5">Charlie</td>
-                              <td class="border-b dark:border-dark-5">Hunnam</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">3</td>
+                              <td class="border-b">Charlie</td>
+                              <td class="border-b">Hunnam</td>
+                              <td class="border-b">
                                 @charliehunnam
                               </td>
                             </tr>
@@ -697,7 +697,7 @@
               <div class="overflow-x-auto">
                 <table class="table">
                   <thead>
-                    <tr class="bg-gray-700 dark:bg-dark-1 text-white">
+                    <tr class="bg-gray-700 text-white">
                       <th class="whitespace-no-wrap">#</th>
                       <th class="whitespace-no-wrap">First Name</th>
                       <th class="whitespace-no-wrap">Last Name</th>
@@ -706,24 +706,24 @@
                   </thead>
                   <tbody>
                     <tr>
-                      <td class="border-b dark:border-dark-5">1</td>
-                      <td class="border-b dark:border-dark-5">Angelina</td>
-                      <td class="border-b dark:border-dark-5">Jolie</td>
-                      <td class="border-b dark:border-dark-5">
+                      <td class="border-b">1</td>
+                      <td class="border-b">Angelina</td>
+                      <td class="border-b">Jolie</td>
+                      <td class="border-b">
                         @angelinajolie
                       </td>
                     </tr>
                     <tr>
-                      <td class="border-b dark:border-dark-5">2</td>
-                      <td class="border-b dark:border-dark-5">Brad</td>
-                      <td class="border-b dark:border-dark-5">Pitt</td>
-                      <td class="border-b dark:border-dark-5">@bradpitt</td>
+                      <td class="border-b">2</td>
+                      <td class="border-b">Brad</td>
+                      <td class="border-b">Pitt</td>
+                      <td class="border-b">@bradpitt</td>
                     </tr>
                     <tr>
-                      <td class="border-b dark:border-dark-5">3</td>
-                      <td class="border-b dark:border-dark-5">Charlie</td>
-                      <td class="border-b dark:border-dark-5">Hunnam</td>
-                      <td class="border-b dark:border-dark-5">
+                      <td class="border-b">3</td>
+                      <td class="border-b">Charlie</td>
+                      <td class="border-b">Hunnam</td>
+                      <td class="border-b">
                         @charliehunnam
                       </td>
                     </tr>
@@ -740,24 +740,24 @@
                   </thead>
                   <tbody>
                     <tr>
-                      <td class="border-b dark:border-dark-5">1</td>
-                      <td class="border-b dark:border-dark-5">Angelina</td>
-                      <td class="border-b dark:border-dark-5">Jolie</td>
-                      <td class="border-b dark:border-dark-5">
+                      <td class="border-b">1</td>
+                      <td class="border-b">Angelina</td>
+                      <td class="border-b">Jolie</td>
+                      <td class="border-b">
                         @angelinajolie
                       </td>
                     </tr>
                     <tr>
-                      <td class="border-b dark:border-dark-5">2</td>
-                      <td class="border-b dark:border-dark-5">Brad</td>
-                      <td class="border-b dark:border-dark-5">Pitt</td>
-                      <td class="border-b dark:border-dark-5">@bradpitt</td>
+                      <td class="border-b">2</td>
+                      <td class="border-b">Brad</td>
+                      <td class="border-b">Pitt</td>
+                      <td class="border-b">@bradpitt</td>
                     </tr>
                     <tr>
-                      <td class="border-b dark:border-dark-5">3</td>
-                      <td class="border-b dark:border-dark-5">Charlie</td>
-                      <td class="border-b dark:border-dark-5">Hunnam</td>
-                      <td class="border-b dark:border-dark-5">
+                      <td class="border-b">3</td>
+                      <td class="border-b">Charlie</td>
+                      <td class="border-b">Hunnam</td>
+                      <td class="border-b">
                         @charliehunnam
                       </td>
                     </tr>
@@ -768,7 +768,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-head-options-table"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -781,7 +781,7 @@
                       <div class="overflow-x-auto">
                         <table class="table">
                           <thead>
-                            <tr class="bg-gray-700 dark:bg-dark-1 text-white">
+                            <tr class="bg-gray-700 text-white">
                               <th class="whitespace-no-wrap">#</th>
                               <th class="whitespace-no-wrap">First Name</th>
                               <th class="whitespace-no-wrap">Last Name</th>
@@ -790,28 +790,28 @@
                           </thead>
                           <tbody>
                             <tr>
-                              <td class="border-b dark:border-dark-5">1</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">1</td>
+                              <td class="border-b">
                                 Angelina
                               </td>
-                              <td class="border-b dark:border-dark-5">Jolie</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">Jolie</td>
+                              <td class="border-b">
                                 @angelinajolie
                               </td>
                             </tr>
                             <tr>
-                              <td class="border-b dark:border-dark-5">2</td>
-                              <td class="border-b dark:border-dark-5">Brad</td>
-                              <td class="border-b dark:border-dark-5">Pitt</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">2</td>
+                              <td class="border-b">Brad</td>
+                              <td class="border-b">Pitt</td>
+                              <td class="border-b">
                                 @bradpitt
                               </td>
                             </tr>
                             <tr>
-                              <td class="border-b dark:border-dark-5">3</td>
-                              <td class="border-b dark:border-dark-5">Charlie</td>
-                              <td class="border-b dark:border-dark-5">Hunnam</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">3</td>
+                              <td class="border-b">Charlie</td>
+                              <td class="border-b">Hunnam</td>
+                              <td class="border-b">
                                 @charliehunnam
                               </td>
                             </tr>
@@ -828,28 +828,28 @@
                           </thead>
                           <tbody>
                             <tr>
-                              <td class="border-b dark:border-dark-5">1</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">1</td>
+                              <td class="border-b">
                                 Angelina
                               </td>
-                              <td class="border-b dark:border-dark-5">Jolie</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">Jolie</td>
+                              <td class="border-b">
                                 @angelinajolie
                               </td>
                             </tr>
                             <tr>
-                              <td class="border-b dark:border-dark-5">2</td>
-                              <td class="border-b dark:border-dark-5">Brad</td>
-                              <td class="border-b dark:border-dark-5">Pitt</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">2</td>
+                              <td class="border-b">Brad</td>
+                              <td class="border-b">Pitt</td>
+                              <td class="border-b">
                                 @bradpitt
                               </td>
                             </tr>
                             <tr>
-                              <td class="border-b dark:border-dark-5">3</td>
-                              <td class="border-b dark:border-dark-5">Charlie</td>
-                              <td class="border-b dark:border-dark-5">Hunnam</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">3</td>
+                              <td class="border-b">Charlie</td>
+                              <td class="border-b">Hunnam</td>
+                              <td class="border-b">
                                 @charliehunnam
                               </td>
                             </tr>
@@ -888,32 +888,32 @@
                   <thead>
                     <tr>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         #
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         First Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Last Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Username
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Email
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Address
                       </th>
@@ -967,7 +967,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-responsive-table"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -982,32 +982,32 @@
                           <thead>
                             <tr>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 #
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 First Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Last Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Username
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Email
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Address
                               </th>
@@ -1093,22 +1093,22 @@
                   <thead>
                     <tr>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         #
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         First Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Last Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Username
                       </th>
@@ -1116,24 +1116,24 @@
                   </thead>
                   <tbody>
                     <tr>
-                      <td class="border-b dark:border-dark-5">1</td>
-                      <td class="border-b dark:border-dark-5">Angelina</td>
-                      <td class="border-b dark:border-dark-5">Jolie</td>
-                      <td class="border-b dark:border-dark-5">
+                      <td class="border-b">1</td>
+                      <td class="border-b">Angelina</td>
+                      <td class="border-b">Jolie</td>
+                      <td class="border-b">
                         @angelinajolie
                       </td>
                     </tr>
                     <tr>
-                      <td class="border-b dark:border-dark-5">2</td>
-                      <td class="border-b dark:border-dark-5">Brad</td>
-                      <td class="border-b dark:border-dark-5">Pitt</td>
-                      <td class="border-b dark:border-dark-5">@bradpitt</td>
+                      <td class="border-b">2</td>
+                      <td class="border-b">Brad</td>
+                      <td class="border-b">Pitt</td>
+                      <td class="border-b">@bradpitt</td>
                     </tr>
                     <tr>
-                      <td class="border-b dark:border-dark-5">3</td>
-                      <td class="border-b dark:border-dark-5">Charlie</td>
-                      <td class="border-b dark:border-dark-5">Hunnam</td>
-                      <td class="border-b dark:border-dark-5">
+                      <td class="border-b">3</td>
+                      <td class="border-b">Charlie</td>
+                      <td class="border-b">Hunnam</td>
+                      <td class="border-b">
                         @charliehunnam
                       </td>
                     </tr>
@@ -1144,7 +1144,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-small-table"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -1159,22 +1159,22 @@
                           <thead>
                             <tr>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 #
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 First Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Last Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Username
                               </th>
@@ -1182,28 +1182,28 @@
                           </thead>
                           <tbody>
                             <tr>
-                              <td class="border-b dark:border-dark-5">1</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">1</td>
+                              <td class="border-b">
                                 Angelina
                               </td>
-                              <td class="border-b dark:border-dark-5">Jolie</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">Jolie</td>
+                              <td class="border-b">
                                 @angelinajolie
                               </td>
                             </tr>
                             <tr>
-                              <td class="border-b dark:border-dark-5">2</td>
-                              <td class="border-b dark:border-dark-5">Brad</td>
-                              <td class="border-b dark:border-dark-5">Pitt</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">2</td>
+                              <td class="border-b">Brad</td>
+                              <td class="border-b">Pitt</td>
+                              <td class="border-b">
                                 @bradpitt
                               </td>
                             </tr>
                             <tr>
-                              <td class="border-b dark:border-dark-5">3</td>
-                              <td class="border-b dark:border-dark-5">Charlie</td>
-                              <td class="border-b dark:border-dark-5">Hunnam</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">3</td>
+                              <td class="border-b">Charlie</td>
+                              <td class="border-b">Hunnam</td>
+                              <td class="border-b">
                                 @charliehunnam
                               </td>
                             </tr>
@@ -1242,47 +1242,47 @@
                   <thead>
                     <tr>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         #
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         First Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Last Name
                       </th>
                       <th
-                        class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                        class="border-b-2 whitespace-no-wrap"
                       >
                         Username
                       </th>
                     </tr>
                   </thead>
                   <tbody>
-                    <tr class="bg-gray-200 dark:bg-dark-1">
-                      <td class="border-b dark:border-dark-5">1</td>
-                      <td class="border-b dark:border-dark-5">Angelina</td>
-                      <td class="border-b dark:border-dark-5">Jolie</td>
-                      <td class="border-b dark:border-dark-5">
+                    <tr class="bg-gray-200">
+                      <td class="border-b">1</td>
+                      <td class="border-b">Angelina</td>
+                      <td class="border-b">Jolie</td>
+                      <td class="border-b">
                         @angelinajolie
                       </td>
                     </tr>
                     <tr>
-                      <td class="border-b dark:border-dark-5">2</td>
-                      <td class="border-b dark:border-dark-5">Brad</td>
-                      <td class="border-b dark:border-dark-5">Pitt</td>
-                      <td class="border-b dark:border-dark-5">@bradpitt</td>
+                      <td class="border-b">2</td>
+                      <td class="border-b">Brad</td>
+                      <td class="border-b">Pitt</td>
+                      <td class="border-b">@bradpitt</td>
                     </tr>
-                    <tr class="bg-gray-200 dark:bg-dark-1">
-                      <td class="border-b dark:border-dark-5">3</td>
-                      <td class="border-b dark:border-dark-5">Charlie</td>
-                      <td class="border-b dark:border-dark-5">Hunnam</td>
-                      <td class="border-b dark:border-dark-5">
+                    <tr class="bg-gray-200">
+                      <td class="border-b">3</td>
+                      <td class="border-b">Charlie</td>
+                      <td class="border-b">Hunnam</td>
+                      <td class="border-b">
                         @charliehunnam
                       </td>
                     </tr>
@@ -1293,7 +1293,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-striped-rows-table"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -1308,51 +1308,51 @@
                           <thead>
                             <tr>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 #
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 First Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Last Name
                               </th>
                               <th
-                                class="border-b-2 dark:border-dark-5 whitespace-no-wrap"
+                                class="border-b-2 whitespace-no-wrap"
                               >
                                 Username
                               </th>
                             </tr>
                           </thead>
                           <tbody>
-                            <tr class="bg-gray-200 dark:bg-dark-1">
-                              <td class="border-b dark:border-dark-5">1</td>
-                              <td class="border-b dark:border-dark-5">
+                            <tr class="bg-gray-200">
+                              <td class="border-b">1</td>
+                              <td class="border-b">
                                 Angelina
                               </td>
-                              <td class="border-b dark:border-dark-5">Jolie</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">Jolie</td>
+                              <td class="border-b">
                                 @angelinajolie
                               </td>
                             </tr>
                             <tr>
-                              <td class="border-b dark:border-dark-5">2</td>
-                              <td class="border-b dark:border-dark-5">Brad</td>
-                              <td class="border-b dark:border-dark-5">Pitt</td>
-                              <td class="border-b dark:border-dark-5">
+                              <td class="border-b">2</td>
+                              <td class="border-b">Brad</td>
+                              <td class="border-b">Pitt</td>
+                              <td class="border-b">
                                 @bradpitt
                               </td>
                             </tr>
-                            <tr class="bg-gray-200 dark:bg-dark-1">
-                              <td class="border-b dark:border-dark-5">3</td>
-                              <td class="border-b dark:border-dark-5">Charlie</td>
-                              <td class="border-b dark:border-dark-5">Hunnam</td>
-                              <td class="border-b dark:border-dark-5">
+                            <tr class="bg-gray-200">
+                              <td class="border-b">3</td>
+                              <td class="border-b">Charlie</td>
+                              <td class="border-b">Hunnam</td>
+                              <td class="border-b">
                                 @charliehunnam
                               </td>
                             </tr>
diff --git a/src/views/Slider.vue b/src/views/Slider.vue
index 685d194..63d534a 100644
--- a/src/views/Slider.vue
+++ b/src/views/Slider.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Single Item -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Single Item</h2>
             <div
@@ -30,7 +30,7 @@
                 class="mx-6"
               >
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -39,7 +39,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -48,7 +48,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -57,7 +57,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -66,7 +66,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -75,7 +75,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -88,7 +88,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-single-item-slider"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -105,7 +105,7 @@
                       >
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -116,7 +116,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -127,7 +127,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -138,7 +138,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -149,7 +149,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -160,7 +160,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -181,7 +181,7 @@
         <!-- BEGIN: Multiple Item -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Multiple Item</h2>
             <div
@@ -206,7 +206,7 @@
                 class="mx-6"
               >
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -215,7 +215,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -224,7 +224,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -233,7 +233,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -242,7 +242,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -251,7 +251,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -260,7 +260,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -269,7 +269,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -278,7 +278,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -291,7 +291,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-multiple-item-slider"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -314,7 +314,7 @@
                       >
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -325,7 +325,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -336,7 +336,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -347,7 +347,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -358,7 +358,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -369,7 +369,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -380,7 +380,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -391,7 +391,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -402,7 +402,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -423,7 +423,7 @@
         <!-- BEGIN: Responsive Display -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Responsive Display</h2>
             <div
@@ -465,7 +465,7 @@
                 class="mx-6 mb-8"
               >
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -474,7 +474,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -483,7 +483,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -492,7 +492,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -501,7 +501,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -510,7 +510,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -519,7 +519,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -528,7 +528,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -541,7 +541,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-responsive-slider"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -578,7 +578,7 @@
                       >
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -589,7 +589,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -600,7 +600,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -611,7 +611,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -622,7 +622,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -633,7 +633,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -644,7 +644,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -655,7 +655,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -678,7 +678,7 @@
         <!-- BEGIN: Center Mode -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Center Mode</h2>
             <div
@@ -723,7 +723,7 @@
                 class="mx-6"
               >
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -732,7 +732,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -741,7 +741,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -750,7 +750,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -759,7 +759,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -768,7 +768,7 @@
                   </div>
                 </div>
                 <div class="h-32 px-2">
-                  <div class="h-full bg-gray-200 dark:bg-dark-1 rounded-md">
+                  <div class="h-full bg-gray-200 rounded-md">
                     <h3
                       class="h-full font-medium flex items-center justify-center text-2xl"
                     >
@@ -781,7 +781,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-center-mode-slider"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -821,7 +821,7 @@
                       >
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -832,7 +832,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -843,7 +843,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -854,7 +854,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -865,7 +865,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -876,7 +876,7 @@
                         </div>
                         <div class="h-32 px-2">
                           <div
-                            class="h-full bg-gray-200 dark:bg-dark-1 rounded-md"
+                            class="h-full bg-gray-200 rounded-md"
                           >
                             <h3
                               class="h-full font-medium flex items-center justify-center text-2xl"
@@ -897,7 +897,7 @@
         <!-- BEGIN: Fade Animation -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Fade Animation</h2>
             <div
@@ -951,7 +951,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-fade-animation-slider"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
diff --git a/src/views/Tabulator.vue b/src/views/Tabulator.vue
index 6f77c4e..6429654 100644
--- a/src/views/Tabulator.vue
+++ b/src/views/Tabulator.vue
@@ -8,24 +8,24 @@
         </button>
         <div class="dropdown ml-auto sm:ml-0">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <i class="w-4 h-4" data-feather="plus"></i>
             </span>
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <i data-feather="file-plus" class="w-4 h-4 mr-2"></i> New
                 Category
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <i data-feather="users" class="w-4 h-4 mr-2"></i> New Group
               </a>
@@ -89,7 +89,7 @@
             </button>
             <button
               type="button"
-              class="button w-full sm:w-16 mt-2 sm:mt-0 sm:ml-1 bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300"
+              class="button w-full sm:w-16 mt-2 sm:mt-0 sm:ml-1 bg-gray-200 text-gray-600"
               @click="onResetFilter"
             >
               Reset
@@ -98,14 +98,14 @@
         </form>
         <div class="flex mt-5 sm:mt-0">
           <button
-            class="button w-1/2 sm:w-auto flex items-center border text-gray-700 mr-2 dark:bg-dark-5 dark:text-gray-300"
+            class="button w-1/2 sm:w-auto flex items-center border text-gray-700 mr-2"
             @click="onPrint"
           >
             <i data-feather="printer" class="w-4 h-4 mr-2"></i> Print
           </button>
           <div class="dropdown w-1/2 sm:w-auto">
             <button
-              class="dropdown-toggle button w-full sm:w-auto flex items-center border text-gray-700 dark:bg-dark-5 dark:text-gray-300"
+              class="dropdown-toggle button w-full sm:w-auto flex items-center border text-gray-700"
             >
               <i data-feather="file-text" class="w-4 h-4 mr-2"></i> Export
               <i
@@ -114,10 +114,10 @@
               ></i>
             </button>
             <div class="dropdown-box w-40">
-              <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+              <div class="dropdown-box__content box p-2">
                 <a
                   href="javascript:;"
-                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   @click="onExportCsv"
                 >
                   <i data-feather="file-text" class="w-4 h-4 mr-2"></i> Export
@@ -125,7 +125,7 @@
                 </a>
                 <a
                   href="javascript:;"
-                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   @click="onExportJson"
                 >
                   <i data-feather="file-text" class="w-4 h-4 mr-2"></i> Export
@@ -133,7 +133,7 @@
                 </a>
                 <a
                   href="javascript:;"
-                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   @click="onExportXlsx"
                 >
                   <i data-feather="file-text" class="w-4 h-4 mr-2"></i> Export
@@ -141,7 +141,7 @@
                 </a>
                 <a
                   href="javascript:;"
-                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                  class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   @click="onExportHtml"
                 >
                   <i data-feather="file-text" class="w-4 h-4 mr-2"></i> Export
diff --git a/src/views/TailSelect.vue b/src/views/TailSelect.vue
index 299edac..96f1a55 100644
--- a/src/views/TailSelect.vue
+++ b/src/views/TailSelect.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Basic Select -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Basic Select</h2>
             <div
@@ -73,7 +73,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-basic-select"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -139,7 +139,7 @@
         <!-- BEGIN: Multi Select -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Multi Select</h2>
             <div
@@ -179,7 +179,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-multi-select"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -222,7 +222,7 @@
         <!-- BEGIN: Input Group -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Input Group</h2>
             <div
@@ -240,7 +240,7 @@
             <div class="preview">
               <div class="flex">
                 <div
-                  class="z-30 rounded-l w-10 flex items-center justify-center bg-gray-100 border text-gray-600 dark:bg-dark-1 dark:border-dark-4 -mr-1"
+                  class="z-30 rounded-l w-10 flex items-center justify-center bg-gray-100 border text-gray-600 -mr-1"
                 >
                   @
                 </div>
@@ -262,7 +262,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-input-group"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -274,7 +274,7 @@
                     <textarea>
                       <div class="flex">
                         <div
-                          class="z-30 rounded-l w-10 flex items-center justify-center bg-gray-100 border text-gray-600 dark:bg-dark-1 dark:border-dark-4 -mr-1"
+                          class="z-30 rounded-l w-10 flex items-center justify-center bg-gray-100 border text-gray-600 -mr-1"
                         >
                           @
                         </div>
@@ -303,7 +303,7 @@
         <!-- BEGIN: Hiding Search Box -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Hiding Search Box</h2>
             <div
@@ -335,7 +335,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-hiding-searchbox"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
diff --git a/src/views/Toast.vue b/src/views/Toast.vue
index aa17bf3..227f0a9 100644
--- a/src/views/Toast.vue
+++ b/src/views/Toast.vue
@@ -8,7 +8,7 @@
       <div class="col-span-12 lg:col-span-6">
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Basic Textual Toast</h2>
             <div
@@ -42,7 +42,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-basic-textual-toast"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -90,7 +90,7 @@
       <div class="col-span-12 lg:col-span-6">
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Toast using HTML as a text
@@ -126,7 +126,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-html-textual-toast"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
diff --git a/src/views/Tooltip.vue b/src/views/Tooltip.vue
index 7213199..80b1e1c 100644
--- a/src/views/Tooltip.vue
+++ b/src/views/Tooltip.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Basic Tooltip -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Basic Tooltip</h2>
             <div
@@ -37,7 +37,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-basic-tooltip"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -67,7 +67,7 @@
         <!-- BEGIN: On CLick Tooltip -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">On Click Tooltip</h2>
             <div
@@ -99,7 +99,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-on-click-tooltip"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -132,7 +132,7 @@
         <!-- BEGIN: Light Tooltip -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Light Tooltip</h2>
             <div
@@ -164,7 +164,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-light-tooltip"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -199,7 +199,7 @@
         <!-- BEGIN: Custom Content Tooltip -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">
               Custom Tooltip Content
@@ -237,7 +237,7 @@
                     </div>
                     <div class="ml-4 mr-auto">
                       <div
-                        class="font-medium dark:text-gray-300 leading-relaxed"
+                        class="font-medium leading-relaxed"
                       >
                         {{ $f()[0].users[0].name }}
                       </div>
@@ -252,7 +252,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-custom-content-preview-tooltip"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -287,7 +287,7 @@
                             </div>
                             <div class="ml-4 mr-auto">
                               <div
-                                class="font-medium dark:text-gray-300 leading-relaxed"
+                                class="font-medium leading-relaxed"
                               >
                                 Leonardo DiCaprio
                               </div>
@@ -309,7 +309,7 @@
         <!-- BEGIN: Chart Tooltip -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Chart Tooltip</h2>
             <div
@@ -337,9 +337,9 @@
                 <SimpleLineChart1 :width="200" :height="38" />
                 <TippyContent to="chart-tooltip">
                   <div class="py-1 text-left">
-                    <div class="font-medium dark:text-gray-300">Net Worth</div>
+                    <div class="font-medium">Net Worth</div>
                     <div class="flex items-center mt-2 sm:mt-0">
-                      <div class="mr-2 w-20 flex dark:text-gray-600">
+                      <div class="mr-2 w-20 flex">
                         USP:
                         <span class="ml-auto font-medium text-theme-9"
                           >+23%</span
@@ -356,7 +356,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-chart-preview-tooltip"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -381,11 +381,11 @@
                         <SimpleLineChart1 :width="200" :height="38" />
                         <TippyContent to="chart-tooltip">
                           <div class="py-1 text-left">
-                            <div class="font-medium dark:text-gray-300">
+                            <div class="font-medium">
                               Net Worth
                             </div>
                             <div class="flex items-center mt-2 sm:mt-0">
-                              <div class="mr-2 w-20 flex dark:text-gray-600">
+                              <div class="mr-2 w-20 flex">
                                 USP:
                                 <span class="ml-auto font-medium text-theme-9"
                                   >+23%</span
diff --git a/src/views/Typography.vue b/src/views/Typography.vue
index 2d42c27..1c03ec8 100644
--- a/src/views/Typography.vue
+++ b/src/views/Typography.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: HEADING -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Heading</h2>
             <div
@@ -45,7 +45,7 @@
                   h1. Heading 1
                 </h1>
                 <h2
-                  class="text-3xl text-gray-700 dark:text-gray-600 font-medium leading-none mt-3"
+                  class="text-3xl text-gray-700 font-medium leading-none mt-3"
                 >
                   h2. Heading 2
                 </h2>
@@ -66,7 +66,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-heading"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -103,7 +103,7 @@
                           h1. Heading 1
                         </h1>
                         <h2
-                          class="text-3xl text-gray-700 dark:text-gray-600 font-medium leading-none mt-3"
+                          class="text-3xl text-gray-700 font-medium leading-none mt-3"
                         >
                           h2. Heading 2
                         </h2>
@@ -137,7 +137,7 @@
         <!-- BEGIN: TEXT SETTINGS -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Text Settings</h2>
             <div
@@ -170,7 +170,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-text-settings"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -204,7 +204,7 @@
         <!-- BEGIN: COMMON ELEMENTS -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Common Elements</h2>
             <div
@@ -249,7 +249,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-common-elements"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -301,7 +301,7 @@
         <!-- BEGIN: BADGES -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Badges</h2>
             <div
@@ -324,7 +324,7 @@
                   >1</span
                 >
                 <span
-                  class="text-xs px-1 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                  class="text-xs px-1 rounded-full border text-gray-700 mr-1"
                   >2</span
                 >
                 <span
@@ -350,7 +350,7 @@
                   >1</span
                 >
                 <span
-                  class="px-2 py-1 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                  class="px-2 py-1 rounded-full border text-gray-700 mr-1"
                   >2</span
                 >
                 <span class="px-2 py-1 rounded-full bg-theme-9 text-white mr-1"
@@ -372,7 +372,7 @@
                   >1</span
                 >
                 <span
-                  class="px-3 py-2 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                  class="px-3 py-2 rounded-full border text-gray-700 mr-1"
                   >2</span
                 >
                 <span class="px-3 py-2 rounded-full bg-theme-9 text-white mr-1"
@@ -394,7 +394,7 @@
                   >1</span
                 >
                 <span
-                  class="px-4 py-3 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                  class="px-4 py-3 rounded-full border text-gray-700 mr-1"
                   >2</span
                 >
                 <span class="px-4 py-3 rounded-full bg-theme-9 text-white mr-1"
@@ -415,7 +415,7 @@
               <div class="mt-2">
                 <span class="text-xs px-1 bg-theme-1 text-white mr-1">1</span>
                 <span
-                  class="text-xs px-1 border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                  class="text-xs px-1 border text-gray-700 mr-1"
                   >2</span
                 >
                 <span class="text-xs px-1 bg-theme-9 text-white mr-1">3</span>
@@ -428,23 +428,23 @@
               <div class="font-medium mt-6">Outline Badge</div>
               <div class="mt-4">
                 <span
-                  class="px-3 py-2 rounded-full border border-theme-1 text-theme-1 dark:text-theme-10 dark:border-theme-10 mr-1"
+                  class="px-3 py-2 rounded-full border border-theme-1 text-theme-1 mr-1"
                   >1</span
                 >
                 <span
-                  class="px-3 py-2 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                  class="px-3 py-2 rounded-full border text-gray-700 mr-1"
                   >2</span
                 >
                 <span
-                  class="px-3 py-2 rounded-full border border-theme-9 text-theme-9 dark:border-theme-9 mr-1"
+                  class="px-3 py-2 rounded-full border border-theme-9 text-theme-9 mr-1"
                   >3</span
                 >
                 <span
-                  class="px-3 py-2 rounded-full border border-theme-12 text-theme-12 dark:border-theme-12 mr-1"
+                  class="px-3 py-2 rounded-full border border-theme-12 text-theme-12 mr-1"
                   >4</span
                 >
                 <span
-                  class="px-3 py-2 rounded-full border border-theme-6 text-theme-6 dark:border-theme-6 mr-1"
+                  class="px-3 py-2 rounded-full border border-theme-6 text-theme-6 mr-1"
                   >5</span
                 >
               </div>
@@ -452,7 +452,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-badge"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -469,7 +469,7 @@
                           >1</span
                         >
                         <span
-                          class="text-xs px-1 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                          class="text-xs px-1 rounded-full border text-gray-700 mr-1"
                           >2</span
                         >
                         <span
@@ -496,7 +496,7 @@
                           >1</span
                         >
                         <span
-                          class="px-2 py-1 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                          class="px-2 py-1 rounded-full border text-gray-700 mr-1"
                           >2</span
                         >
                         <span
@@ -522,7 +522,7 @@
                           >1</span
                         >
                         <span
-                          class="px-3 py-2 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                          class="px-3 py-2 rounded-full border text-gray-700 mr-1"
                           >2</span
                         >
                         <span
@@ -548,7 +548,7 @@
                           >1</span
                         >
                         <span
-                          class="px-4 py-3 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                          class="px-4 py-3 rounded-full border text-gray-700 mr-1"
                           >2</span
                         >
                         <span
@@ -574,7 +574,7 @@
                           >1</span
                         >
                         <span
-                          class="text-xs px-1 border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                          class="text-xs px-1 border text-gray-700 mr-1"
                           >2</span
                         >
                         <span class="text-xs px-1 bg-theme-9 text-white mr-1"
@@ -593,23 +593,23 @@
                       <div class="font-medium mt-6">Outline Badge</div>
                       <div class="mt-4">
                         <span
-                          class="px-3 py-2 rounded-full border border-theme-1 text-theme-1 dark:text-theme-10 dark:border-theme-10 mr-1"
+                          class="px-3 py-2 rounded-full border border-theme-1 text-theme-1 mr-1"
                           >1</span
                         >
                         <span
-                          class="px-3 py-2 rounded-full border text-gray-700 dark:text-gray-600 dark:border-dark-5 mr-1"
+                          class="px-3 py-2 rounded-full border text-gray-700 mr-1"
                           >2</span
                         >
                         <span
-                          class="px-3 py-2 rounded-full border border-theme-9 text-theme-9 dark:border-theme-9 mr-1"
+                          class="px-3 py-2 rounded-full border border-theme-9 text-theme-9 mr-1"
                           >3</span
                         >
                         <span
-                          class="px-3 py-2 rounded-full border border-theme-12 text-theme-12 dark:border-theme-12 mr-1"
+                          class="px-3 py-2 rounded-full border border-theme-12 text-theme-12 mr-1"
                           >4</span
                         >
                         <span
-                          class="px-3 py-2 rounded-full border border-theme-6 text-theme-6 dark:border-theme-6 mr-1"
+                          class="px-3 py-2 rounded-full border border-theme-6 text-theme-6 mr-1"
                           >5</span
                         >
                       </div>
@@ -624,7 +624,7 @@
         <!-- BEGIN: SEPARATOR -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Separator</h2>
             <div
@@ -641,16 +641,16 @@
           <div id="separator" class="p-5">
             <div class="preview">
               <div
-                class="w-full border-t border-gray-200 dark:border-dark-5 border-dashed"
+                class="w-full border-t border-gray-200 border-dashed"
               ></div>
               <div
-                class="w-full border-t border-gray-200 dark:border-dark-5 mt-5"
+                class="w-full border-t border-gray-200 mt-5"
               ></div>
             </div>
             <div class="source-code hidden">
               <button
                 data-target="#copy-separator"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -661,10 +661,10 @@
                   >
                     <textarea>
                       <div
-                        class="w-full border-t border-gray-200 dark:border-dark-5 border-dashed"
+                        class="w-full border-t border-gray-200 border-dashed"
                       ></div>
                       <div
-                        class="w-full border-t border-gray-200 dark:border-dark-5 mt-5"
+                        class="w-full border-t border-gray-200 mt-5"
                       ></div>
                     </textarea>
                   </code>
@@ -677,7 +677,7 @@
         <!-- BEGIN: Devider -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Devider</h2>
             <div
@@ -694,9 +694,9 @@
           <div id="devider" class="p-5">
             <div class="preview">
               <div
-                class="w-full flex justify-center border-t border-gray-200 dark:border-dark-5 mt-2"
+                class="w-full flex justify-center border-t border-gray-200 mt-2"
               >
-                <div class="bg-white dark:bg-dark-3 px-5 -mt-3 text-gray-600">
+                <div class="bg-white px-5 -mt-3 text-gray-600">
                   or
                 </div>
               </div>
@@ -704,7 +704,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-devider"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -715,10 +715,10 @@
                   >
                     <textarea>
                       <div
-                        class="w-full flex justify-center border-t border-gray-200 dark:border-dark-5 mt-2"
+                        class="w-full flex justify-center border-t border-gray-200 mt-2"
                       >
                         <div
-                          class="bg-white dark:bg-dark-3 px-5 -mt-3 text-gray-600"
+                          class="bg-white px-5 -mt-3 text-gray-600"
                         >
                           or
                         </div>
@@ -734,7 +734,7 @@
         <!-- BEGIN: Links -->
         <div class="intro-y box mt-5">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Links</h2>
             <div
@@ -769,7 +769,7 @@
               </div>
               <div class="mt-5">
                 <a href="" class="text-theme-1 block">Primary state</a>
-                <a href="" class="text-gray-700 dark:text-gray-600 block"
+                <a href="" class="text-gray-700 block"
                   >Secondary state</a
                 >
                 <a href="" class="text-theme-9 block">Success state</a>
@@ -780,7 +780,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-link"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -809,7 +809,7 @@
                       </div>
                       <div class="mt-5">
                         <a href="" class="text-theme-1 block">Primary state</a>
-                        <a href="" class="text-gray-700 dark:text-gray-600 block"
+                        <a href="" class="text-gray-700 block"
                           >Secondary state</a
                         >
                         <a href="" class="text-theme-9 block">Success state</a>
diff --git a/src/views/UpdateProfile.vue b/src/views/UpdateProfile.vue
index 1423c1a..8110d6c 100644
--- a/src/views/UpdateProfile.vue
+++ b/src/views/UpdateProfile.vue
@@ -26,32 +26,32 @@
             <div class="dropdown">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="dropdown-box w-56">
-                <div class="dropdown-box__content box dark:bg-dark-1">
+                <div class="dropdown-box__content box">
                   <div
-                    class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium"
+                    class="p-4 border-b border-gray-200 font-medium"
                   >
                     Export Options
                   </div>
                   <div class="p-2">
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <ActivityIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       English
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <BoxIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Indonesia
                       <div
@@ -62,25 +62,25 @@
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <LayoutIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       English
                     </a>
                     <a
                       href=""
-                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                      class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                     >
                       <SidebarIcon
-                        class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"
+                        class="w-4 h-4 text-gray-700 mr-2"
                       />
                       Indonesia
                     </a>
                   </div>
                   <div
-                    class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex"
+                    class="px-3 py-3 border-t border-gray-200 font-medium flex"
                   >
                     <button
                       type="button"
@@ -90,7 +90,7 @@
                     </button>
                     <button
                       type="button"
-                      class="button button--sm bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+                      class="button button--sm bg-gray-200 text-gray-600 ml-auto"
                     >
                       View Profile
                     </button>
@@ -99,9 +99,9 @@
               </div>
             </div>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a
-              class="flex items-center text-theme-1 dark:text-theme-10 font-medium"
+              class="flex items-center text-theme-1 font-medium"
               href=""
             >
               <ActivityIcon class="w-4 h-4 mr-2" /> Personal Information
@@ -116,7 +116,7 @@
               <SettingsIcon class="w-4 h-4 mr-2" /> User Settings
             </a>
           </div>
-          <div class="p-5 border-t border-gray-200 dark:border-dark-5">
+          <div class="p-5 border-t border-gray-200">
             <a class="flex items-center" href="">
               <ActivityIcon class="w-4 h-4 mr-2" /> Email Settings
             </a>
@@ -130,7 +130,7 @@
               <SettingsIcon class="w-4 h-4 mr-2" /> Tax Information
             </a>
           </div>
-          <div class="p-5 border-t flex dark:border-dark-5">
+          <div class="p-5 border-t flex">
             <button
               type="button"
               class="button button--sm block bg-theme-1 text-white"
@@ -139,7 +139,7 @@
             </button>
             <button
               type="button"
-              class="button button--sm border text-gray-700 dark:border-dark-5 dark:bg-dark-5 dark:text-gray-300 ml-auto"
+              class="button button--sm border text-gray-700 ml-auto"
             >
               New Quick Link
             </button>
@@ -151,7 +151,7 @@
         <!-- BEGIN: Display Information -->
         <div class="intro-y box lg:mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Display Information</h2>
           </div>
@@ -159,7 +159,7 @@
             <div class="grid grid-cols-12 gap-5">
               <div class="col-span-12 xl:col-span-4">
                 <div
-                  class="border border-gray-200 dark:border-dark-5 rounded-md p-5"
+                  class="border border-gray-200 rounded-md p-5"
                 >
                   <div
                     class="w-40 h-40 relative image-fit cursor-pointer zoom-in mx-auto"
@@ -271,7 +271,7 @@
         <!-- BEGIN: Personal Information -->
         <div class="intro-y box lg:mt-5">
           <div
-            class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Personal Information</h2>
           </div>
diff --git a/src/views/UsersLayout1.vue b/src/views/UsersLayout1.vue
index 569fb26..bed853a 100644
--- a/src/views/UsersLayout1.vue
+++ b/src/views/UsersLayout1.vue
@@ -10,23 +10,23 @@
         </button>
         <div class="dropdown">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <PlusIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <UsersIcon class="w-4 h-4 mr-2" /> Add Group
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <MessageCircleIcon class="w-4 h-4 mr-2" /> Send Message
               </a>
@@ -37,7 +37,7 @@
           Showing 1 to 10 of 150 entries
         </div>
         <div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
-          <div class="w-56 relative text-gray-700 dark:text-gray-300">
+          <div class="w-56 relative text-gray-700">
             <input
               type="text"
               class="input w-56 box pr-10 placeholder-theme-13"
@@ -57,7 +57,7 @@
       >
         <div class="box">
           <div
-            class="flex flex-col lg:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col lg:flex-row items-center p-5 border-b border-gray-200"
           >
             <div class="w-24 h-24 lg:w-12 lg:h-12 image-fit lg:mr-1">
               <img
@@ -76,7 +76,7 @@
               <Tippy
                 tag="a"
                 href=""
-                class="w-8 h-8 rounded-full flex items-center justify-center border dark:border-dark-5 ml-2 text-gray-500 zoom-in"
+                class="w-8 h-8 rounded-full flex items-center justify-center border ml-2 text-gray-500 zoom-in"
                 content="Facebook"
               >
                 <FacebookIcon class="w-3 h-3 fill-current" />
@@ -84,7 +84,7 @@
               <Tippy
                 tag="a"
                 href=""
-                class="w-8 h-8 rounded-full flex items-center justify-center border dark:border-dark-5 ml-2 text-gray-500 zoom-in"
+                class="w-8 h-8 rounded-full flex items-center justify-center border ml-2 text-gray-500 zoom-in"
                 content="Twitter"
               >
                 <TwitterIcon class="w-3 h-3 fill-current" />
@@ -92,7 +92,7 @@
               <Tippy
                 tag="a"
                 href=""
-                class="w-8 h-8 rounded-full flex items-center justify-center border dark:border-dark-5 ml-2 text-gray-500 zoom-in"
+                class="w-8 h-8 rounded-full flex items-center justify-center border ml-2 text-gray-500 zoom-in"
                 content="Linked In"
               >
                 <LinkedinIcon class="w-3 h-3 fill-current" />
@@ -108,10 +108,10 @@
                 <div class="text-xs font-medium">20</div>
               </div>
               <div
-                class="w-full h-1 mt-2 bg-gray-400 dark:bg-dark-1 rounded-full"
+                class="w-full h-1 mt-2 bg-gray-400 rounded-full"
               >
                 <div
-                  class="w-1/4 h-full bg-theme-1 dark:bg-theme-10 rounded-full"
+                  class="w-1/4 h-full bg-theme-1 rounded-full"
                 ></div>
               </div>
             </div>
@@ -119,7 +119,7 @@
               Message
             </button>
             <button
-              class="button button--sm text-gray-700 border border-gray-300 dark:border-dark-5 dark:text-gray-300"
+              class="button button--sm text-gray-700 border border-gray-300"
             >
               Profile
             </button>
diff --git a/src/views/UsersLayout2.vue b/src/views/UsersLayout2.vue
index 4c41ba3..df4585f 100644
--- a/src/views/UsersLayout2.vue
+++ b/src/views/UsersLayout2.vue
@@ -10,23 +10,23 @@
         </button>
         <div class="dropdown">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <PlusIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <UsersIcon class="w-4 h-4 mr-2" /> Add Group
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <MessageCircleIcon class="w-4 h-4 mr-2" /> Send Message
               </a>
@@ -37,7 +37,7 @@
           Showing 1 to 10 of 150 entries
         </div>
         <div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
-          <div class="w-56 relative text-gray-700 dark:text-gray-300">
+          <div class="w-56 relative text-gray-700">
             <input
               type="text"
               class="input w-56 box pr-10 placeholder-theme-13"
@@ -75,7 +75,7 @@
                 Message
               </button>
               <button
-                class="button button--sm text-gray-700 border border-gray-300 dark:border-dark-5 dark:text-gray-300"
+                class="button button--sm text-gray-700 border border-gray-300"
               >
                 Profile
               </button>
diff --git a/src/views/UsersLayout3.vue b/src/views/UsersLayout3.vue
index 8391e3c..729cce5 100644
--- a/src/views/UsersLayout3.vue
+++ b/src/views/UsersLayout3.vue
@@ -10,23 +10,23 @@
         </button>
         <div class="dropdown">
           <button
-            class="dropdown-toggle button px-2 box text-gray-700 dark:text-gray-300"
+            class="dropdown-toggle button px-2 box text-gray-700"
           >
             <span class="w-5 h-5 flex items-center justify-center">
               <PlusIcon class="w-4 h-4" />
             </span>
           </button>
           <div class="dropdown-box w-40">
-            <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+            <div class="dropdown-box__content box p-2">
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <UsersIcon class="w-4 h-4 mr-2" /> Add Group
               </a>
               <a
                 href=""
-                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
               >
                 <MessageCircleIcon class="w-4 h-4 mr-2" /> Send Message
               </a>
@@ -37,7 +37,7 @@
           Showing 1 to 10 of 150 entries
         </div>
         <div class="w-full sm:w-auto mt-3 sm:mt-0 sm:ml-auto md:ml-0">
-          <div class="w-56 relative text-gray-700 dark:text-gray-300">
+          <div class="w-56 relative text-gray-700">
             <input
               type="text"
               class="input w-56 box pr-10 placeholder-theme-13"
@@ -73,20 +73,20 @@
             <div class="absolute right-0 top-0 dropdown">
               <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                 <MoreHorizontalIcon
-                  class="w-5 h-5 text-gray-700 dark:text-gray-300"
+                  class="w-5 h-5 text-gray-700"
                 />
               </a>
               <div class="dropdown-box w-40">
-                <div class="dropdown-box__content box dark:bg-dark-1 p-2">
+                <div class="dropdown-box__content box p-2">
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <Edit2Icon class="w-4 h-4 mr-2" /> Edit
                   </a>
                   <a
                     href=""
-                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md"
+                    class="flex items-center block p-2 transition duration-300 ease-in-out bg-white hover:bg-gray-200:bg-dark-2 rounded-md"
                   >
                     <TrashIcon class="w-4 h-4 mr-2" /> Delete
                   </a>
@@ -110,13 +110,13 @@
             </div>
           </div>
           <div
-            class="text-center lg:text-right p-5 border-t border-gray-200 dark:border-dark-5"
+            class="text-center lg:text-right p-5 border-t border-gray-200"
           >
             <button class="button button--sm text-white bg-theme-1 mr-2">
               Message
             </button>
             <button
-              class="button button--sm text-gray-700 border border-gray-300 dark:border-dark-5 dark:text-gray-300"
+              class="button button--sm text-gray-700 border border-gray-300"
             >
               Profile
             </button>
diff --git a/src/views/Validation.vue b/src/views/Validation.vue
index 3e2e6f0..bdacbf7 100644
--- a/src/views/Validation.vue
+++ b/src/views/Validation.vue
@@ -8,7 +8,7 @@
         <!-- BEGIN: Form Validation -->
         <div class="intro-y box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Implementation</h2>
             <div
@@ -175,7 +175,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-form-validation"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
diff --git a/src/views/WizardLayout1.vue b/src/views/WizardLayout1.vue
index b58b25f..fc90f02 100644
--- a/src/views/WizardLayout1.vue
+++ b/src/views/WizardLayout1.vue
@@ -12,12 +12,12 @@
           1
         </button>
         <button
-          class="intro-y w-10 h-10 rounded-full button bg-gray-200 dark:bg-dark-1 text-gray-600 mx-2"
+          class="intro-y w-10 h-10 rounded-full button bg-gray-200 text-gray-600 mx-2"
         >
           2
         </button>
         <button
-          class="intro-y w-10 h-10 rounded-full button bg-gray-200 dark:bg-dark-1 text-gray-600 mx-2"
+          class="intro-y w-10 h-10 rounded-full button bg-gray-200 text-gray-600 mx-2"
         >
           3
         </button>
@@ -29,7 +29,7 @@
         </div>
       </div>
       <div
-        class="px-5 sm:px-20 mt-10 pt-10 border-t border-gray-200 dark:border-dark-5"
+        class="px-5 sm:px-20 mt-10 pt-10 border-t border-gray-200"
       >
         <div class="font-medium text-base">Profile Settings</div>
         <div class="grid grid-cols-12 gap-4 row-gap-5 mt-5">
@@ -86,7 +86,7 @@
             class="intro-y col-span-12 flex items-center justify-center sm:justify-end mt-5"
           >
             <button
-              class="button w-24 justify-center block bg-gray-200 text-gray-600 dark:bg-dark-1 dark:text-gray-300"
+              class="button w-24 justify-center block bg-gray-200 text-gray-600"
             >
               Previous
             </button>
diff --git a/src/views/WizardLayout2.vue b/src/views/WizardLayout2.vue
index 6980423..63a59ba 100644
--- a/src/views/WizardLayout2.vue
+++ b/src/views/WizardLayout2.vue
@@ -14,47 +14,47 @@
         </div>
         <div class="intro-x flex items-center mt-5">
           <button
-            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200 dark:bg-dark-1"
+            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200"
           >
             2
           </button>
-          <div class="text-base text-gray-700 dark:text-gray-600 ml-3">
+          <div class="text-base text-gray-700 ml-3">
             Setup Your Profile
           </div>
         </div>
         <div class="intro-x flex items-center mt-5">
           <button
-            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200 dark:bg-dark-1"
+            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200"
           >
             3
           </button>
-          <div class="text-base text-gray-700 dark:text-gray-600 ml-3">
+          <div class="text-base text-gray-700 ml-3">
             Setup Your Business Details
           </div>
         </div>
         <div class="intro-x flex items-center mt-5">
           <button
-            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200 dark:bg-dark-1"
+            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200"
           >
             4
           </button>
-          <div class="text-base text-gray-700 dark:text-gray-600 ml-3">
+          <div class="text-base text-gray-700 ml-3">
             Setup Billing Account
           </div>
         </div>
         <div class="intro-x flex items-center mt-5">
           <button
-            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200 dark:bg-dark-1"
+            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200"
           >
             5
           </button>
-          <div class="text-base text-gray-700 dark:text-gray-600 ml-3">
+          <div class="text-base text-gray-700 ml-3">
             Finalize your purchase
           </div>
         </div>
       </div>
       <div
-        class="px-5 sm:px-20 mt-10 pt-10 border-t border-gray-200 dark:border-dark-5"
+        class="px-5 sm:px-20 mt-10 pt-10 border-t border-gray-200"
       >
         <div class="font-medium text-base">Profile Settings</div>
         <div class="grid grid-cols-12 gap-4 row-gap-5 mt-5">
@@ -111,7 +111,7 @@
             class="intro-y col-span-12 flex items-center justify-center sm:justify-end mt-5"
           >
             <button
-              class="button w-24 justify-center block bg-gray-200 text-gray-600 dark:bg-dark-1 dark:text-gray-300"
+              class="button w-24 justify-center block bg-gray-200 text-gray-600"
             >
               Previous
             </button>
diff --git a/src/views/WizardLayout3.vue b/src/views/WizardLayout3.vue
index c4ca60a..6c6ebb1 100644
--- a/src/views/WizardLayout3.vue
+++ b/src/views/WizardLayout3.vue
@@ -22,12 +22,12 @@
           class="intro-x lg:text-center flex items-center mt-5 lg:mt-0 lg:block flex-1 z-10"
         >
           <button
-            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200 dark:bg-dark-1"
+            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200"
           >
             2
           </button>
           <div
-            class="lg:w-32 text-base lg:mt-3 ml-3 lg:mx-auto text-gray-700 dark:text-gray-600"
+            class="lg:w-32 text-base lg:mt-3 ml-3 lg:mx-auto text-gray-700"
           >
             Setup Your Profile
           </div>
@@ -36,12 +36,12 @@
           class="intro-x lg:text-center flex items-center mt-5 lg:mt-0 lg:block flex-1 z-10"
         >
           <button
-            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200 dark:bg-dark-1"
+            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200"
           >
             3
           </button>
           <div
-            class="lg:w-32 text-base lg:mt-3 ml-3 lg:mx-auto text-gray-700 dark:text-gray-600"
+            class="lg:w-32 text-base lg:mt-3 ml-3 lg:mx-auto text-gray-700"
           >
             Setup Your Business Details
           </div>
@@ -50,12 +50,12 @@
           class="intro-x lg:text-center flex items-center mt-5 lg:mt-0 lg:block flex-1 z-10"
         >
           <button
-            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200 dark:bg-dark-1"
+            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200"
           >
             4
           </button>
           <div
-            class="lg:w-32 text-base lg:mt-3 ml-3 lg:mx-auto text-gray-700 dark:text-gray-600"
+            class="lg:w-32 text-base lg:mt-3 ml-3 lg:mx-auto text-gray-700"
           >
             Setup Billing Account
           </div>
@@ -64,22 +64,22 @@
           class="intro-x lg:text-center flex items-center mt-5 lg:mt-0 lg:block flex-1 z-10"
         >
           <button
-            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200 dark:bg-dark-1"
+            class="w-10 h-10 rounded-full button text-gray-600 bg-gray-200"
           >
             5
           </button>
           <div
-            class="lg:w-32 text-base lg:mt-3 ml-3 lg:mx-auto text-gray-700 dark:text-gray-600"
+            class="lg:w-32 text-base lg:mt-3 ml-3 lg:mx-auto text-gray-700"
           >
             Finalize your purchase
           </div>
         </div>
         <div
-          class="wizard__line hidden lg:block w-2/3 bg-gray-200 dark:bg-dark-1 absolute mt-5"
+          class="wizard__line hidden lg:block w-2/3 bg-gray-200 absolute mt-5"
         ></div>
       </div>
       <div
-        class="px-5 sm:px-20 mt-10 pt-10 border-t border-gray-200 dark:border-dark-5"
+        class="px-5 sm:px-20 mt-10 pt-10 border-t border-gray-200"
       >
         <div class="font-medium text-base">Profile Settings</div>
         <div class="grid grid-cols-12 gap-4 row-gap-5 mt-5">
@@ -136,7 +136,7 @@
             class="intro-y col-span-12 flex items-center justify-center sm:justify-end mt-5"
           >
             <button
-              class="button w-24 justify-center block bg-gray-200 text-gray-600 dark:bg-dark-1 dark:text-gray-300"
+              class="button w-24 justify-center block bg-gray-200 text-gray-600"
             >
               Previous
             </button>
diff --git a/src/views/WysiwygEditor.vue b/src/views/WysiwygEditor.vue
index 6a9d241..a20b320 100644
--- a/src/views/WysiwygEditor.vue
+++ b/src/views/WysiwygEditor.vue
@@ -8,7 +8,7 @@
       <div class="col-span-12 lg:col-span-6">
         <div class="box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Simple Editor</h2>
             <div
@@ -33,7 +33,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-simple-editor"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -61,7 +61,7 @@
       <div class="col-span-12 lg:col-span-6">
         <div class="box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Standard Editor</h2>
             <div
@@ -86,7 +86,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-standard-editor"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -110,7 +110,7 @@
       <div class="col-span-12 lg:col-span-6">
         <div class="box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Inline Editor</h2>
             <div
@@ -136,7 +136,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-inline-editor"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -160,7 +160,7 @@
       <div class="col-span-12 lg:col-span-6">
         <div class="box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Balloon Editor</h2>
             <div
@@ -185,7 +185,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-balloon-editor"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>
@@ -209,7 +209,7 @@
       <div class="col-span-12">
         <div class="box">
           <div
-            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200 dark:border-dark-5"
+            class="flex flex-col sm:flex-row items-center p-5 border-b border-gray-200"
           >
             <h2 class="font-medium text-base mr-auto">Document Editor</h2>
             <div
@@ -245,7 +245,7 @@
             <div class="source-code hidden">
               <button
                 data-target="#copy-document-editor"
-                class="copy-code button button--sm border flex items-center text-gray-700 dark:border-dark-5 dark:text-gray-300"
+                class="copy-code button button--sm border flex items-center text-gray-700"
               >
                 <FileIcon class="w-4 h-4 mr-2" /> Copy example code
               </button>