Dekker1/dekker.one
1
0
Fork 0
Code Issues Pull Requests Activity

Darken accent colour in light theme

Browse Source
This commit is contained in:
Jip J. Dekker 2023-11-30 17:16:05 +11:00
parent e4f5ef3a4c
commit 41bddf5308
No known key found for this signature in database
7 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/about/page.tsx
View File

@ -28,9 +28,9 @@ function SocialLink({
<li className={clsx(className, 'flex')}> <li className={clsx(className, 'flex')}>
<Link <Link
href={href} href={href}
className="group flex text-sm font-medium text-text-800 transition hover:text-accent-500 dark:text-text-200 dark:hover:text-accent-500" className="group flex text-sm font-medium text-text-800 transition hover:text-accent-800 dark:text-text-200 dark:hover:text-accent-400"
> >
<Icon className="h-6 w-6 flex-none fill-text-500 transition group-hover:fill-accent-500" /> <Icon className="h-6 w-6 flex-none fill-text-500 transition group-hover:fill-accent-800 dark:group-hover:" />
<span className="ml-4">{children}</span> <span className="ml-4">{children}</span>
</Link> </Link>
</li> </li>

2
src/app/projects/page.tsx
View File

@ -81,7 +81,7 @@ export default function Projects() {
<Card.Link href={project.link.href}>{project.name}</Card.Link> <Card.Link href={project.link.href}>{project.name}</Card.Link>
</h2> </h2>
<Card.Description>{project.description}</Card.Description> <Card.Description>{project.description}</Card.Description>
<p className="relative z-10 mt-6 flex text-sm font-medium text-text-400 transition group-hover:text-accent-500 dark:text-text-200"> <p className="relative z-10 mt-6 flex text-sm font-medium text-text-400 transition group-hover:text-accent-800 dark:text-text-200">
<LinkIcon className="h-6 w-6 flex-none" /> <LinkIcon className="h-6 w-6 flex-none" />
<span className="ml-2">{project.link.label}</span> <span className="ml-2">{project.link.label}</span>
</p> </p>

2
src/components/Card.tsx
View File

@ -69,7 +69,7 @@ Card.Cta = function CardCta({ children }: { children: React.ReactNode }) {
return ( return (
<div <div
aria-hidden="true" aria-hidden="true"
className="relative z-10 mt-4 flex items-center text-sm font-medium text-accent-500" className="relative z-10 mt-4 flex items-center text-sm font-medium text-accent-800 dark:text-accent-400"
> >
{children} {children}
<ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" /> <ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" />

2
src/components/Footer.tsx
View File

@ -15,7 +15,7 @@ function NavLink({
return ( return (
<Link <Link
href={href} href={href}
className="transition hover:text-accent-500 dark:hover:text-accent-400" className="transition hover:text-accent-800 dark:hover:text-accent-700"
> >
{children} {children}
</Link> </Link>

6
src/components/Header.tsx
View File

@ -110,13 +110,13 @@ function NavItem({
className={clsx( className={clsx(
'relative block px-3 py-2 transition', 'relative block px-3 py-2 transition',
isActive isActive
? 'text-accent-500 dark:text-accent-400' ? 'text-accent-800 dark:text-accent-400'
: 'hover:text-accent-500 dark:hover:text-accent-400', : 'hover:text-accent-800 dark:hover:text-accent-400',
)} )}
> >
{children} {children}
{isActive && ( {isActive && (
<span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-accent-500/0 via-accent-500/40 to-accent-500/0 dark:from-accent-400/0 dark:via-accent-400/40 dark:to-accent-400/0" /> <span className="absolute inset-x-1 -bottom-px h-px bg-gradient-to-r from-accent-800/0 via-accent-800/40 to-accent-800/0 dark:from-accent-400/0 dark:via-accent-400/40 dark:to-accent-400/0" />
)} )}
</Link> </Link>
</li> </li>

8
src/components/ThemeSelector.tsx
View File

@ -36,7 +36,7 @@ export function ThemeSelector(
'h-6 w-6 dark:hidden', 'h-6 w-6 dark:hidden',
theme === 'system' theme === 'system'
? 'fill-text-400 stroke-text-400' ? 'fill-text-400 stroke-text-400'
: 'fill-accent-400 stroke-accent-400', : 'fill-accent-700 stroke-accent-700 dark:fill-accent-400 dark:stroke-accent-400',
)} )}
/> />
<MoonIcon <MoonIcon
@ -44,7 +44,7 @@ export function ThemeSelector(
'hidden h-6 w-6 dark:block', 'hidden h-6 w-6 dark:block',
theme === 'system' theme === 'system'
? 'fill-text-400 stroke-text-400' ? 'fill-text-400 stroke-text-400'
: 'fill-accent-400 stroke-accent-400', : 'fill-accent-700 stroke-accent-700 dark:fill-accent-400 dark:stroke-accent-400',
)} )}
/> />
</Listbox.Button> </Listbox.Button>
@ -57,7 +57,7 @@ export function ThemeSelector(
clsx( clsx(
'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1', 'flex cursor-pointer select-none items-center rounded-[0.625rem] p-1',
{ {
'text-accent-500': selected, 'text-accent-800 dark:text-accent-400': selected,
'text-text-900 dark:text-white': active && !selected, 'text-text-900 dark:text-white': active && !selected,
'text-text-700 dark:text-text-400': !active && !selected, 'text-text-700 dark:text-text-400': !active && !selected,
'bg-text-100 dark:bg-text-900/40': active, 'bg-text-100 dark:bg-text-900/40': active,
@ -72,7 +72,7 @@ export function ThemeSelector(
className={clsx( className={clsx(
'h-4 w-4', 'h-4 w-4',
selected selected
? 'fill-accent-400 stroke-accent-400' ? 'fill-accent-700 stroke-accent-700 dark:fill-accent-400 dark:stroke-accent-400'
: 'fill-text-400 stroke-text-400', : 'fill-text-400 stroke-text-400',
)} )}
/> />

14
typography.ts
View File

@ -29,10 +29,10 @@ export default function typographyStyles({ theme }: PluginUtils) {
css: { css: {
'--tw-prose-body': theme('colors.text.600'), '--tw-prose-body': theme('colors.text.600'),
'--tw-prose-headings': theme('colors.text.900'), '--tw-prose-headings': theme('colors.text.900'),
'--tw-prose-links': theme('colors.accent.500'), '--tw-prose-links': theme('colors.accent.800'),
'--tw-prose-links-hover': theme('colors.accent.600'), '--tw-prose-links-hover': theme('colors.accent.600'),
'--tw-prose-underline': theme('colors.accent.500 / 0.2'), '--tw-prose-underline': theme('colors.accent.800 / 0.2'),
'--tw-prose-underline-hover': theme('colors.accent.500'), '--tw-prose-underline-hover': theme('colors.accent.800'),
'--tw-prose-bold': theme('colors.text.900'), '--tw-prose-bold': theme('colors.text.900'),
'--tw-prose-counters': theme('colors.text.900'), '--tw-prose-counters': theme('colors.text.900'),
'--tw-prose-bullets': theme('colors.text.900'), '--tw-prose-bullets': theme('colors.text.900'),
@ -49,10 +49,10 @@ export default function typographyStyles({ theme }: PluginUtils) {
'--tw-prose-invert-body': theme('colors.text.400'), '--tw-prose-invert-body': theme('colors.text.400'),
'--tw-prose-invert-headings': theme('colors.text.200'), '--tw-prose-invert-headings': theme('colors.text.200'),
'--tw-prose-invert-links': theme('colors.accent.400'), '--tw-prose-invert-links': theme('colors.accent.700'),
'--tw-prose-invert-links-hover': theme('colors.accent.400'), '--tw-prose-invert-links-hover': theme('colors.accent.700'),
'--tw-prose-invert-underline': theme('colors.accent.400 / 0.3'), '--tw-prose-invert-underline': theme('colors.accent.700 / 0.3'),
'--tw-prose-invert-underline-hover': theme('colors.accent.400'), '--tw-prose-invert-underline-hover': theme('colors.accent.700'),
'--tw-prose-invert-bold': theme('colors.text.200'), '--tw-prose-invert-bold': theme('colors.text.200'),
'--tw-prose-invert-counters': theme('colors.text.200'), '--tw-prose-invert-counters': theme('colors.text.200'),
'--tw-prose-invert-bullets': theme('colors.text.200'), '--tw-prose-invert-bullets': theme('colors.text.200'),