gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Introduce env-driven accent color system and apply to links, icons, and tags

Browse Source
This commit is contained in:
gbanyan
2025-11-17 22:46:55 +08:00
parent e7a9d89cfc
commit 4cb3e7627b
10 changed files with 83 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/blog/[slug]/page.tsx
View File

@@ -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>

15
app/layout.tsx
View File

@@ -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>

33
app/pages/[slug]/page.tsx
View File

@@ -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>