From a01fd3880f31b3186edf675feb6b487ea071a839 Mon Sep 17 00:00:00 2001
From: prototypa <prototypearea.dev@gmail.com>
Date: Sun, 22 Jan 2023 00:40:14 -0500
Subject: [PATCH] Improve design using custom variables

---
 src/components/blog/GridItem.astro         |  4 ++--
 src/components/blog/HighlightedPosts.astro |  4 ++--
 src/components/blog/LatestPosts.astro      |  4 ++--
 src/components/blog/ListItem.astro         |  8 ++++----
 src/components/blog/SinglePost.astro       | 12 ++++++------
 src/components/blog/Tags.astro             |  2 +-
 src/components/common/ToggleTheme.astro    |  2 +-
 src/components/widgets/Announcement.astro  |  4 ++--
 src/components/widgets/CallToAction.astro  |  2 +-
 src/components/widgets/Content.astro       | 14 +++++++-------
 src/components/widgets/FAQs.astro          |  8 ++++----
 src/components/widgets/Features.astro      |  8 ++++----
 src/components/widgets/Features2.astro     |  8 ++++----
 src/components/widgets/Footer.astro        | 12 ++++++------
 src/components/widgets/Header.astro        | 16 ++++++++++------
 src/components/widgets/Hero.astro          |  2 +-
 src/components/widgets/Note.astro          |  2 +-
 src/components/widgets/Stats.astro         |  6 +++---
 src/components/widgets/Steps.astro         | 10 +++++-----
 src/components/widgets/Steps2.astro        |  8 ++++----
 src/layouts/BaseLayout.astro               |  2 +-
 src/layouts/MarkdownLayout.astro           |  2 +-
 src/layouts/PageLayout.astro               |  2 +-
 src/pages/404.astro                        |  4 ++--
 src/pages/index.astro                      | 11 +++++------
 25 files changed, 80 insertions(+), 77 deletions(-)

diff --git a/src/components/blog/GridItem.astro b/src/components/blog/GridItem.astro
index 95fd1ed..a873018 100644
--- a/src/components/blog/GridItem.astro
+++ b/src/components/blog/GridItem.astro
@@ -39,12 +39,12 @@ const image = await findImage(post.image);
       ) : (
         <a
           href={getPermalink(post.slug, 'post')}
-          class="hover:text-primary-800 dark:hover:text-primary-700  transition ease-in duration-200"
+          class="hover:text-primary dark:hover:text-blue-700  transition ease-in duration-200"
         >
           {post.title}
         </a>
       )
     }
   </h3>
-  <p class="text-gray-500 dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
+  <p class="text-muted dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
 </article>
diff --git a/src/components/blog/HighlightedPosts.astro b/src/components/blog/HighlightedPosts.astro
index 08932dc..875ab84 100644
--- a/src/components/blog/HighlightedPosts.astro
+++ b/src/components/blog/HighlightedPosts.astro
@@ -37,7 +37,7 @@ const posts = await findPostsByIds(postIds);
       {
         allPostsText && allPostsLink && (
           <a
-            class="text-gray-500 dark:text-slate-400 hover:text-primary-800 transition ease-in duration-200 block mb-6 md:mb-0"
+            class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 md:mb-0"
             href={allPostsLink}
           >
             {allPostsText} »
@@ -46,7 +46,7 @@ const posts = await findPostsByIds(postIds);
       }
     </div>
 
-    {information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
+    {information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
   </div>
 
   <Grid posts={posts} />
diff --git a/src/components/blog/LatestPosts.astro b/src/components/blog/LatestPosts.astro
index 96244e2..e608b22 100644
--- a/src/components/blog/LatestPosts.astro
+++ b/src/components/blog/LatestPosts.astro
@@ -37,7 +37,7 @@ const posts = await findLatestPosts({ count });
       {
         allPostsText && allPostsLink && (
           <a
-            class="text-gray-500 dark:text-slate-400 hover:text-primary-800 transition ease-in duration-200 block mb-6 md:mb-0"
+            class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 lg:mb-0"
             href={allPostsLink}
           >
             {allPostsText} »
@@ -46,7 +46,7 @@ const posts = await findLatestPosts({ count });
       }
     </div>
 
-    {information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
+    {information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
   </div>
 
   <Grid posts={posts} />
diff --git a/src/components/blog/ListItem.astro b/src/components/blog/ListItem.astro
index 039389b..06fe825 100644
--- a/src/components/blog/ListItem.astro
+++ b/src/components/blog/ListItem.astro
@@ -43,15 +43,15 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
     <header>
       <div class="mb-1">
         <span class="text-sm">
-          <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 text-gray-500 dark:text-gray-400" />
+          <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
           <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
           {Math.ceil(post.readingTime)} min read
         </span>
       </div>
-      <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading text-gray-700 dark:text-slate-300">
+      <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
         {
           link ? (
-            <a class="hover:text-primary-800 dark:hover:text-primary-700 transition ease-in duration-200" href={link}>
+            <a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={link}>
               {post.title}
             </a>
           ) : (
@@ -61,7 +61,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
       </h2>
     </header>
 
-    {post.excerpt && <p class="flex-grow text-gray-500 dark:text-slate-400 text-lg">{post.excerpt}</p>}
+    {post.excerpt && <p class="flex-grow text-muted dark:text-slate-400 text-lg">{post.excerpt}</p>}
     <footer class="mt-5">
       <PostTags tags={post.tags} />
     </footer>
diff --git a/src/components/blog/SinglePost.astro b/src/components/blog/SinglePost.astro
index ad9919d..32b7f1a 100644
--- a/src/components/blog/SinglePost.astro
+++ b/src/components/blog/SinglePost.astro
@@ -22,10 +22,10 @@ const { post, url } = Astro.props;
     <header class={post.image ? '' : ''}>
       <div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
         <p>
-          <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 text-gray-500 dark:text-gray-400" />
-          <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
-            Math.ceil(post.readingTime)
-          } min read
+        <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 dark:text-gray-400" />
+        <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
+          Math.ceil(post.readingTime)
+        } min read
         </p>
       </div>
       <h1
@@ -34,7 +34,7 @@ const { post, url } = Astro.props;
         {post.title}
       </h1>
       <p
-        class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-gray-500 dark:text-slate-400 font-medium text-justify"
+        class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-muted dark:text-slate-400 text-justify"
       >
         {post.excerpt}
       </p>
@@ -60,7 +60,7 @@ const { post, url } = Astro.props;
       }
     </header>
     <div
-      class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-800 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
+      class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
     >
       {
         post.Content ? (
diff --git a/src/components/blog/Tags.astro b/src/components/blog/Tags.astro
index a285652..122cd91 100644
--- a/src/components/blog/Tags.astro
+++ b/src/components/blog/Tags.astro
@@ -22,7 +22,7 @@ const { tags, class: className = 'text-sm' } = Astro.props;
           ) : (
             <a
               href={getPermalink(tag, 'tag')}
-              class="text-gray-600 dark:text-slate-300 hover:text-primary-800 dark:hover:text-gray-200"
+              class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
             >
               {tag}
             </a>
diff --git a/src/components/common/ToggleTheme.astro b/src/components/common/ToggleTheme.astro
index a49986e..5591ad0 100644
--- a/src/components/common/ToggleTheme.astro
+++ b/src/components/common/ToggleTheme.astro
@@ -13,7 +13,7 @@ export interface Props {
 const {
   label = 'Toggle between Dark and Light mode',
   class:
-    className = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
+    className = 'text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
   iconClass = 'w-6 h-6',
   iconName = 'tabler:sun',
 } = Astro.props;
diff --git a/src/components/widgets/Announcement.astro b/src/components/widgets/Announcement.astro
index be58a2b..41a2586 100644
--- a/src/components/widgets/Announcement.astro
+++ b/src/components/widgets/Announcement.astro
@@ -3,9 +3,9 @@ import { getPermalink } from '~/utils/permalinks';
 ---
 
 <div
-  class="hidden md:block bg-primary-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
+  class="hidden md:block bg-blue-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-blue-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
 >
-  <span class="text-xs py-0.5 px-1 bg-primary-800 dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
+  <span class="text-xs py-0.5 px-1 bg-primary dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
   <a
     href={getPermalink('useful-resources-to-create-websites', 'post')}
     class="hover:underline text-gray-200 dark:text-slate-400"
diff --git a/src/components/widgets/CallToAction.astro b/src/components/widgets/CallToAction.astro
index 584bfe7..9d15608 100644
--- a/src/components/widgets/CallToAction.astro
+++ b/src/components/widgets/CallToAction.astro
@@ -34,7 +34,7 @@ const {
             />
           )
         }
-        {subtitle && <p class="text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
+        {subtitle && <p class="text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
         {
           typeof callToAction === 'string' ? (
             <Fragment set:html={callToAction} />
diff --git a/src/components/widgets/Content.astro b/src/components/widgets/Content.astro
index 009ad68..b055d5b 100644
--- a/src/components/widgets/Content.astro
+++ b/src/components/widgets/Content.astro
@@ -31,14 +31,14 @@ const {
 } = Astro.props;
 ---
 
-<section class={`bg-primary-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
+<section class={`bg-blue-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
   <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
     {
       (title || subtitle || highlight) && (
         <div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
           {highlight && (
             <p
-              class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+              class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
               set:html={highlight}
             />
           )}
@@ -50,7 +50,7 @@ const {
           )}
 
           {subtitle && (
-            <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
+            <p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
           )}
         </div>
       )
@@ -59,7 +59,7 @@ const {
   <div class="mx-auto max-w-screen-xl p-4 md:px-8">
     <div class={`md:flex ${isReversed ? 'md:flex-row-reverse' : ''} md:gap-16`}>
       <div class="md:basis-1/2 self-center">
-        {content && <div class="mb-12 text-lg text-gray-600 dark:text-slate-400" set:html={content} />}
+        {content && <div class="mb-12 text-lg dark:text-slate-400" set:html={content} />}
 
         {
           items && (
@@ -67,13 +67,13 @@ const {
               {items.map(({ title: title2, description, icon }) => (
                 <div class="flex">
                   <div class="flex-shrink-0">
-                    <div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary-800 text-gray-50">
+                    <div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-gray-50">
                       <Icon name={icon ? icon : 'tabler:check'} class="w-5 h-5" />
                     </div>
                   </div>
                   <div class="ml-4">
-                    {title2 && <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">{title2}</h3>}
-                    {description && <p class="mt-2 text-gray-600 dark:text-slate-400" set:html={description} />}
+                    {title2 && <h3 class="text-lg font-medium leading-6 dark:text-white">{title2}</h3>}
+                    {description && <p class="mt-2 text-muted dark:text-slate-400" set:html={description} />}
                   </div>
                 </div>
               ))}
diff --git a/src/components/widgets/FAQs.astro b/src/components/widgets/FAQs.astro
index caf3b8b..9a09e54 100644
--- a/src/components/widgets/FAQs.astro
+++ b/src/components/widgets/FAQs.astro
@@ -28,7 +28,7 @@ const {
         <div class="max-w-xl mb-10 md:mx-auto md:text-center lg:max-w-2xl md:mb-12">
           {highlight && (
             <p
-              class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+              class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
               set:html={highlight}
             />
           )}
@@ -38,7 +38,7 @@ const {
               set:html={title}
             />
           )}
-          {subtitle && <p class="max-w-3xl mx-auto text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
+          {subtitle && <p class="max-w-3xl mx-auto text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
         </div>
       )
     }
@@ -52,10 +52,10 @@ const {
               {subitems.map(({ question, answer }) => (
                 <div>
                   <h3 class="mb-4 text-xl font-bold">
-                    <Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary-800 inline-block" />
+                    <Icon name="tabler:arrow-down-right" class="w-7 h-7 text-primary inline-block" />
                     {question}
                   </h3>
-                  {answer && <div class="text-gray-700 dark:text-gray-400" set:html={answer} />}
+                  {answer && <div class="text-muted dark:text-gray-400" set:html={answer} />}
                 </div>
               ))}
             </div>
diff --git a/src/components/widgets/Features.astro b/src/components/widgets/Features.astro
index 8b7caab..4afaa55 100644
--- a/src/components/widgets/Features.astro
+++ b/src/components/widgets/Features.astro
@@ -29,7 +29,7 @@ const {
         <div class="mb-10 md:mx-auto text-center md:mb-12 max-w-3xl">
           {highlight && (
             <p
-              class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+              class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
               set:html={highlight}
             />
           )}
@@ -41,7 +41,7 @@ const {
           )}
 
           {subtitle && (
-            <p class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
+            <p class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
           )}
         </div>
       )
@@ -53,13 +53,13 @@ const {
             {subitems.map(({ title, description, icon }) => (
               <div class="flex flex-row max-w-md">
                 <div class="mb-4 mr-4">
-                  <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary-800 dark:bg-primary-700">
+                  <div class="flex items-center justify-center w-12 h-12 rounded-full bg-primary dark:bg-blue-700">
                     {icon && <Icon name={icon} class="w-6 h-6 text-white icon-light" />}
                   </div>
                 </div>
                 <div>
                   <h3 class="mb-3 text-xl font-bold">{title}</h3>
-                  <p class="text-gray-600 dark:text-slate-400" set:html={description} />
+                  <p class="text-muted dark:text-slate-400" set:html={description} />
                 </div>
               </div>
             ))}
diff --git a/src/components/widgets/Features2.astro b/src/components/widgets/Features2.astro
index ec521a9..f8f2704 100644
--- a/src/components/widgets/Features2.astro
+++ b/src/components/widgets/Features2.astro
@@ -23,7 +23,7 @@ const {
 ---
 
 <section class="relative">
-  <div class="absolute inset-0 bg-primary-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
+  <div class="absolute inset-0 bg-blue-50 dark:bg-slate-800 pointer-events-none mb-32" aria-hidden="true"></div>
   <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 -mb-12">
     <div class="py-4 pt-8 sm:py-6 lg:py-8 lg:pt-12">
       {
@@ -31,7 +31,7 @@ const {
           <div class="mb-8 md:mx-auto text-center max-w-3xl">
             {highlight && (
               <p
-                class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+                class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
                 set:html={highlight}
               />
             )}
@@ -44,7 +44,7 @@ const {
 
             {subtitle && (
               <p
-                class="max-w-3xl mx-auto sm:text-center text-xl text-gray-600 dark:text-slate-400"
+                class="max-w-3xl mx-auto sm:text-center text-xl text-muted dark:text-slate-400"
                 set:html={subtitle}
               />
             )}
@@ -59,7 +59,7 @@ const {
                 <Icon name={icon} class="w-10 h-10" />
                 <div class="ml-4 text-xl font-bold">{title}</div>
               </div>
-              {description && <p class="text-gray-500 dark:text-gray-400 text-md mt-4" set:html={description} />}
+              {description && <p class="text-muted dark:text-gray-400 text-md mt-4" set:html={description} />}
             </div>
           ))
         }
diff --git a/src/components/widgets/Footer.astro b/src/components/widgets/Footer.astro
index b3ef413..79d9b4d 100644
--- a/src/components/widgets/Footer.astro
+++ b/src/components/widgets/Footer.astro
@@ -34,11 +34,11 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
         <div class="mb-2">
           <a class="inline-block font-bold text-xl" href={getHomePermalink()}>{SITE?.name}</a>
         </div>
-        <div class="text-sm text-gray-600">
+        <div class="text-sm text-muted">
           {
             secondaryLinks.map(({ text, href }) => (
               <a
-                class="text-gray-600 hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
+                class="text-muted hover:text-gray-700 dark:text-gray-400 hover:underline transition duration-150 ease-in-out mr-2"
                 href={href}
                 set:html={text}
               />
@@ -49,13 +49,13 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
       {
         links.map(({ title, links }) => (
           <div class="col-span-6 md:col-span-3 lg:col-span-2">
-            <div class="text-gray-800 dark:text-gray-300 font-medium mb-2">{title}</div>
+            <div class="dark:text-gray-300 font-medium mb-2">{title}</div>
             {links && Array.isArray(links) && links.length > 0 && (
               <ul class="text-sm">
                 {links.map(({ text, href, ariaLabel }) => (
                   <li class="mb-2">
                     <a
-                      class="text-gray-600 hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
+                      class="text-muted hover:text-gray-700 hover:underline dark:text-gray-400 transition duration-150 ease-in-out"
                       href={href}
                       aria-label={ariaLabel}
                     >
@@ -76,7 +76,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
             {socialLinks.map(({ ariaLabel, href, text, icon }) => (
               <li>
                 <a
-                  class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+                  class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
                   aria-label={ariaLabel}
                   href={href}
                 >
@@ -91,7 +91,7 @@ const { socialLinks = [], secondaryLinks = [], links = [], footNote = '', theme
         )
       }
 
-      <div class="text-sm text-gray-700 mr-4 dark:text-slate-400">
+      <div class="text-sm mr-4 dark:text-slate-400">
         <Fragment set:html={footNote} />
       </div>
     </div>
diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
index fe5b841..09f734d 100644
--- a/src/components/widgets/Header.astro
+++ b/src/components/widgets/Header.astro
@@ -22,14 +22,18 @@ interface MenuLink extends Link {
 }
 
 export interface Props {
-  links: Array<MenuLink>;
-  actions: Array<ActionLink>;
+  links?: Array<MenuLink>;
+  actions?: Array<ActionLink>;
+  isFixed?: boolean;
 }
 
-const { links = [], actions = [] } = Astro.props;
+const { links = [], actions = [], isFixed = false } = Astro.props;
 ---
 
-<header class="sticky top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100" id="header">
+<header
+  class:list={[{ sticky: isFixed }, 'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100']}
+  id="header"
+>
   <div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-screen-xl">
     <div class="flex justify-between">
       <a class="flex items-center" href={getHomePermalink()}>
@@ -41,7 +45,7 @@ const { links = [], actions = [] } = Astro.props;
       </div>
     </div>
     <nav
-      class="items-center w-full md:w-auto hidden md:flex text-gray-800 dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
+      class="items-center w-full md:w-auto hidden md:flex dark:text-slate-200 h-[calc(100vh-72px)] md:h-auto overflow-y-auto md:overflow-visible"
       aria-label="Main navigation"
     >
       <ul class="flex flex-col pt-8 md:pt-0 md:flex-row md:self-center w-full md:w-auto text-xl md:text-base">
@@ -84,7 +88,7 @@ const { links = [], actions = [] } = Astro.props;
         <ToggleTheme iconClass="w-5 h-5" />
 
         <a
-          class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
+          class="text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center"
           aria-label="RSS Feed"
           href={getAsset('/rss.xml')}
         >
diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro
index 234c75c..f8c085b 100644
--- a/src/components/widgets/Hero.astro
+++ b/src/components/widgets/Hero.astro
@@ -41,7 +41,7 @@ const {
           )
         }
         <div class="max-w-3xl mx-auto">
-          {subtitle && <p class="text-xl text-gray-600 mb-6 dark:text-slate-300" set:html={subtitle} />}
+          {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
           <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4">
             {
               callToAction && (
diff --git a/src/components/widgets/Note.astro b/src/components/widgets/Note.astro
index 861c927..5f517db 100644
--- a/src/components/widgets/Note.astro
+++ b/src/components/widgets/Note.astro
@@ -2,7 +2,7 @@
 import { Icon } from 'astro-icon';
 ---
 
-<section class="bg-primary-50 dark:bg-slate-800">
+<section class="bg-blue-50 dark:bg-slate-800">
   <div class="max-w-6xl mx-auto px-4 sm:px-6 py-4 text-md text-center font-medium">
     <span class="font-bold">
       <Icon name="tabler:info-square" class="w-5 h-5 inline-block align-text-bottom" /> Philosophy:</span
diff --git a/src/components/widgets/Stats.astro b/src/components/widgets/Stats.astro
index ed716b4..a923ce9 100644
--- a/src/components/widgets/Stats.astro
+++ b/src/components/widgets/Stats.astro
@@ -24,7 +24,7 @@ const {
     (title || subtitle || highlight) && (
       <div class="max-w-xl mb-10 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
         {highlight && (
-          <p class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase">
+          <p class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase">
             {highlight}
           </p>
         )}
@@ -35,7 +35,7 @@ const {
           />
         )}
         {subtitle && (
-          <p class="max-w-3xl mx-auto text-center text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />
+          <p class="max-w-3xl mx-auto text-center text-xl text-muted dark:text-slate-400" set:html={subtitle} />
         )}
       </div>
     )
@@ -44,7 +44,7 @@ const {
     {
       items.map(({ name, value }) => (
         <div class="text-center md:border-r md:last:border-none dark:md:border-slate-500 mb-12 md:mb-0">
-          <div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary-800 dark:text-primary-600 font-heading">
+          <div class="text-[2.6rem] font-bold lg:text-5xl xl:text-6xl text-primary dark:text-blue-600 font-heading">
             {value}
           </div>
           <p class="text-sm font-medium tracking-widest text-gray-800 dark:text-slate-400 uppercase lg:text-base">
diff --git a/src/components/widgets/Steps.astro b/src/components/widgets/Steps.astro
index 3e3ba66..865ff3b 100644
--- a/src/components/widgets/Steps.astro
+++ b/src/components/widgets/Steps.astro
@@ -33,11 +33,11 @@ const {
               <div class="flex flex-col items-center mr-4">
                 <div>
                   {index !== items.length - 1 ? (
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-800 dark:border-primary-700 border-2">
-                      {icon && <Icon name={icon} class="w-6 h-6 text-primary-800 dark:text-slate-200" />}
+                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary dark:border-blue-700 border-2">
+                      {icon && <Icon name={icon} class="w-6 h-6 text-primary dark:text-slate-200" />}
                     </div>
                   ) : (
-                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary-800 border-2 bg-primary-800 dark:bg-primary-700 dark:border-primary-700">
+                    <div class="flex items-center justify-center w-10 h-10 rounded-full border-primary border-2 bg-primary dark:bg-blue-700 dark:border-blue-700">
                       <Icon name={icon} class="w-6 h-6 text-white dark:text-slate-200" />
                     </div>
                   )}
@@ -45,8 +45,8 @@ const {
                 <div class="w-px h-full bg-gray-300 dark:bg-slate-500" />
               </div>
               <div class={`pt-1 ${index !== items.length - 1 ? 'pb-8' : ''}`}>
-                {title && <p class="mb-2 text-xl font-bold text-gray-900 dark:text-slate-300" set:html={title} />}
-                {description && <p class="text-gray-600 dark:text-slate-400" set:html={description} />}
+                {title && <p class="mb-2 text-xl font-bold dark:text-slate-300" set:html={title} />}
+                {description && <p class="text-muted dark:text-slate-400" set:html={description} />}
               </div>
             </div>
           ))
diff --git a/src/components/widgets/Steps2.astro b/src/components/widgets/Steps2.astro
index 05be448..c185242 100644
--- a/src/components/widgets/Steps2.astro
+++ b/src/components/widgets/Steps2.astro
@@ -73,13 +73,13 @@ const {
               {
                 highlight && (
                   <p
-                    class="text-base text-primary-800 dark:text-primary-200 font-semibold tracking-wide uppercase"
+                    class="text-base text-primary dark:text-blue-200 font-semibold tracking-wide uppercase"
                     set:html={highlight}
                   />
                 )
               }
               {title && <h2 class="mb-4 text-3xl lg:text-4xl font-bold font-heading" set:html={title} />}
-              {subtitle && <p class="mb-8 text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
+              {subtitle && <p class="mb-8 text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
 
               <div class="w-full">
                 {
@@ -106,13 +106,13 @@ const {
                   ? items.map(({ title: title2, description, icon }, index) => (
                       <li class="flex md:-mx-4">
                         <div class="pr-4 sm:pl-4">
-                          <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-primary-100 text-primary-800">
+                          <span class="flex w-16 h-16 mx-auto items-center justify-center text-2xl font-bold rounded-full bg-blue-100 text-primary">
                             {icon ? <Icon name={icon} class="w-6 h-6 icon-bold" /> : index + 1}
                           </span>
                         </div>
                         <div class="pl-4">
                           <h3 class="mb-4 text-xl font-semibold font-heading" set:html={title2} />
-                          <p class="text-gray-500 dark:text-gray-400" set:html={description} />
+                          <p class="text-muted dark:text-gray-400" set:html={description} />
                         </div>
                       </li>
                     ))
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 9edf313..b292f39 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -21,7 +21,7 @@ const { language = 'en', textDirection = 'ltr' } = SITE;
     <MetaTags {...meta} />
   </head>
 
-  <body class="antialiased text-gray-900 dark:text-slate-300 tracking-tight bg-white dark:bg-dark">
+  <body class="antialiased text-page bg-light dark:text-slate-300 tracking-tight dark:bg-dark">
     <slot />
     <BasicScripts />
     <style is:global>
diff --git a/src/layouts/MarkdownLayout.astro b/src/layouts/MarkdownLayout.astro
index a1bd9d4..1477adf 100644
--- a/src/layouts/MarkdownLayout.astro
+++ b/src/layouts/MarkdownLayout.astro
@@ -16,7 +16,7 @@ const meta: MetaSEO = {
   <section class="px-4 py-16 sm:px-6 mx-auto lg:px-8 lg:py-20 max-w-4xl">
     <h1 class="font-bold font-heading text-3xl md:text-4xl leading-tighter tracking-tighter">{frontmatter.title}</h1>
     <div
-      class="mx-auto prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
+      class="mx-auto prose prose-lg max-w-4xl dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
     >
       <slot />
     </div>
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 422bbf3..b93df4b 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -17,7 +17,7 @@ const { meta } = Astro.props;
 
 <Layout {meta}>
   <Announcement />
-  <Header {...headerData} />
+  <Header {...headerData} isFixed />
   <main>
     <slot />
   </main>
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 2e72542..b391302 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -11,10 +11,10 @@ const title = `Error 404`;
       <div class="max-w-md text-center">
         <h2 class="mb-8 font-bold text-9xl">
           <span class="sr-only">Error</span>
-          <span class="bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">404</span>
+          <span class="text-primary">404</span>
         </h2>
         <p class="text-3xl font-semibold md:text-3xl">Sorry, we couldn't find this page.</p>
-        <p class="mt-4 mb-8 text-lg text-gray-600 dark:text-slate-400">
+        <p class="mt-4 mb-8 text-lg text-muted dark:text-slate-400">
           But dont worry, you can find plenty of other things on our homepage.
         </p>
         <a rel="noopener noreferrer" href={getHomePermalink()} class="btn ml-4">Back to homepage</a>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c0eca35..83c39ec 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -30,7 +30,7 @@ const meta = {
   >
     <Fragment slot="title">
       Free template for <span class="hidden lg:inline">create your website <br />with</span>
-      <span class="text-violet-700 dark:text-white highlight"> Astro v2</span> + Tailwind CSS
+      <span class="text-accent dark:text-white highlight"> Astro v2</span> + Tailwind CSS
     </Fragment>
 
     <Fragment slot="subtitle">
@@ -38,7 +38,7 @@ const meta = {
         <span class="font-semibold">AstroWind</span> is a free, customizable and production-ready template for Astro 2 +
         Tailwind CSS.</span
       >
-      <span class="block mb-1 sm:hidden font-bold text-primary-600">AstroWind: Production-ready.</span> Suitable for Startups,
+      <span class="block mb-1 sm:hidden font-bold text-blue-600">AstroWind: Production-ready.</span> Suitable for Startups,
       Small Business, Sass Websites, Professional Portfolios, Marketing Websites, Landing Pages & Blogs.
     </Fragment>
   </Hero>
@@ -125,10 +125,9 @@ const meta = {
     }}
   >
     <Fragment slot="content">
-      <h3 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-3xl mb-2">
-        Ad vix debet docendi
-      </h3>
-      Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod tacimates.
+      <h3 class="text-2xl font-bold tracking-tight dark:text-white sm:text-3xl mb-2">Ad vix debet docendi</h3>
+      Ne dicta praesent ocurreret has, diam theophrastus at pro. Eos etiam regione ut, persius eripuit quo id. Sit te euismod
+      tacimates.
     </Fragment>
   </Content>