NickBland/website-2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update to use dark for dark theme, light for light theme

Browse Source 
Feel like overall, using a white navbar & footer with black hero image was a little too clashing. Decided black for black, white for white looks better.
This commit is contained in:
Nick Bland 2022-05-14 16:48:48 +10:00
parent 0a4263dfac
commit 3e793a5985
No known key found for this signature in database
GPG Key ID: B46CF88E4DAB4A2C
2 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/navbar.tsx
View File

@ -25,11 +25,11 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<header> <header>
<Disclosure as="nav" className="dark:bg-white bg-black"> <Disclosure as="nav" className="dark:bg-black bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16"> <div className="flex items-center justify-between h-16">
<div className="flex items-center"> <div className="flex items-center">
<div className="flex-shrink-0 dark:hidden block"> <div className="flex-shrink-0 hidden dark:block">
<Image <Image
className="" className=""
src="/logo-white.svg" src="/logo-white.svg"
@ -38,7 +38,7 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
width={100} width={100}
/> />
</div> </div>
<div className="flex-shrink-0 hidden dark:block"> <div className="flex-shrink-0 dark:hidden block">
<Image <Image
className="" className=""
src="/logo-black.svg" src="/logo-black.svg"
@ -49,8 +49,8 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
</div> </div>
<div className="hidden md:block"> <div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4"> <div className="ml-10 flex items-baseline space-x-4">
<Link href="/"><a className="dark:text-black text-white">Home</a></Link> <Link href="/"><a className="dark:text-white text-black">Home</a></Link>
<Link href="/"><a className="dark:text-black text-white">Home 2</a></Link> <Link href="/"><a className="dark:text-white text-black">About</a></Link>
</div> </div>
<div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3"> <div className="flex items-center justify-center mx-auto absolute top-5 right-0 left-1/3">
<ThemeSwitch></ThemeSwitch> <ThemeSwitch></ThemeSwitch>
@ -86,9 +86,9 @@ const NavBar = ({children, title = "nickbland.dev | Home", description = "A webs
> >
<div id="mobile-menu"> <div id="mobile-menu">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Link href="/"><a className="dark:text-black text-white px-3 py-2 rounded-md text-sm font-medium block">Home</a></Link> <Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">Home</a></Link>
<Link href="/"><a className="dark:text-black text-white px-3 py-2 rounded-md text-sm font-medium block">Home 2</a></Link> <Link href="/"><a className="dark:text-white text-black px-3 py-2 rounded-md text-sm font-medium block">About</a></Link>
<ThemeSwitch></ThemeSwitch> <div className="py-1 px-3"><ThemeSwitch></ThemeSwitch></div>
</div> </div>
</div> </div>
</Transition.Child> </Transition.Child>

8
components/themeSwitch.tsx
View File

@ -14,17 +14,17 @@ export const ThemeSwitch = () => {
} }
return ( return (
<div className="flex justify-end items-center space-x-2 mx-auto relative"> <div className="flex justify-start md:justify-end items-center space-x-2 mx-auto relative">
<Switch.Group> <Switch.Group>
<div className="flex items-center"> <div className="flex items-center">
<Switch.Label className="mr-3 dark:text-black text-white">Dark Mode</Switch.Label> <Switch.Label className="mr-3 dark:text-white text-black">Dark Mode</Switch.Label>
<Switch <Switch
checked={enabled} checked={enabled}
onChange={setEnabled} onChange={setEnabled}
className={`${enabled ? 'bg-gray-200' : 'bg-gray-400'} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2 dark:ring-black ring-white dark:focus:bg-gray-200 focus:bg-gray-400`} className={`${enabled ? 'bg-gray-400' : 'bg-gray-200'} relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2 dark:ring-white ring-black dark:focus:bg-gray-400 focus:bg-gray-400`}
> >
<span <span
className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block w-4 h-4 transform bg-white dark:bg-black rounded-full transition-transform`} /> className={`${enabled ? 'translate-x-6' : 'translate-x-1'} inline-block w-4 h-4 transform bg-black dark:bg-white rounded-full transition-transform`} />
</Switch> </Switch>
</div> </div>
</Switch.Group> </Switch.Group>