feat: easy customization of theme color

This commit is contained in:
Timothy Lin
2021-06-19 17:40:01 +08:00
parent f3a21646ab
commit 2c0d11d414
7 changed files with 25 additions and 24 deletions

View File

@ -30,7 +30,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
type="text"
onChange={(e) => setSearchValue(e.target.value)}
placeholder="Search articles"
className="block w-full px-4 py-2 text-gray-900 bg-white border border-gray-300 rounded-md dark:border-gray-900 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-gray-100"
className="block w-full px-4 py-2 text-gray-900 bg-white border border-gray-300 rounded-md dark:border-gray-900 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-800 dark:text-gray-100"
/>
<svg
className="absolute w-5 h-5 text-gray-400 right-3 top-3 dark:text-gray-300"

View File

@ -59,7 +59,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
{author.twitter && (
<Link
href={author.twitter}
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
>
{author.twitter.replace('https://twitter.com/', '@')}
</Link>
@ -102,7 +102,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
Previous Article
</h2>
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
<div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
<Link href={`/blog/${prev.slug}`}>{prev.title}</Link>
</div>
</div>
@ -112,7 +112,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<h2 className="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">
Next Article
</h2>
<div className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400">
<div className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
<Link href={`/blog/${next.slug}`}>{next.title}</Link>
</div>
</div>
@ -123,7 +123,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<div className="pt-4 xl:pt-8">
<Link
href="/blog"
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
>
&larr; Back to the blog
</Link>

View File

@ -44,7 +44,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<div className="pt-4 xl:pt-8">
<Link
href={`/blog/${prev.slug}`}
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
>
&larr; {prev.title}
</Link>
@ -54,7 +54,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
<div className="pt-4 xl:pt-8">
<Link
href={`/blog/${next.slug}`}
className="text-blue-500 hover:text-blue-600 dark:hover:text-blue-400"
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
>
{next.title} &rarr;
</Link>