diff --git a/exampleSite/layouts/partials/recent-articles-demo.html b/exampleSite/layouts/partials/recent-articles-demo.html
index 2866e684..d3cdf0d1 100644
--- a/exampleSite/layouts/partials/recent-articles-demo.html
+++ b/exampleSite/layouts/partials/recent-articles-demo.html
@@ -39,7 +39,7 @@
   <div class="mt-10 flex justify-center">
     <a href="{{ $showMoreLinkDest }}">
       <button
-        class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">
+        class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold py-2 px-4 border border-primary-500 hover:border-transparent rounded">
         {{ i18n "recent.show_more" | markdownify }}
       </button>
     </a>
diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html
index 3565d314..7fdcac6e 100644
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -145,7 +145,7 @@
                         {{ partial "icon.html" .Pre }}
                       </span>
                     {{ end }}
-                    <p class="text-sm font-sm text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+                    <p class="text-sm font-sm" title="{{ .Title }}">
                       {{ .Name | markdownify }}
                     </p>
                   </a>
@@ -245,7 +245,7 @@
   <div class="flex flex-1 items-center justify-between">
     <nav class="flex space-x-3">
       {{ if not .Site.Params.disableTextInHeader | default true }}
-        <a href="{{ "" | relLangURL }}" class="text-base font-medium text-gray-500 hover:text-gray-900">
+        <a href="{{ "" | relLangURL }}" class="text-base font-medium">
           {{ .Site.Title | markdownify }}
         </a>
       {{ end }}
@@ -274,7 +274,7 @@
               {{ partial "icon.html" .Pre }}
             </span>
           {{ end }}
-          <p class="text-xs font-light text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+          <p class="text-xs font-light" title="{{ .Title }}">
             {{ .Name | markdownify }}
           </p>
         </a>
diff --git a/layouts/partials/header/header-mobile-option-nested.html b/layouts/partials/header/header-mobile-option-nested.html
index bcbd0a2a..9670c36e 100644
--- a/layouts/partials/header/header-mobile-option-nested.html
+++ b/layouts/partials/header/header-mobile-option-nested.html
@@ -1,7 +1,7 @@
 <li class="mt-1">
   <a
     href="{{ .URL }}"
-    class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
+    class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
     {{ if .Pre }}
       <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
         {{ partial "icon.html" .Pre }}
@@ -24,7 +24,7 @@
       }}
         target="_blank"
       {{ end }}
-      class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
+      class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
       {{ if .Pre }}
         <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
           {{ partial "icon.html" .Pre }}
diff --git a/layouts/partials/header/header-mobile-option-simple.html b/layouts/partials/header/header-mobile-option-simple.html
index 98a77b33..c6aff603 100644
--- a/layouts/partials/header/header-mobile-option-simple.html
+++ b/layouts/partials/header/header-mobile-option-simple.html
@@ -6,7 +6,7 @@
     }}
       target="_blank"
     {{ end }}
-    class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
+    class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
     {{ if .Pre }}
       <div {{ if and .Pre .Name }}class="mr-2"{{ end }}>
         {{ partial "icon.html" .Pre }}
diff --git a/layouts/partials/header/header-option-nested.html b/layouts/partials/header/header-option-nested.html
index 7e96d98b..9110f2ea 100644
--- a/layouts/partials/header/header-option-nested.html
+++ b/layouts/partials/header/header-option-nested.html
@@ -12,7 +12,7 @@
           target="_blank"
         {{ end }}
       {{ end }}
-      class="text-base font-medium text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"
+      class="text-base font-medium hover:text-primary-600 dark:hover:text-primary-400"
       title="{{ .Title }}">
       <p>
         {{ .Name | markdownify }}
@@ -31,7 +31,7 @@
             {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
               target="_blank"
             {{ end }}
-            class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
+            class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
             {{ if .Pre }}
               <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
                 {{ partial "icon.html" .Pre }}
diff --git a/layouts/partials/header/header-option-simple.html b/layouts/partials/header/header-option-simple.html
index a934a5b9..cfae8e22 100644
--- a/layouts/partials/header/header-option-simple.html
+++ b/layouts/partials/header/header-option-simple.html
@@ -1,7 +1,7 @@
 <a
   href="{{ .URL }}"
   {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}target="_blank"{{ end }}
-  class="flex items-center text-gray-500 hover:text-primary-600 dark:hover:text-primary-400">
+  class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
   {{ if .Pre }}
     <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
       {{ partial "icon.html" .Pre }}
diff --git a/layouts/partials/home/background.html b/layouts/partials/home/background.html
index 4e3c7534..b7b94396 100644
--- a/layouts/partials/home/background.html
+++ b/layouts/partials/home/background.html
@@ -1,7 +1,7 @@
 {{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
 <article class="prose dark:prose-invert max-w-full">
   <div class="relative">
-    <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
+    <div class="absolute inset-x-0 bottom-0 h-1/2"></div>
     <div class="mx-auto max-w-7xl p-0">
       <div class="relative sm:overflow-hidden">
         <div class="fixed inset-x-0 top-0 -z-10">
diff --git a/layouts/partials/home/card.html b/layouts/partials/home/card.html
index b117a747..1d36fd19 100644
--- a/layouts/partials/home/card.html
+++ b/layouts/partials/home/card.html
@@ -1,5 +1,5 @@
 <div class="relative pt-16 pb-32">
-  <div aria-hidden="true" class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b from-gray-100"></div>
+  <div aria-hidden="true" class="absolute inset-x-0 top-0 h-48 bg-gradient-to-b"></div>
   <div class="relative">
     <div class="lg:mx-auto lg:grid lg:max-w-7xl lg:grid-flow-col-dense lg:grid-cols-2 lg:gap-24 lg:px-8">
       <div class="mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
diff --git a/layouts/partials/home/hero.html b/layouts/partials/home/hero.html
index e3047af5..679ff679 100644
--- a/layouts/partials/home/hero.html
+++ b/layouts/partials/home/hero.html
@@ -2,7 +2,7 @@
 {{ $disableHeroImageFilter := .Site.Params.homepage.disableHeroImageFilter | default false }}
 <article class="max-w-full prose dark:prose-invert">
   <div class="relative">
-    <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
+    <div class="absolute inset-x-0 bottom-0 h-1/2"></div>
     <div class="mx-auto max-w-7xl p-0">
       <div class="relative shadow-xl sm:overflow-hidden rounded-2xl">
         <div class="absolute inset-0">
diff --git a/layouts/partials/recent-articles/main.html b/layouts/partials/recent-articles/main.html
index 418ee838..2b766a9f 100644
--- a/layouts/partials/recent-articles/main.html
+++ b/layouts/partials/recent-articles/main.html
@@ -21,7 +21,7 @@
     <div class="mt-10 flex justify-center">
       <a href="{{ $showMoreLinkDest }}">
         <button
-          class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold hover:text-white py-2 px-4 border border-primary-500 hover:border-transparent rounded">
+          class="bg-transparent hover:text-primary-500 prose dark:prose-invert font-semibold py-2 px-4 border border-primary-500 hover:border-transparent rounded">
           {{ i18n "recent.show_more" | markdownify }}
         </button>
       </a>
diff --git a/layouts/partials/translations.html b/layouts/partials/translations.html
index f659d9af..77236524 100644
--- a/layouts/partials/translations.html
+++ b/layouts/partials/translations.html
@@ -5,7 +5,7 @@
         {{ partial "icon.html" "language" }}
       </span>
       <div
-        class="text-sm font-medium text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"
+        class="text-sm font-medium hover:text-primary-600 dark:hover:text-primary-400"
         title="{{ .Title }}">
         {{- i18n "global.language" | markdownify -}}
       </div>
@@ -16,7 +16,7 @@
           {{ range .AllTranslations }}
             <a href="{{ .RelPermalink }}" class="flex items-center">
               <p
-                class="text-sm font-sm text-gray-500 hover:text-primary-600 dark:hover:text-primary-400"
+                class="text-sm font-sm hover:text-primary-600 dark:hover:text-primary-400"
                 title="{{ .Title }}">
                 {{ .Language.Params.displayName | emojify }}
               </p>
diff --git a/layouts/shortcodes/carousel.html b/layouts/shortcodes/carousel.html
index 1355e874..f782ca23 100644
--- a/layouts/shortcodes/carousel.html
+++ b/layouts/shortcodes/carousel.html
@@ -71,7 +71,7 @@
   </div>
 
   <button
-    class="absolute top-0 bottom-0 left-0 z-2 flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+    class="absolute top-0 bottom-0 left-0 z-2 flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
     type="button"
     data-twe-target="#{{ $id }}"
     data-twe-slide="prev">
@@ -93,7 +93,7 @@
   </button>
 
   <button
-    class="absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
+    class="absolute top-0 bottom-0 right-0 z-[1] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:no-underline hover:opacity-90 hover:outline-none focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
     type="button"
     data-twe-target="#{{ $id }}"
     data-twe-slide="next">