update color with css variables

Author: frontendfixer

src/components/AltHeroSection.tsx

@@ -5,7 +5,7 @@ const AltHeroSection = () => {
   return (
     <div className="flex flex-col items-center justify-center">
       <div className="my-16 flex flex-col items-center px-3 pb-6 sm:mb-20 sm:mt-20">
-        <h1 className="mb-16  text-center text-4xl font-black md:w-3/4 md:text-7xl lg:text-9xl dark:text-primary-400">
+        <h1 className="mb-16  text-center text-5xl font-black md:w-3/4 md:text-7xl lg:text-9xl dark:text-primary-400">
           FullStack Web Developer
         </h1>
         <p className="text-center text-xl text-dark-900 dark:text-white">

src/components/Logo.tsx

@@ -2,13 +2,7 @@ import { Link } from 'react-router-dom';
 
 import { cn } from '#/lib/cn';
 
-const Logo = ({
-  large,
-  variant,
-}: {
-  large?: boolean;
-  variant: 'dark' | 'light' | undefined;
-}) => {
+const Logo = ({ large, variant }: { large?: boolean; variant: string }) => {
   return (
     <Link to="/">
       <svg
@@ -26,10 +20,10 @@ const Logo = ({
               mixBlendMode: 'normal',
               fill: `${
                 variant === 'dark'
-                  ? 'hsl(159, 94%, 57%)'
-                  : 'hsl(158, 100%, 38%)'
+                  ? 'hsl(var(--color-primary-400))'
+                  : 'hsl(var(--color-primary-600))'
               }`,
-              fillOpacity: 0.9,
+              fillOpacity: 1,
               stroke: 'none',
               strokeWidth: 0.26,
             }}

src/index.css

@@ -4,6 +4,30 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  :root {
+    --color-primary: 180 100% 40%;
+    --color-primary-400: 180 100% 76%;
+    --color-primary-500: 180 90% 58%;
+    --color-primary-600: 180 100% 40%;
+    --color-primary-700: 180 80% 36%;
+
+    --color-secondary: 259 100% 59%;
+    --color-secondary-700: 259 100% 39%;
+    --color-secondary-600: 259 100% 59%;
+    --color-secondary-500: 259 100% 69%;
+    --color-secondary-400: 259 100% 79%;
+
+    --color-dark: 240 10% 14%;
+    --color-dark-900: 240 10% 14%;
+    --color-dark-800: 240 10% 20%;
+    --color-dark-700: 240 10% 30%;
+    --color-dark-600: 240 10% 40%;
+    --color-dark-500: 240 10% 50%;
+    --color-dark-400: 240 10% 70%;
+  }
+}
+
 #project-grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr);

src/routes/navigation.tsx

@@ -1,22 +1,25 @@
 import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
+import { useSelector } from 'react-redux';
 import { Outlet } from 'react-router-dom';
 
 import Container from '#components/Container';
 import Logo from '#components/Logo';
 import NavigationMenu from '#components/NavigationMenu';
+import { RootState } from '#store/store';
 
 const Navigation = () => {
   const [open, setOpen] = useState(false);
+  const theme = useSelector((state: RootState) => state.theme);
 
   return (
     <>
       <header className="relative bg-white dark:bg-dark">
         <Container>
           <div className="flex w-full flex-wrap items-center justify-between py-3">
             <div className="flex w-full items-center justify-between gap-4 md:w-max">
-              <Logo variant="light" />
+              <Logo variant={theme} large />
               <button
                 data-collapse-toggle="navbar-default"
                 type="button"
@@ -26,7 +29,7 @@ const Navigation = () => {
                 onClick={() => setOpen(!open)}
               >
                 <span className="sr-only">Open main menu</span>
-                <FontAwesomeIcon icon={faBars} className="h-6 w-6" />
+                <FontAwesomeIcon icon={faBars} className="h-8 w-8" />
               </button>
             </div>
             <NavigationMenu openState={open} />

tailwind.config.js

@@ -13,29 +13,31 @@ export default {
       },
       colors: {
         primary: {
-          DEFAULT: 'hsl(180, 80%, 36%)',
-          700: 'hsl(180, 80%, 36%)',
-          600: 'hsl(180, 100%, 40%)',
-          500: 'hsl(180, 90%, 58%)',
-          400: 'hsl(180, 100%, 76%)',
+          DEFAULT: 'hsl(var(--color-primary) / <alpha-value>)',
+          700: 'hsl(var(--color-primary-700) / <alpha-value>)',
+          600: 'hsl(var(--color-primary-600) / <alpha-value>)',
+          500: 'hsl(var(--color-primary-500) / <alpha-value>)',
+          400: 'hsl(var(--color-primary-400) / <alpha-value>)',
         },
         secondary: {
-          DEFAULT: 'hsl(259, 100%, 59%)',
-          600: 'hsl(259, 100%, 59%)',
-          500: 'hsl(259, 100%, 69%)',
-          400: 'hsl(259, 100%, 79%)',
+          DEFAULT: 'hsl(var(--color-secondary) / <alpha-value>)',
+          700: 'hsl(var(--color-secondary-700) / <alpha-value>)',
+          600: 'hsl(var(--color-secondary-600) / <alpha-value>)',
+          500: 'hsl(var(--color-secondary-500) / <alpha-value>)',
+          400: 'hsl(var(--color-secondary-400) / <alpha-value>)',
         },
         white: {
           DEFAULT: 'hsl(240, 21%, 95%)',
           full: 'hsl(255, 100%,100%)',
         },
         dark: {
-          DEFAULT: 'hsl(240, 10%, 14%)',
-          900: 'hsl(240, 10%, 14%)',
-          800: 'hsl(240, 10%, 20%)',
-          700: 'hsl(240, 10%, 30%)',
-          600: 'hsl(240, 10%, 40%)',
-          500: 'hsl(240, 10%, 50%)',
+          DEFAULT: 'hsl(var(--color-dark) / <alpha-value>)',
+          900: 'hsl(var(--color-dark-900) / <alpha-value>)',
+          800: 'hsl(var(--color-dark-800) / <alpha-value>)',
+          700: 'hsl(var(--color-dark-700) / <alpha-value>)',
+          600: 'hsl(var(--color-dark-600) / <alpha-value>)',
+          500: 'hsl(var(--color-dark-500) / <alpha-value>)',
+          400: 'hsl(var(--color-dark-400) / <alpha-value>)',
         },
       },
       animation: {