diff --git a/site/blog/app/(web)/code-snippets/[slug]/MDXContent.tsx b/site/blog/app/(web)/code-snippets/[slug]/MDXContent.tsx
index 623abc0..5a3948a 100644
--- a/site/blog/app/(web)/code-snippets/[slug]/MDXContent.tsx
+++ b/site/blog/app/(web)/code-snippets/[slug]/MDXContent.tsx
@@ -14,27 +14,29 @@ import CssGradientBtn from "@/md/posts-mdx/css-gradient/GradientBtn";
 
 import "remark-gh-alerts/styles/github-base.css";
 import "remark-gh-alerts/styles/github-colors-light.css";
+import "remark-gh-alerts/styles/github-colors-dark-class.css";
 
 const options: MDXRemoteProps["options"] = {
   mdxOptions: {
     remarkPlugins: [
       [remarkToc, { maxDepth: 4 }],
       remarkGfm,
-      // @ts-ignore
       remarkGithubAlerts,
     ],
     rehypePlugins: [
       rehypeSlug,
       rehypeAutolinkHeadings,
-      // @ts-ignore
-      [rehypeShiki, { theme: "vitesse-light" }],
+      [
+        rehypeShiki,
+        { themes: { light: "vitesse-light", dark: "vitesse-dark" } },
+      ],
     ],
   },
 };
 
 export default function MDXContent(props: Pick<MDXRemoteProps, "source">) {
   return (
-    <article className="fade-in-up-content prose prose-gray">
+    <article className="fade-in-up-content prose prose-slate dark:prose-invert">
       <MDXRemote
         source={props.source}
         components={{ Button, CssGradientBtn }}
diff --git a/site/blog/app/(web)/components/Copyright.tsx b/site/blog/app/(web)/components/Copyright.tsx
index 0ec76e6..f0b7b3f 100644
--- a/site/blog/app/(web)/components/Copyright.tsx
+++ b/site/blog/app/(web)/components/Copyright.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 
 export default () => (
-  <div className="text-sm opacity-50 ml-1">
+  <div className="text-sm opacity-50 ml-1 dark:text-slate-400">
     ©2022-{new Date().getFullYear()} Qhan W. All Rights Reserved.
     <Link
       className="text-brand ml-2"
diff --git a/site/blog/app/(web)/components/Footer.tsx b/site/blog/app/(web)/components/Footer.tsx
index c0ea865..3e7ba84 100644
--- a/site/blog/app/(web)/components/Footer.tsx
+++ b/site/blog/app/(web)/components/Footer.tsx
@@ -9,7 +9,7 @@ type FooterProps = { className?: string };
 export default ({ className }: FooterProps) => (
   <footer
     className={clsx(
-      "flex items-center pt-12 pb-12 mt-24 border-t-2 border-gray-100",
+      "flex items-center pt-12 pb-12 mt-24 border-t-2 border-slate-100 dark:border-slate-700",
       className
     )}
   >
diff --git a/site/blog/app/(web)/components/Header.tsx b/site/blog/app/(web)/components/Header.tsx
index 6dc9b41..d18919f 100644
--- a/site/blog/app/(web)/components/Header.tsx
+++ b/site/blog/app/(web)/components/Header.tsx
@@ -1,6 +1,8 @@
 import Link from "next/link";
 import clsx from "clsx";
+
 import ScrollTop from "./ScrollTop";
+import Theme from "./Theme";
 
 const nav = [
   {
@@ -63,13 +65,16 @@ const nav = [
 export default () => (
   <>
     <ScrollTop />
-    <header className="px-4 sm:px-6 sticky top-0 z-40 w-full backdrop-blur transition-colors duration-500 bg-white/95 supports-backdrop-blur:bg-white/60 ">
+    <header
+      className="px-4 sm:px-6 sticky top-0 z-40 w-full backdrop-blur transition-colors duration-500 bg-white/95 supports-backdrop-blur:bg-white/60
+    dark:bg-slate-800"
+    >
       <div className="flex justify-between items-center py-4 md:justify-start md:space-x-10">
         <div className="flex justify-start md:w-0 md:flex-1">
           <Link href="/" className="inline-flex items-center text-brand">
             <span className="sr-only">Workflow</span>
             <span className="i-logos-sakura w-6 h-6 logo-rotate" />
-            <span className="text-lg ml-2 font-medium text-gray-900">
+            <span className="text-lg ml-2 font-medium text-slate-900 dark:text-slate-300">
               Qhan W
             </span>
           </Link>
@@ -96,6 +101,7 @@ export default () => (
             </Link>
           ))}
         </nav>
+        <Theme />
       </div>
     </header>
     <div className="header-line-shadow" />
diff --git a/site/blog/app/(web)/components/Theme.tsx b/site/blog/app/(web)/components/Theme.tsx
new file mode 100644
index 0000000..188b318
--- /dev/null
+++ b/site/blog/app/(web)/components/Theme.tsx
@@ -0,0 +1,20 @@
+"use client";
+import clsx from "clsx";
+import { useTheme } from "next-themes";
+
+export default function Theme() {
+  const { theme, setTheme } = useTheme();
+
+  const isDark = theme === "dark";
+
+  return (
+    <a
+      onClick={() => setTheme(isDark ? "light" : "dark")}
+      className="text-slate-800 dark:text-white cursor-pointer"
+    >
+      <i
+        className={clsx({ "i-ri:sun-fill": !isDark, "i-ri:moon-fill": isDark })}
+      />
+    </a>
+  );
+}
diff --git a/site/blog/app/(web)/posts/[slug]/MDXContent.tsx b/site/blog/app/(web)/posts/[slug]/MDXContent.tsx
index 6145663..5a3948a 100644
--- a/site/blog/app/(web)/posts/[slug]/MDXContent.tsx
+++ b/site/blog/app/(web)/posts/[slug]/MDXContent.tsx
@@ -14,6 +14,7 @@ import CssGradientBtn from "@/md/posts-mdx/css-gradient/GradientBtn";
 
 import "remark-gh-alerts/styles/github-base.css";
 import "remark-gh-alerts/styles/github-colors-light.css";
+import "remark-gh-alerts/styles/github-colors-dark-class.css";
 
 const options: MDXRemoteProps["options"] = {
   mdxOptions: {
@@ -25,14 +26,17 @@ const options: MDXRemoteProps["options"] = {
     rehypePlugins: [
       rehypeSlug,
       rehypeAutolinkHeadings,
-      [rehypeShiki, { theme: "vitesse-light" }],
+      [
+        rehypeShiki,
+        { themes: { light: "vitesse-light", dark: "vitesse-dark" } },
+      ],
     ],
   },
 };
 
 export default function MDXContent(props: Pick<MDXRemoteProps, "source">) {
   return (
-    <article className="fade-in-up-content prose prose-gray">
+    <article className="fade-in-up-content prose prose-slate dark:prose-invert">
       <MDXRemote
         source={props.source}
         components={{ Button, CssGradientBtn }}
diff --git a/site/blog/app/(web)/posts/[slug]/styles.scss b/site/blog/app/(web)/posts/[slug]/styles.scss
index f136b09..57cd909 100644
--- a/site/blog/app/(web)/posts/[slug]/styles.scss
+++ b/site/blog/app/(web)/posts/[slug]/styles.scss
@@ -40,11 +40,19 @@
   }
 }
 
-.prose pre.shiki.vitesse-light {
-  font-family: DM Mono, Input Mono, Fira Code, monospace;
+.prose pre.shiki {
+  font-family:
+    DM Mono,
+    Input Mono,
+    Fira Code,
+    monospace;
   font-size: 0.92em;
   line-height: 1.4;
   // margin: 0.5em 0;
 
   background-color: #f9f9f9 !important;
 }
+
+.dark .prose pre.shiki {
+  background-color: rgb(15 23 42) !important;
+}
diff --git a/site/blog/app/layout.tsx b/site/blog/app/layout.tsx
index bf7ccd8..f6957d4 100644
--- a/site/blog/app/layout.tsx
+++ b/site/blog/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { Analytics } from "@vercel/analytics/react";
+import { ThemeProvider } from "next-themes";
 import NextTopLoader from "nextjs-toploader";
 
 import "./styles/globals.scss";
@@ -18,16 +19,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <NextTopLoader
-          color="rgba(156,163,175,0.45)"
-          height={2}
-          showSpinner={false}
-          shadow={false}
-        />
-        {children}
-        <Analytics />
+    <html lang="en" suppressHydrationWarning>
+      <body className={`${inter.className} dark:bg-slate-800`}>
+        <ThemeProvider attribute="class" enableColorScheme={false}>
+          <NextTopLoader
+            color="rgba(156,163,175,0.45)"
+            height={2}
+            showSpinner={false}
+            shadow={false}
+          />
+          {children}
+          <Analytics />
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/site/blog/app/styles/globals.scss b/site/blog/app/styles/globals.scss
index 9fd144c..10f15b7 100644
--- a/site/blog/app/styles/globals.scss
+++ b/site/blog/app/styles/globals.scss
@@ -777,13 +777,28 @@
 
 .header-line-shadow {
   @apply relative z-10;
+
+  &::before {
+    @apply fixed content-[''] w-full;
+    box-shadow: 0 0 4px 1px #ddd;
+  }
+
+  &::after {
+    // @apply absolute content-[''] w-full h-1 bg-gradient-to-b from-white to-white;
+
+    @apply absolute content-[''] w-full h-1 bg-white;
+  }
 }
-.header-line-shadow::before {
-  @apply fixed content-[''] w-full;
-  box-shadow: 0 0 4px 1px #ddd;
-}
-.header-line-shadow::after {
-  @apply absolute content-[''] w-full h-1 bg-gradient-to-b from-white to-white;
+
+.dark {
+  .header-line-shadow {
+    &::before {
+      box-shadow: 0 0 4px 1px rgb(0 0 0 / 35%);
+    }
+    &::after {
+      @apply bg-slate-800;
+    }
+  }
 }
 
 @keyframes fadeInUp {
diff --git a/site/blog/package.json b/site/blog/package.json
index 4b70541..321630e 100644
--- a/site/blog/package.json
+++ b/site/blog/package.json
@@ -17,6 +17,7 @@
     "gray-matter": "^4.0.3",
     "next": "14.2.13",
     "next-mdx-remote": "^5.0.0",
+    "next-themes": "^0.3.0",
     "nextjs-toploader": "^3.6.15",
     "photoswipe": "^5.4.4",
     "plyr": "^3.7.8",
diff --git a/site/blog/pnpm-lock.yaml b/site/blog/pnpm-lock.yaml
index 88d0107..080f0c3 100644
--- a/site/blog/pnpm-lock.yaml
+++ b/site/blog/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       next-mdx-remote:
         specifier: ^5.0.0
         version: 5.0.0(@types/react@18.3.10)(react@18.3.1)
+      next-themes:
+        specifier: ^0.3.0
+        version: 0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       nextjs-toploader:
         specifier: ^3.6.15
         version: 3.6.15(next@14.2.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.79.4))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2172,6 +2175,12 @@ packages:
     peerDependencies:
       react: '>=16'
 
+  next-themes@0.3.0:
+    resolution: {integrity: sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18
+      react-dom: ^16.8 || ^17 || ^18
+
   next@14.2.13:
     resolution: {integrity: sha512-BseY9YNw8QJSwLYD7hlZzl6QVDoSFHL/URN5K64kVEVpCsSOWeyjbIGK+dZUaRViHTaMQX8aqmnn0PHBbGZezg==}
     engines: {node: '>=18.17.0'}
@@ -5473,6 +5482,11 @@ snapshots:
       - '@types/react'
       - supports-color
 
+  next-themes@0.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   next@14.2.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.79.4):
     dependencies:
       '@next/env': 14.2.13