feat(ui): change color pallete

src/app/about/sections/knowledge/accordion.tsx

@@ -33,7 +33,7 @@ export const AccordionTrigger = React.forwardRef(
   ) => (
     <Accordion.Header className="flex">
       <Accordion.Trigger
-        className="group flex flex-1 cursor-default items-center justify-between bg-neutral-200 p-4 py-7 text-lg leading-none shadow-lg shadow-black/5 outline-none duration-300 hover:cursor-pointer hover:bg-neutral-300 dark:bg-neutral-900 hover:dark:bg-neutral-800 md:p-7"
+        className="group flex flex-1 cursor-default items-center justify-between bg-neutral-200 p-4 py-7 text-lg leading-none shadow-lg shadow-black/5 outline-none duration-300 hover:cursor-pointer hover:bg-neutral-300 dark:bg-neutral-950 hover:dark:bg-neutral-800 md:p-7"
         {...props}
         ref={forwardedRef}
       >

src/app/about/sections/knowledge/index.tsx

@@ -14,7 +14,7 @@ export function Knowledge() {
   return (
     <div>
       <Accordion.Root
-        className="z-0 w-full overflow-hidden rounded-3xl border border-neutral-200 bg-neutral-200/30 dark:border-neutral-900 dark:bg-neutral-900/30"
+        className="z-0 w-full overflow-hidden rounded-3xl border border-neutral-200 bg-neutral-200/30 dark:border-neutral-950 dark:bg-neutral-950/30"
         type="single"
         collapsible
       >

src/app/about/styles.css

@@ -5,7 +5,7 @@
 }
 
 .contact-line {
-  @apply border-b border-neutral-200 py-4 last:border-none dark:border-neutral-900;
+  @apply border-b border-neutral-200 py-4 last:border-none dark:border-neutral-950;
 }
 
 .contact-line-title {

src/app/blog/post/[slug]/components/top-button.tsx

@@ -47,7 +47,7 @@ export function TopButton() {
     <button
       onClick={scrollToTop}
       title="Go to top"
-      className={`fixed bottom-7 right-7 hidden items-center justify-center rounded-full p-2 hover:bg-neutral-200 hover:dark:bg-neutral-900 md:flex ${
+      className={`fixed bottom-7 right-7 hidden items-center justify-center rounded-full p-2 hover:bg-neutral-200 hover:dark:bg-neutral-950 md:flex ${
         isNotOnTop ? 'opacity-100' : 'opacity-0'
       }`}
     >

src/app/components/header/index.tsx

@@ -48,7 +48,7 @@ export function Header() {
   }) => (
     <Link
       href={path}
-      className="rounded-lg p-2 leading-none text-neutral-700 hover:bg-neutral-200/50 hover:text-neutral-900 dark:text-neutral-300 hover:dark:bg-neutral-900 dark:hover:text-neutral-100"
+      className="rounded-lg p-2 leading-none text-neutral-700 hover:bg-neutral-200/50 hover:text-neutral-900 dark:text-neutral-300 hover:dark:bg-neutral-950 dark:hover:text-neutral-100"
     >
       {name}
     </Link>
@@ -57,7 +57,7 @@ export function Header() {
   return (
     <header
       data-on-top={percentScrollPosition === 0}
-      className="fixed left-3 right-3 top-3 z-40 rounded-xl border border-neutral-50 bg-neutral-100/80 py-3 backdrop-blur transition-all dark:border-neutral-800 dark:bg-neutral-1000/80 md:left-0 md:right-0 md:top-0 md:w-full md:rounded-none md:border-b md:border-none data-[on-top='false']:md:border-b-neutral-50 data-[on-top='true']:md:border-b-transparent data-[on-top='true']:md:py-6 data-[on-top='false']:md:dark:border-b-neutral-800"
+      className="fixed left-3 right-3 top-3 z-40 rounded-xl border border-neutral-100 bg-neutral-50/80 py-3 backdrop-blur transition-all dark:border-neutral-900 dark:bg-neutral-1000/80 md:left-0 md:right-0 md:top-0 md:w-full md:rounded-none md:border-x-0 md:border-b md:border-t-0 data-[on-top='false']:md:border-b-neutral-100 data-[on-top='true']:md:border-b-transparent data-[on-top='true']:md:py-6 data-[on-top='false']:md:dark:border-b-neutral-900/80"
     >
       <div className="content-container m-auto flex flex-wrap items-center justify-between">
         <div className="md:hidden" />

src/app/components/header/mobile-menu/index.tsx

@@ -103,7 +103,7 @@ export function MobileMenu() {
                 <X weight="bold" />
               </button>
             </Dialog.Close>
-            <div className="flex flex-1 flex-col overflow-y-scroll rounded-bl-[2rem] rounded-tl-[2rem] bg-neutral-100 py-10 text-xl dark:bg-neutral-900">
+            <div className="flex flex-1 flex-col overflow-y-scroll rounded-bl-[2rem] rounded-tl-[2rem] bg-neutral-100 py-10 text-xl dark:bg-neutral-950">
               <Link title="Home" icon={House} href="/" />
               <Link title="Blog" icon={Note} href="/blog" />
               <Link title="Projects" icon={Briefcase} href="/projects" />

src/app/components/header/search.tsx

@@ -9,7 +9,7 @@ export function Search() {
   return (
     <button
       onClick={toggle}
-      className="flex flex-1 cursor-text items-center gap-5 rounded-xl bg-neutral-200/30 p-2 text-sm leading-none backdrop-blur-3xl dark:bg-neutral-800/30"
+      className="flex flex-1 cursor-text items-center gap-5 rounded-xl bg-neutral-200/20 p-2 text-sm leading-none backdrop-blur-3xl dark:bg-neutral-800/20"
     >
       <span className="flex items-center gap-3">
         <MagnifyingGlass />

src/app/components/header/toggle-theme.tsx

@@ -52,7 +52,7 @@ export function ToggleTheme() {
       </Menu.Button>
       <Menu.Items
         as="div"
-        className="absolute right-0 top-10 origin-top-right animate-fade-down rounded-xl bg-neutral-50 p-1 outline-none animate-duration-300 dark:bg-neutral-900"
+        className="absolute right-0 top-10 origin-top-right animate-fade-down rounded-xl bg-neutral-50 p-1 outline-none animate-duration-300 dark:bg-neutral-950"
       >
         <div className="p-2 text-sm text-neutral-500">Color themes</div>
         <SelectTheme theme="light" title="Set light colors" />

src/app/layout.tsx

@@ -15,6 +15,10 @@ export const metadata: Metadata = {
     default: config.metadata.title,
     template: `%s | ${config.metadata.title}`
   },
+  themeColor: [
+    { media: '(prefers-color-scheme: dark)', color: '#060606' },
+    { media: '(prefers-color-scheme: light)', color: '#fafafa' }
+  ],
   colorScheme: 'dark light',
   viewport: 'width=device-width, initial-scale=1',
   openGraph: {

src/app/projects/components/project-card.tsx

@@ -43,7 +43,7 @@ export function ProjectCard({ data }: Props) {
 
   return (
     <ProjectCardEffect className="overflow-hidden rounded-3xl shadow-2xl shadow-black/30">
-      <div className="flex h-full flex-col bg-neutral-100 dark:bg-neutral-900">
+      <div className="flex h-full flex-col bg-neutral-100 dark:bg-neutral-950">
         {data.image && (
           <div className="h-56 w-full">
             <Image

src/app/projects/components/project-info.tsx

@@ -36,7 +36,7 @@ export function ProjectInfo({ data }: Props) {
   )
 
   return (
-    <div className="flex flex-col items-center justify-between gap-12 rounded-3xl bg-gradient-to-r from-neutral-100 to-neutral-100 p-5 shadow-2xl shadow-black/30 transition-all duration-1000 hover:to-[#f9f9f9] dark:from-neutral-900 dark:to-neutral-900 dark:hover:to-[#191919] md:flex-row md:gap-3">
+    <div className="pointer-events-none relative flex flex-col items-center justify-between gap-12 overflow-hidden rounded-3xl bg-neutral-100 bg-no-repeat p-5 shadow-xl shadow-black/5 transition-colors duration-500 before:absolute before:inset-0 before:-z-10 before:bg-gradient-to-r before:from-neutral-100 before:to-[rgb(240,240,240)] hover:bg-transparent dark:bg-neutral-950 before:dark:from-neutral-950 before:dark:to-[rgb(14,14,14)] hover:dark:bg-transparent md:flex-row md:gap-3">
       <div>
         <Title />
         <p className="text-justify md:text-left">{data.description}</p>
@@ -48,7 +48,7 @@ export function ProjectInfo({ data }: Props) {
           title="Repository"
           target="_blank"
           rel="noreferrer"
-          className="flex items-center gap-2 rounded-2xl border border-[#181717] p-4 text-[#181717] hover:bg-[#181717] hover:text-[#F6F8FA] dark:border-[#F6F8FA] dark:text-[#F6F8FA] dark:hover:bg-[#F6F8FA] hover:dark:text-[#181717] md:text-2xl"
+          className="pointer-events-auto flex items-center gap-2 rounded-2xl border border-[#181717] p-4 text-[#181717] duration-300 hover:bg-[#181717] hover:text-[#F6F8FA] dark:border-[#F6F8FA] dark:text-[#F6F8FA] dark:hover:bg-[#F6F8FA] hover:dark:text-[#181717] md:text-2xl"
         >
           <span className="md:hidden">Repository</span>
           <FiGithub />

src/shared/components/post-list/index.tsx

@@ -24,7 +24,7 @@ export function PostList({ posts, separateByYear = false }: Props) {
       <div className="flex flex-col gap-7">
         {postsByYear.map(postsOfYear => (
           <div key={postsOfYear.year}>
-            <h1 className="mb-5 rounded-xl bg-neutral-50 p-3 text-center text-2xl font-bold dark:bg-neutral-900 md:text-left">
+            <h1 className="mb-5 rounded-xl bg-neutral-100 p-3 text-center text-2xl font-bold dark:bg-neutral-950 md:text-left">
               {postsOfYear.year}
             </h1>
             <div className="my-5 flex flex-col gap-4 md:my-0 md:gap-3">
@@ -35,7 +35,7 @@ export function PostList({ posts, separateByYear = false }: Props) {
           </div>
         ))}
         <div>
-          <h1 className="mb-5 rounded-xl bg-neutral-50 p-3 text-center text-2xl font-bold dark:bg-neutral-900 md:text-left">
+          <h1 className="mb-5 rounded-xl bg-neutral-100 p-3 text-center text-2xl font-bold dark:bg-neutral-950 md:text-left">
             Others
           </h1>
           <div className="flex flex-col gap-3">

src/styles/base.css

@@ -6,7 +6,7 @@
   }
 
   body {
-    @apply bg-neutral-100 dark:bg-neutral-1000;
+    @apply bg-neutral-50 dark:bg-neutral-1000;
     @apply font-sans text-neutral-900 dark:text-neutral-300;
   }
 

src/styles/components.css

@@ -8,7 +8,7 @@
   }
 
   .keyboard {
-    @apply bg-neutral-100 p-1 dark:bg-neutral-900;
+    @apply bg-neutral-100 p-1 dark:bg-neutral-950;
     @apply rounded-lg border border-neutral-300 dark:border-neutral-700;
     @apply text-neutral-600 dark:text-neutral-500;
     @apply leading-none;
@@ -61,7 +61,7 @@
     h4,
     h5,
     h6 {
-      @apply my-6 mx-0 w-full whitespace-pre-wrap text-center font-medium md:w-max md:text-left;
+      @apply mx-0 my-6 w-full whitespace-pre-wrap text-center font-medium md:w-max md:text-left;
 
       a {
         @apply text-neutral-900 hover:no-underline dark:text-neutral-100;
@@ -70,10 +70,10 @@
     }
 
     h2 {
-      @apply border-b-black/30 pr-6 pb-2 text-3xl underline underline-offset-4 dark:border-b-white/30 md:border-b md:no-underline;
+      @apply border-b-black/30 pb-2 pr-6 text-3xl underline underline-offset-4 dark:border-b-white/30 md:border-b md:no-underline;
     }
     h3 {
-      @apply border-b-black/30 pr-6 pb-2 text-2xl underline underline-offset-4 dark:border-b-white/30 md:border-b md:no-underline;
+      @apply border-b-black/30 pb-2 pr-6 text-2xl underline underline-offset-4 dark:border-b-white/30 md:border-b md:no-underline;
     }
     h4 {
       @apply text-2xl;
@@ -175,7 +175,7 @@
     }
 
     code {
-      @apply text-ellipsis break-words rounded-lg bg-black/5 py-[0.16rem] px-1 dark:bg-white/5;
+      @apply text-ellipsis break-words rounded-lg bg-black/5 px-1 py-[0.16rem] dark:bg-white/5;
     }
 
     div[data-rehype-pretty-code-fragment=''] {
@@ -187,7 +187,7 @@
 
         & > code {
           @apply grid;
-          @apply py-2 px-0;
+          @apply px-0 py-2;
           @apply bg-transparent dark:bg-transparent;
 
           span {

tailwind.config.js

@@ -12,7 +12,7 @@ module.exports = {
       },
       colors: {
         neutral: {
-          1000: 'rgba(17, 17, 17)'
+          1000: 'rgba(6, 6, 6)'
         }
       },
       animation: {