chore: themes updated, colors changed based on devops hobbies logo

mehdi-ra · mehdi-ra · commit 9ac820f06a21 · 2025-05-30T00:10:57.000+03:30
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -70,7 +70,7 @@ a {
   }
 
   .dark {
-    --background: 224 71.4% 4.1%;
+    --background: rgb(51,53,58); 
     --foreground: 210 20% 98%;
     --card: 224 71.4% 4.1%;
     --card-foreground: 210 20% 98%;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -24,7 +24,7 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={inter.className}>
-        <ThemeProvider attribute="class" defaultTheme="dark">
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <Layout>{children}</Layout>
         </ThemeProvider>
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -134,7 +134,7 @@ export default function Home() {
     },
   ]
   return (
-    <>
+    <div id="content">
       <BentoGrid className="lg:grid-rows-3">
         {features.map((feature) => (
           <BentoCard key={feature.name} {...feature} />
@@ -147,7 +147,6 @@ export default function Home() {
         showNavigationDots={true}
         showNavigationArrows={true}
       />
-
-    </>
+    </div>
   )
 }
diff --git a/src/components/layout/hero.tsx b/src/components/layout/hero.tsx
@@ -5,6 +5,7 @@ import { cn } from '@/lib'
 
 import { FloatingDock } from '../ui/floating-dock'
 import { Spotlight } from '../ui/Spotlight'
+import { ModeToggle } from '../mode-toggle'
 
 export type IconProps = React.HTMLAttributes<SVGElement>
 
@@ -56,7 +57,7 @@ function Hero() {
     {
       title: 'GitHub',
       icon: (
-        <IconBrandGithub className="h-full w-full text-neutral-500 dark:text-neutral-300" />
+        <ModeToggle />
       ),
       href: '#',
     },
@@ -81,7 +82,7 @@ function Hero() {
           <FloatingDock items={links} />
         </div>
 
-        <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-neutral-400 bg-clip-text text-center text-4xl font-bold text-transparent md:text-7xl">
+        <h1 className="bg-opacity-50 bg-gradient-to-b from-neutral-50 to-devops-orange bg-clip-text text-center text-4xl font-bold text-transparent md:text-7xl">
           DevOps <br /> Hobbies
         </h1>
         <p className="mx-auto mt-4 max-w-lg text-center text-base font-normal text-neutral-300">
diff --git a/src/components/magicui/bento-grid.tsx b/src/components/magicui/bento-grid.tsx
@@ -48,17 +48,17 @@ function BentoCard({
       key={name}
       className={cn(
         'group relative col-span-3 flex flex-col justify-between overflow-hidden rounded-xl',
-        // light styles
         'bg-background [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]',
-        // dark styles
         'transform-gpu dark:bg-background dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]',
         className,
       )}
       {...props}
     >
-      <div>{background}</div>
+      <div>
+        {background}
+      </div>
       <div className="pointer-events-none z-10 flex transform-gpu flex-col gap-1 p-6 transition-all duration-300 group-hover:-translate-y-10">
-        <h3 className="text-xl font-semibold text-neutral-700 dark:text-neutral-300">
+        <h3 className="text-xl font-semibold text-devops-orange dark:text-devops-orange">
           {name}
         </h3>
         <p className="max-w-lg text-neutral-400">{description}</p>
diff --git a/src/components/ui/repository-slider.tsx b/src/components/ui/repository-slider.tsx
@@ -201,7 +201,7 @@ export default function RepositorySlider({
                   />
                   <span className="text-white/80 text-xs">{repo.language}</span>
                 </div>
-                <span className="text-white/60 text-xs">{repo.updated}</span>
+                <span className="text-devops-orange/60 text-xs">{repo.updated}</span>
               </div>
             </div>
           </div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -50,8 +50,8 @@ module.exports = {
           5: 'hsl(var(--chart-5))',
         },
         devops: {
-          orange: '#FF7A00',
-          darkBlack: '#1E1E1E',
+          orange: '#ec660e',
+          black: '#1E1E1E',
         },
       },
     },

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ a {`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`.dark {`
`73`		`- --background: 224 71.4% 4.1%;`
	`73`	`+ --background: rgb(51,53,58);`
`74`	`74`	`--foreground: 210 20% 98%;`
`75`	`75`	`--card: 224 71.4% 4.1%;`
`76`	`76`	`--card-foreground: 210 20% 98%;`
Original file line number	Diff line number	Diff line change
`@@ -134,7 +134,7 @@ export default function Home() {`
`134`	`134`	`},`
`135`	`135`	`]`
`136`	`136`	`return (`
`137`		`- <>`
	`137`	`+ <div id="content">`
`138`	`138`	`<BentoGrid className="lg:grid-rows-3">`
`139`	`139`	`{features.map((feature) => (`
`140`	`140`	`<BentoCard key={feature.name} {...feature} />`
`@@ -147,7 +147,6 @@ export default function Home() {`
`147`	`147`	`showNavigationDots={true}`
`148`	`148`	`showNavigationArrows={true}`
`149`	`149`	`/>`
`150`		`-`
`151`		`- </>`
	`150`	`+ </div>`
`152`	`151`	`)`
`153`	`152`	`}`