update theme colors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "keaton-portfolio",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "homepage": "https://keatonsentak.com/",
   "author": "Keaton Sentak",
   "dependencies": {

src/components/Contact.astro

@@ -9,7 +9,7 @@
       If you would like to connect, feel free to reach me at
       <a
         href='mailto:[email protected]'
-        class='font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-secondary to-primary-main hover:border-b-2 border-primary-secondary'
+        class='font-bold hover:border-b-2 hover:border-text-body dark:text-primary-accent dark:border-primary-accent dark:hover:border-primary-accent'
       >
         [email protected]
       </a>

src/components/Footer.astro

@@ -9,10 +9,7 @@ const currentYear = getCurrentYear();
 
 <footer class='text-sm leading-[1.75] mt-4'>
   <div>
-    <!-- Blue Gradient Styled Name -->
-    <span
-      class='gradient-text font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-secondary to-primary-main'
-    >
+    <span class='font-bold dark:text-primary-accent'>
       Copyright © {currentYear} Keaton Sentak
     </span>
   </div>

src/components/Intro.astro

@@ -8,8 +8,8 @@
       class='font-bold text-text-heading text-center text-4xl md:text-5xl pt-4 pb-2 overflow-hidden'
     >
       <span
-        class='bg-gradient-to-bl bg-no-repeat bg-bottom bg-[length:90%_40%]
-            from-primary-main to-primary-secondary'
+        class='bg-gradient-to-r bg-no-repeat bg-bottom bg-[length:90%_40%]
+            from-primary-main to-primary-accent'
       >
         Keaton Sentak
       </span>

src/components/Socials.astro

@@ -6,23 +6,23 @@
   class='flex justify-center mt-1 mb-5 space-x-5 items-center content-center text-text-bold'
 >
   <a
-    class='unset ml-4 rounded-sm transition-[background-size] duration-150 ease-in-out bg-left-bottom bg-[length:0%_55%] hover:bg-[length:100%_55%] bg-no-repeat bg-gradient-to-r from-primary-secondary to-primary-main'
+    class='unset ml-4 rounded-sm transition-[background-size] duration-150 ease-in-out bg-left-bottom bg-[length:0%_55%] hover:bg-[length:100%_55%] bg-no-repeat bg-gradient-to-r from-primary-accent to-primary-main'
     href='https://github.com/ksentak'
     target='_blank'
   >
     <i class='fa-brands fa-github' aria-hidden='true'></i>
     <span>Github</span>
   </a>
   <a
-    class='unset ml-4 rounded-sm transition-[background-size] duration-150 ease-in-out bg-left-bottom bg-[length:0%_55%] hover:bg-[length:100%_55%] bg-no-repeat bg-gradient-to-r from-primary-secondary to-primary-main'
+    class='unset ml-4 rounded-sm transition-[background-size] duration-150 ease-in-out bg-left-bottom bg-[length:0%_55%] hover:bg-[length:100%_55%] bg-no-repeat bg-gradient-to-r from-primary-accent to-primary-main'
     href='https://www.linkedin.com/in/ksentak/'
     target='_blank'
   >
     <i class='fa-brands fa-linkedin' aria-hidden='true'></i>
     <span>LinkedIn</span>
   </a>
   <a
-    class='unset ml-4 rounded-sm transition-[background-size] duration-150 ease-in-out bg-left-bottom bg-[length:0%_55%] hover:bg-[length:100%_55%] bg-no-repeat bg-gradient-to-r from-primary-secondary to-primary-main'
+    class='unset ml-4 rounded-sm transition-[background-size] duration-150 ease-in-out bg-left-bottom bg-[length:0%_55%] hover:bg-[length:100%_55%] bg-no-repeat bg-gradient-to-r from-primary-accent to-primary-main'
     href='./files/keaton-sentak-resume.pdf'
     target='_blank'
   >

src/styles/global.css

@@ -11,10 +11,10 @@
 @layer base {
     /* light theme */
     .base-theme { 
-        /* Tailwind emerald-400 #34d399 */
-        --color-main: 52 211 153;  
+        /* Tailwind amber-200 */
+        --color-main: 253 230 138;  
         /* Tailwind cyan-400 #22d3ee */
-        --color-secondary: 34 211 238;  
+        --color-accent: 253 230 138;  
          /* Custom light black #333333 */
         --color-text-body: 51 51 51;
         /* Custom light black #333333 */
@@ -27,18 +27,18 @@
         --color-text-code: 0 0 0;
         /* black */
         --color-text-selection: 0 0 0;
-        /* white */
-        --color-bg-body: 255 255 255;
-        /* Tailwind emerald-200 #a7f3d0 */
-        --color-bg-selection: 94 234 212;
+        /* softer white like newspaper */
+        --color-bg-body: 250 250 250;
+        /* Tailwind amber-200 */
+        --color-bg-selection: 253 230 138;
     }
 
     /* dark theme */
     .base-theme.dark {
-        /* Tailwind pink-500 #ec4899 */
-        --color-main: 236 72 153;  
-        /* Tailwind amber-500 #f59e0b */
-        --color-secondary: 245 158 11;  
+        /* Tailwind blue-900 */
+        --color-main: 30 58 138;  
+        /* Tailwind blue-500 */
+        --color-accent: 59 130 246;  
         /* Tailwind slate-300 */
         --color-text-body: 203 213 225;
         /* white */
@@ -53,8 +53,8 @@
         --color-text-selection: 0 0 0;
         /* Lighter black for newspaper feel */
         --color-bg-body: 40 40 40;
-        /* Tailwind orange-300 #fdba74 */
-        --color-bg-selection: 253 186 116;
+        /* Tailwind indigo-100 */
+        --color-bg-selection: 224 231 255;
     }
 
     :root {

tailwind.config.cjs

@@ -12,7 +12,7 @@ module.exports = {
         transparent: 'transparent',
         primary: {
           main: 'rgb(var(--color-main) / <alpha-value>)',
-          secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
+          accent: 'rgb(var(--color-accent) / <alpha-value>)',
         },
         text: {
           body: 'rgb(var(--color-text-body) / <alpha-value>)',