Fix dark mode styling and bugs

app/blog/[id]/page.tsx

@@ -112,7 +112,7 @@ export default async function ArticlePage({ params }: ArticlePageProps) {
         <header className="mb-8 text-center">
           <div className="flex flex-col items-center justify-center">
             <Badge>Article</Badge>
-            <h1 className="mb-4 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-gray-50 dark:to-gray-300">
+            <h1 className="mb-4 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-[rgb(var(--color-foreground))] dark:to-[rgb(var(--color-muted-foreground))]">
               {post.frontmatter.title}
             </h1>
           </div>

app/blog/page.tsx

@@ -91,7 +91,7 @@ export default async function BlogPage() {
           <Badge>Blog</Badge>
           <h1
             id="blog-title"
-            className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-gray-50 dark:to-gray-300"
+            className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-4xl font-bold tracking-tighter text-transparent sm:text-6xl md:text-6xl dark:from-[rgb(var(--color-foreground))] dark:to-[rgb(var(--color-muted-foreground))]"
           >
             AI & Content Strategy Insights
           </h1>

app/client-page/page.tsx

@@ -12,7 +12,7 @@ export default function HomePage() {
         </p>
         <Link 
           href="/"
-          className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+          className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[rgb(var(--color-foreground))]/90 dark:hover:bg-[rgb(var(--color-foreground))]/80 font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
         >
           Go to the main page
         </Link>

app/components/Button.tsx

@@ -33,13 +33,13 @@ const buttonVariants = tv({
       ],
       secondary: [
         // border
-        "border-gray-300 dark:border-gray-800",
+        "border-[rgb(var(--color-border))]",
         // text color
-        "text-text-secondary-dark dark:text-gray-50",
+        "text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]",
         // background color
-        "bg-white dark:bg-gray-950",
+        "bg-[rgb(var(--color-surface))]",
         //hover color
-        "hover:bg-gray-50 dark:hover:bg-gray-900/60",
+        "hover:bg-[rgb(var(--color-surface))]/90",
         // disabled
         "disabled:text-secondary-light",
         "disabled:dark:text-text-secondary",
@@ -50,24 +50,24 @@ const buttonVariants = tv({
         // border
         "border-transparent",
         // text color
-        "text-text-secondary-dark dark:text-gray-50",
+        "text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]",
         // background color
-        "bg-light dark:bg-gray-900",
+        "bg-light dark:bg-[rgb(var(--color-surface))]",
         // hover color
-        "hover:bg-gray-300/70 dark:hover:bg-gray-800/80",
+        "hover:bg-gray-300/70 dark:hover:bg-[rgb(var(--color-border))]/20",
         // disabled
         "disabled:text-secondary-light disabled:bg-light",
-        "disabled:dark:bg-gray-800 disabled:dark:text-text-secondary",
+        "disabled:dark:bg-[rgb(var(--color-border))]/20 disabled:dark:text-text-secondary",
       ],
       ghost: [
         // base
         "shadow-none",
         // border
         "border-transparent",
         // text color
-        "text-text-secondary-dark dark:text-gray-50",
+        "text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]",
         // hover color
-        "bg-transparent hover:bg-light dark:hover:bg-gray-800/80",
+        "bg-transparent hover:bg-light dark:hover:bg-[rgb(var(--color-border))]/20",
         // disabled
         "disabled:text-secondary-light",
         "disabled:dark:text-text-secondary",

app/components/DonutChart.tsx

@@ -157,20 +157,20 @@ const ChartTooltip = ({
           // base
           "rounded px-2 py-1 text-xs shadow-md",
           // border color
-          "border border-gray-200 dark:border-gray-800",
+          "border border-[rgb(var(--color-border))]",
           // background color
-          "bg-white dark:bg-gray-950",
+          "bg-[rgb(var(--color-surface))]",
         )}
       >
         {payload.map(({ value, category }, index) => (
           <div
             key={`id-${index}`}
             className="flex items-center justify-between gap-2"
           >
-            <span className="whitespace-nowrap text-gray-700 dark:text-gray-300">
+            <span className="whitespace-nowrap text-gray-700 text-[rgb(var(--color-muted-foreground))]">
               {category}
             </span>
-            <span className="whitespace-nowrap font-medium tabular-nums text-gray-900 dark:text-gray-50">
+            <span className="whitespace-nowrap font-medium tabular-nums text-[rgb(var(--color-foreground))]">
               {valueFormatter(value)}
             </span>
           </div>
@@ -313,7 +313,7 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>(
             <ReChartsDonutChart>
               {isDonut && showLabel && (
                 <text
-                  className="fill-gray-900 text-sm dark:fill-gray-50"
+                  className="text-sm fill-[rgb(var(--color-foreground))]"
                   textAnchor="middle"
                   dominantBaseline="middle"
                   x="50%"
@@ -324,7 +324,7 @@ const DonutChart = React.forwardRef<HTMLDivElement, DonutChartProps>(
               )}
               <Pie
                 className={cx(
-                  "[&_.recharts-pie-sector]:outline-hidden stroke-white dark:stroke-gray-950",
+                  "[&_.recharts-pie-sector]:outline-hidden stroke-[rgb(var(--color-surface))]",
                   onValueChange ? "cursor-pointer" : "cursor-default",
                 )}
                 data={pieData}

app/components/blog/AiMarketShareChart.tsx

@@ -37,10 +37,10 @@ const data: DataItem[] = [
 export const AiMarketShareChart = () => {
   return (
     <div className="mx-auto max-w-2xl pt-4">
-      <h3 className="mb-4 text-center text-lg font-medium text-gray-900 dark:text-gray-50">
+      <h3 className="mb-4 text-center text-lg font-medium text-[rgb(var(--color-foreground))]">
         AI Chatbot Market Share (Usage)
       </h3>
-      <p className="text-center text-sm text-gray-700 dark:text-gray-300">
+      <p className="text-center text-sm text-[rgb(var(--color-muted-foreground))]">
         Market distribution by platform
       </p>
       <DonutChart

app/components/mdx.tsx

@@ -38,7 +38,7 @@ function CustomHeading(props: any) {
 
 export const H1 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
   <CustomHeading
-    className="text-3xl font-bold normal-case tracking-tight text-text-secondary-dark sm:text-4xl dark:text-gray-50"
+    className="text-3xl font-bold normal-case tracking-tight text-text-secondary-dark sm:text-4xl dark:text-[rgb(var(--color-foreground))]"
     level={1}
   >
     {children}
@@ -47,7 +47,7 @@ export const H1 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
 
 export const H2 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
   <CustomHeading
-    className="mb-4 text-lg font-semibold normal-case tracking-tight text-text-secondary-dark dark:text-gray-50"
+    className="mb-4 text-lg font-semibold normal-case tracking-tight text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]"
     level={2}
   >
     {children}
@@ -56,7 +56,7 @@ export const H2 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
 
 export const H3 = ({ children }: React.HTMLProps<HTMLHeadingElement>) => (
   <CustomHeading
-    className="mb-2 font-semibold normal-case tracking-tight text-text-secondary-dark dark:text-gray-50"
+    className="mb-2 font-semibold normal-case tracking-tight text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]"
     level={3}
   >
     {children}
@@ -117,7 +117,7 @@ export const Ul = (props: React.HTMLAttributes<HTMLUListElement>) => (
 
 export const Bold = (props: React.HTMLAttributes<HTMLSpanElement>) => (
   <span
-    className="font-semibold text-text-secondary-dark dark:text-gray-50"
+    className="font-semibold text-text-secondary-dark dark:text-[rgb(var(--color-foreground))]"
     {...props}
   />
 );
@@ -177,7 +177,7 @@ export const BlogEntry = ({
   };
 
   return (
-    <article className="relative my-20 flex flex-col justify-center gap-x-14 border-b border-light md:flex-row dark:border-gray-800">
+    <article className="relative my-20 flex flex-col justify-center gap-x-14 border-b border-light md:flex-row dark:border-[rgb(var(--color-border))]">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(blogPostSchema) }}
@@ -212,7 +212,7 @@ export const ArticleImage = ({
     alt={alt}
     width={width}
     height={height}
-    className="mb-10 overflow-hidden rounded-xl shadow-md shadow-black/15 ring-1 ring-light/50 dark:ring-gray-800"
+    className="mb-10 overflow-hidden rounded-xl shadow-md shadow-black/15 ring-1 ring-light/50 dark:ring-[rgb(var(--color-border))]"
     {...props}
   />
 );

app/components/ui/Footer.tsx

@@ -13,7 +13,7 @@ export default function Footer() {
   return (
     <footer id="footer">
       <div className="mx-auto max-w-6xl px-3 pb-8 ">
-        <div className="flex flex-col items-center justify-between gap-4 border-t border-light pt-8  sm:flex-row dark:border-gray-800">
+        <div className="flex flex-col items-center justify-between gap-4 border-t border-light pt-8  sm:flex-row dark:border-[rgb(var(--color-border))]">
           <a
             href={siteConfig.relensUrl}
             className="dark:text-secondary-light text-sm leading-5 text-text-secondary-semi-light"

app/components/ui/HeroImage.tsx

@@ -9,7 +9,7 @@ export default function HeroImage() {
       className="flow-root max-w-[calc(100vw-1.5rem)]"
     >
       <motion.div
-        className="max-w-full rounded-2xl bg-slate-50/40 p-2 ring-1 ring-inset ring-slate-200/50 dark:bg-gray-900/70 dark:ring-white/10"
+        className="max-w-full rounded-2xl bg-[rgb(var(--color-surface))]/70 p-2 ring-1 ring-inset ring-[rgb(var(--color-border))]/50 dark:bg-[rgb(var(--color-surface))]/70 dark:ring-[rgb(var(--color-border))]/50"
         initial={{ opacity: 0, y: 20, scale: 0.95 }}
         whileInView={{ opacity: 1, y: 0, scale: 1 }}
         transition={{
@@ -19,7 +19,7 @@ export default function HeroImage() {
         }}
         viewport={{ once: true, amount: 0.3 }}
       >
-        <div className="max-w-full rounded-xl bg-white ring-1 ring-slate-900/5 dark:bg-slate-950 dark:ring-white/15">
+        <div className="max-w-full rounded-xl bg-[rgb(var(--color-surface))] ring-1 ring-[rgb(var(--color-border))]/50">
           <motion.video
             src="/demo.webm"
             className="max-w-full rounded-xl shadow-2xl sepia-[0.05] dark:shadow-indigo-600/10"

app/components/ui/HowItWorks.tsx

@@ -44,7 +44,7 @@ export default function HowItWorks({
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.1 }}
               viewport={{ once: true }}
-              className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-3xl font-bold tracking-tighter text-transparent sm:text-5xl dark:from-gray-50 dark:to-gray-300"
+              className="mt-2 inline-block bg-gradient-to-br from-text to-text-secondary bg-clip-text py-2 text-3xl font-bold tracking-tighter text-transparent sm:text-5xl dark:from-[rgb(var(--color-foreground))] dark:to-[rgb(var(--color-muted-foreground))]"
             >
               {title}
             </motion.h2>
@@ -63,7 +63,7 @@ export default function HowItWorks({
             className="grid grid-cols-1 items-center gap-8 md:grid-cols-2"
           >
             <div className="order-1">
-              <div className="relative aspect-[16/10] w-full overflow-hidden rounded-2xl border border-light bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
+              <div className="relative aspect-[16/10] w-full overflow-hidden rounded-2xl border border-[rgb(var(--color-border))] bg-[rgb(var(--color-surface))]">
                 <Image
                   src={step.imagePath || "/images/preview.png"}
                   alt={step.title}
@@ -74,7 +74,7 @@ export default function HowItWorks({
               </div>
             </div>
             <div className="order-2">
-              <h3 className="text-2xl font-semibold text-text-secondary-dark sm:text-3xl dark:text-gray-50">
+              <h3 className="text-2xl font-semibold text-text-secondary-dark sm:text-3xl dark:text-[rgb(var(--color-foreground))]">
                 {step.title}
               </h3>
               <p className="mt-4 max-w-md text-justify leading-7 text-text-secondary dark:text-secondary-light">

app/components/ui/Navbar.tsx

@@ -54,8 +54,8 @@ export const Navigation: FC<NavigationProps> = ({ sticky = true }) => {
           : "relative",
         open === true ? "h-auto" : "h-18",
         (scrolled || open) && sticky === true
-          ? "backdrop-blur-nav max-w-3xl border-gray-600 bg-background/90 shadow-xl shadow-black/10"
-          : "bg-white/0"
+          ? "backdrop-blur-nav max-w-3xl border-[rgb(var(--color-border))] bg-[rgb(var(--color-background))]/90 shadow-xl shadow-black/10"
+          : "bg-transparent"
       )}
     >
       <div className="w-full md:my-auto">

app/globals.css

@@ -3,15 +3,40 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  color-scheme: light;
+
+  /* Core color tokens (RGB channels) */
+  --color-background: 255 255 255; /* #ffffff */
+  --color-foreground: 23 23 23; /* #171717 */
+  --color-primary: 48 144 254; /* #3090fe */
+  --color-light: 230 246 255; /* #e6f6ff */
+
+  /* Surfaces and borders */
+  --color-surface: 255 255 255; /* cards, panels */
+  --color-border: 229 231 235; /* tailwind gray-200 */
+
+  /* Muted */
+  --color-muted-foreground: 107 114 128; /* tailwind gray-500 */
+
+  --color-text: 20 20 19; /* #141413 */
+  --color-text-secondary-light: 112 112 105; /* #707069 */
+  --color-text-secondary-semi-light: 92 92 85; /* #5c5c55 */
+  --color-text-secondary: 72 60 51; /* #483c33 */
+  --color-text-secondary-dark: 32 32 29; /* #20201d */
+
+  /* Legacy aliases for arbitrary color utilities already in use */
+  --background: rgb(var(--color-background));
+  --foreground: rgb(var(--color-foreground));
+  --primary-color: rgb(var(--color-primary));
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+.dark {
+  color-scheme: dark;
+  --color-background: 10 10 10; /* #0a0a0a */
+  --color-foreground: 237 237 237; /* #ededed */
+  --color-surface: 10 10 10; /* near bg for subtle panels */
+  --color-border: 31 41 55; /* tailwind gray-800 */
+  --color-muted-foreground: 156 163 175; /* tailwind gray-400 */
 }
 
 @theme inline {
@@ -22,7 +47,7 @@
 }
 
 body {
-  background: var(--background);
+  background-color: var(--background);
   color: var(--foreground);
   font-family: Arial, Helvetica, sans-serif;
 }
@@ -36,10 +61,7 @@ body {
   src: url("/fonts/NanumPenScript.woff2") format("woff2");
 }
 
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-}
+
 
 .backdrop-blur {
   -webkit-backdrop-filter: blur(3px);
@@ -50,7 +72,7 @@ body {
 .backdrop-blur-nav {
   -webkit-backdrop-filter: blur(12px);
   backdrop-filter: blur(12px);
-  background-color: color-mix(in srgb, var(--background) 80%, transparent);
+  background-color: color-mix(in srgb, var(--background) 75%, transparent);
 }
 
 code {

app/layout.tsx

@@ -39,6 +39,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <head>
         <NextChatSDKBootstrap baseUrl={baseURL} />
+        <ThemeBootstrap />
       </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
@@ -68,9 +69,10 @@ function NextChatSDKBootstrap({ baseUrl }: { baseUrl: string }) {
                   mutation.target === htmlElement
                 ) {
                   const attrName = mutation.attributeName;
-                  if (attrName && attrName !== "suppresshydrationwarning") {
-                    htmlElement.removeAttribute(attrName);
-                  }
+                  // Preserve critical attributes like class and data-theme
+                  if (!attrName) return;
+                  const preserve = ["suppresshydrationwarning", "class", "data-theme"];
+                  if (preserve.includes(attrName)) return;
                 }
               });
             });
@@ -185,3 +187,22 @@ function NextChatSDKBootstrap({ baseUrl }: { baseUrl: string }) {
     </>
   );
 }
+
+function ThemeBootstrap() {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `(() => {
+  try {
+    const stored = localStorage.getItem('theme');
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const theme = stored || (systemDark ? 'dark' : 'light');
+    const root = document.documentElement;
+    if (theme === 'dark') root.classList.add('dark');
+    else root.classList.remove('dark');
+  } catch {}
+})();`,
+      }}
+    />
+  );
+}

app/page.tsx

@@ -31,7 +31,7 @@ export default function Home() {
             style={{ animationDuration: "1400ms" }}
           >
             <div
-              className="absolute inset-x-0 -bottom-20 -mx-10 h-2/4 bg-gradient-to-t from-[background] via-[background] to-transparent lg:h-1/4 dark:from-gray-950 dark:via-gray-950"
+              className="absolute inset-x-0 -bottom-20 -mx-10 h-2/4 bg-gradient-to-t from-[rgb(var(--color-background))] via-[rgb(var(--color-background))] to-transparent lg:h-1/4"
               aria-hidden="true"
             />
             <HeroImage />