diff --git a/.env.local.example b/.env.local.example
index 255cef8..edf500f 100644
--- a/.env.local.example
+++ b/.env.local.example
@@ -12,6 +12,12 @@ NEXT_PUBLIC_POSTS_PER_PAGE="5"
 NEXT_PUBLIC_DEFAULT_LOCALE="zh-TW"
 NEXT_PUBLIC_SITE_AVATAR_URL="https://www.gravatar.com/avatar/yourhash?s=160&d=identicon"
 
+# Color scheme / accents
+NEXT_PUBLIC_COLOR_ACCENT="#2563eb"
+NEXT_PUBLIC_COLOR_ACCENT_SOFT="#dbeafe"
+NEXT_PUBLIC_COLOR_ACCENT_TEXT_LIGHT="#1d4ed8"
+NEXT_PUBLIC_COLOR_ACCENT_TEXT_DARK="#93c5fd"
+
 # Social and profile
 NEXT_PUBLIC_TWITTER_HANDLE="@yourhandle"
 NEXT_PUBLIC_GITHUB_URL="https://github.com/yourname"
diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx
index 1e78a59..644cdf7 100644
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -55,28 +55,17 @@ export default function BlogPostPage({ params }: Props) {
             </h1>
             {post.tags && (
               <div className="flex flex-wrap gap-2 pt-1">
-                {post.tags.map((t, i) => {
-                  const tagColorClasses = [
-                    'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
-                    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
-                    'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
-                    'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
-                    'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
-                  ];
-                  const color =
-                    tagColorClasses[i % tagColorClasses.length];
-                  return (
-                    <Link
-                      key={t}
-                      href={`/tags/${encodeURIComponent(
-                        t.toLowerCase().replace(/\s+/g, '-')
-                      )}`}
-                      className={`rounded-full px-2 py-0.5 text-xs transition ${color}`}
-                    >
-                      #{t}
-                    </Link>
-                  );
-                })}
+                {post.tags.map((t) => (
+                  <Link
+                    key={t}
+                    href={`/tags/${encodeURIComponent(
+                      t.toLowerCase().replace(/\s+/g, '-')
+                    )}`}
+                    className="rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent-textLight transition hover:bg-accent dark:text-accent-textDark"
+                  >
+                    #{t}
+                  </Link>
+                ))}
               </div>
             )}
           </header>
diff --git a/app/layout.tsx b/app/layout.tsx
index fdcc644..33ce724 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -32,9 +32,24 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  const theme = siteConfig.theme;
+
   return (
     <html lang={siteConfig.defaultLocale} suppressHydrationWarning>
       <body>
+        <style
+          // Set CSS variables for accent colors (light + dark variants)
+          dangerouslySetInnerHTML={{
+            __html: `
+              :root {
+                --color-accent: ${theme.accent};
+                --color-accent-soft: ${theme.accentSoft};
+                --color-accent-text-light: ${theme.accentTextLight};
+                --color-accent-text-dark: ${theme.accentTextDark};
+              }
+            `
+          }}
+        />
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           <LayoutShell>{children}</LayoutShell>
         </ThemeProvider>
diff --git a/app/pages/[slug]/page.tsx b/app/pages/[slug]/page.tsx
index db9f060..e6de994 100644
--- a/app/pages/[slug]/page.tsx
+++ b/app/pages/[slug]/page.tsx
@@ -55,28 +55,17 @@ export default function StaticPage({ params }: Props) {
             </h1>
             {page.tags && (
               <div className="flex flex-wrap gap-2 pt-1">
-                {page.tags.map((t, i) => {
-                  const tagColorClasses = [
-                    'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
-                    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
-                    'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
-                    'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
-                    'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
-                  ];
-                  const color =
-                    tagColorClasses[i % tagColorClasses.length];
-                  return (
-                    <Link
-                      key={t}
-                      href={`/tags/${encodeURIComponent(
-                        t.toLowerCase().replace(/\s+/g, '-')
-                      )}`}
-                      className={`rounded-full px-2 py-0.5 text-xs transition ${color}`}
-                    >
-                      #{t}
-                    </Link>
-                  );
-                })}
+                {page.tags.map((t) => (
+                  <Link
+                    key={t}
+                    href={`/tags/${encodeURIComponent(
+                      t.toLowerCase().replace(/\s+/g, '-')
+                    )}`}
+                    className="rounded-full bg-accent-soft px-2 py-0.5 text-xs text-accent-textLight transition hover:bg-accent dark:text-accent-textDark"
+                  >
+                    #{t}
+                  </Link>
+                ))}
               </div>
             )}
           </header>
diff --git a/components/hero.tsx b/components/hero.tsx
index 2fada87..6c4ee35 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -78,9 +78,9 @@ export function Hero() {
                   href={item.href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center gap-2 rounded-full bg-white/80 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-slate-50 dark:bg-slate-900/80 dark:ring-slate-700"
+                  className="flex items-center gap-2 rounded-full bg-white/80 px-3 py-1 shadow-sm ring-1 ring-slate-200 hover:bg-accent-soft dark:bg-slate-900/80 dark:ring-slate-700"
                 >
-                  <FontAwesomeIcon icon={item.icon} className="h-3.5 w-3.5" />
+                  <FontAwesomeIcon icon={item.icon} className="h-3.5 w-3.5 text-accent" />
                   <span>{item.label}</span>
                 </a>
               ))}
diff --git a/components/post-list-item.tsx b/components/post-list-item.tsx
index 3d75550..6ee55c1 100644
--- a/components/post-list-item.tsx
+++ b/components/post-list-item.tsx
@@ -15,14 +15,6 @@ export function PostListItem({ post }: Props) {
   const excerpt =
     post.description || post.custom_excerpt || post.body?.raw?.slice(0, 120);
 
-  const tagColorClasses = [
-    'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
-    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
-    'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
-    'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
-    'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
-  ];
-
   return (
     <li>
       <article className="group flex gap-4 rounded-lg border border-slate-200/70 bg-white/80 p-4 transition hover:bg-slate-50 dark:border-slate-800 dark:bg-slate-900/80 dark:hover:bg-slate-900">
@@ -44,26 +36,22 @@ export function PostListItem({ post }: Props) {
               )}
             </p>
           )}
-          <h2 className="text-base font-semibold leading-snug text-slate-900 group-hover:text-blue-600 sm:text-lg dark:text-slate-50 dark:group-hover:text-blue-400">
+          <h2 className="text-base font-semibold leading-snug text-slate-900 hover:text-accent sm:text-lg dark:text-slate-50 dark:hover:text-accent">
             <Link href={post.url}>{post.title}</Link>
           </h2>
           {post.tags && post.tags.length > 0 && (
             <div className="flex flex-wrap gap-2 pt-0.5">
-              {post.tags.slice(0, 4).map((t, i) => {
-                const color =
-                  tagColorClasses[i % tagColorClasses.length];
-                return (
-                  <Link
-                    key={t}
-                    href={`/tags/${encodeURIComponent(
-                      t.toLowerCase().replace(/\s+/g, '-')
-                    )}`}
-                    className={`rounded-full px-2 py-0.5 text-[11px] transition ${color}`}
-                  >
-                    #{t}
-                  </Link>
-                );
-              })}
+              {post.tags.slice(0, 4).map((t) => (
+                <Link
+                  key={t}
+                  href={`/tags/${encodeURIComponent(
+                    t.toLowerCase().replace(/\s+/g, '-')
+                  )}`}
+                  className="rounded-full bg-accent-soft px-2 py-0.5 text-[11px] text-accent-textLight transition hover:bg-accent dark:text-accent-textDark"
+                >
+                  #{t}
+                </Link>
+              ))}
             </div>
           )}
           {excerpt && (
diff --git a/components/right-sidebar.tsx b/components/right-sidebar.tsx
index 084eb52..5da40a0 100644
--- a/components/right-sidebar.tsx
+++ b/components/right-sidebar.tsx
@@ -59,7 +59,7 @@ export function RightSidebar() {
               )}
             </Link>
             {socialItems.length > 0 && (
-              <div className="flex items-center gap-3 text-base text-slate-500 dark:text-slate-400">
+              <div className="flex items-center gap-3 text-base text-accent-textLight dark:text-accent-textDark">
                 {socialItems.map((item) => (
                   <a
                     key={item.key}
@@ -67,7 +67,7 @@ export function RightSidebar() {
                     target="_blank"
                     rel="noopener noreferrer"
                     aria-label={item.label}
-                    className="transition hover:text-slate-800 dark:hover:text-slate-100"
+                    className="transition hover:text-accent"
                   >
                     <FontAwesomeIcon icon={item.icon} className="h-4 w-4" />
                   </a>
@@ -121,7 +121,7 @@ export function RightSidebar() {
             <div className="mt-2 text-right text-[11px]">
               <Link
                 href="/tags"
-                className="text-slate-500 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-400"
+                className="text-slate-500 hover:text-accent dark:text-slate-400 dark:hover:text-accent"
               >
                 查看全部標籤 →
               </Link>
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
index 65af0d5..a130cec 100644
--- a/components/theme-toggle.tsx
+++ b/components/theme-toggle.tsx
@@ -20,7 +20,7 @@ export function ThemeToggle() {
   return (
     <button
       type="button"
-      className="inline-flex h-8 w-8 items-center justify-center rounded-full text-slate-500 transition hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-100"
+      className="inline-flex h-8 w-8 items-center justify-center rounded-full text-accent-textLight transition hover:bg-accent-soft hover:text-accent dark:text-accent-textDark dark:hover:bg-slate-800 dark:hover:text-accent"
       onClick={() => setTheme(next)}
       aria-label={theme === 'dark' ? '切換為淺色主題' : '切換為深色主題'}
     >
diff --git a/lib/config.ts b/lib/config.ts
index f9b5e44..ada0ed6 100644
--- a/lib/config.ts
+++ b/lib/config.ts
@@ -23,6 +23,14 @@ export const siteConfig = {
     mastodon: process.env.NEXT_PUBLIC_MASTODON_URL || '',
     gitea: process.env.NEXT_PUBLIC_GITEA_URL || ''
   },
+  theme: {
+    accent: process.env.NEXT_PUBLIC_COLOR_ACCENT || '#2563eb',
+    accentSoft: process.env.NEXT_PUBLIC_COLOR_ACCENT_SOFT || '#dbeafe',
+    accentTextLight:
+      process.env.NEXT_PUBLIC_COLOR_ACCENT_TEXT_LIGHT || '#1d4ed8',
+    accentTextDark:
+      process.env.NEXT_PUBLIC_COLOR_ACCENT_TEXT_DARK || '#93c5fd'
+  },
   ogImage: process.env.NEXT_PUBLIC_OG_DEFAULT_IMAGE || '/assets/og-default.jpg',
   twitterCard:
     (process.env.NEXT_PUBLIC_TWITTER_CARD_TYPE as
diff --git a/tailwind.config.js b/tailwind.config.js
index 422621e..5edfedc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,14 +8,22 @@ module.exports = {
   ],
   theme: {
     extend: {
+      colors: {
+        accent: {
+          DEFAULT: 'var(--color-accent)',
+          soft: 'var(--color-accent-soft)',
+          textLight: 'var(--color-accent-text-light)',
+          textDark: 'var(--color-accent-text-dark)'
+        }
+      },
       typography: (theme) => ({
         DEFAULT: {
           css: {
             color: theme('colors.slate.700'),
             a: {
-              color: theme('colors.blue.600'),
+              color: 'var(--color-accent-text-light)',
               '&:hover': {
-                color: theme('colors.blue.700')
+                color: 'var(--color-accent)'
               }
             },
             h1: {
@@ -28,7 +36,7 @@ module.exports = {
             },
             blockquote: {
               fontStyle: 'normal',
-              borderLeftColor: theme('colors.blue.200'),
+              borderLeftColor: 'var(--color-accent-soft)',
               color: theme('colors.slate.700'),
               backgroundColor: theme('colors.slate.50')
             },
@@ -44,9 +52,9 @@ module.exports = {
             // Slightly softer than pure white for body text
             color: theme('colors.slate.200'),
             a: {
-              color: theme('colors.blue.400'),
+              color: 'var(--color-accent-text-dark)',
               '&:hover': {
-                color: theme('colors.blue.300')
+                color: 'var(--color-accent)'
               }
             },
             strong: {
@@ -67,7 +75,7 @@ module.exports = {
               color: theme('colors.slate.50')
             },
             blockquote: {
-              borderLeftColor: theme('colors.blue.500'),
+              borderLeftColor: 'var(--color-accent)',
               backgroundColor: theme('colors.slate.800'),
               color: theme('colors.slate.200'),
               p: {
