删除dark模式,vue

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

src/utils/request.js

@@ -19,7 +19,6 @@ service.interceptors.request.use(
 	}
 )
 
-
 // response interceptor
 service.interceptors.response.use(
 	response => {

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

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

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>

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:

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"

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

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" />

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>

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>

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"

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>

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

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>

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>

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

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

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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

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.

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.

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>

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">

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>

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>

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>

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>

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"

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>

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

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>

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>

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>