5f4b2cf1d5
This commit introduces a theme switcher component in the header, allowing users to toggle between light and dark modes. The changes include: - Added a new `ThemeSwitcher` component in `components/header/theme-switcher.tsx` that handles the theme switching logic and UI. - Integrated the `ThemeSwitcher` component into the `HeaderToolbar` component. - Updated the global CSS file (`app/globals.css`) to include styles for the light mode. - Initialized the theme based on user's previous preference or system preference. - Saved the user's theme preference in the browser's local storage for persistence. These changes provide a better user experience by allowing users to switch between light and dark modes, which can improve readability and accessibility, especially in different lighting conditions.
68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
'use client';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
import { ThemeSwitcher } from './theme-switcher';
|
|
|
|
import globePic from '../../public/globe.svg';
|
|
import emailPic from '../../public/email.svg';
|
|
import rssPic from '../../public/rss-feed.svg';
|
|
import supportPic from '../../public/support.svg';
|
|
import settingsPic from '../../public/settings.svg';
|
|
import AnimatedLink from '../animatedLink';
|
|
|
|
|
|
export default function Toolbar() {
|
|
return (
|
|
<div className="flex h-24 justify-between items-center border-white light:border-black border-t border-b">
|
|
<div className="flex items-baseline">
|
|
<p><AnimatedLink href='#'>Science</AnimatedLink> | <AnimatedLink href='#'>Software</AnimatedLink> | <AnimatedLink href='#'>Hardware</AnimatedLink> | <AnimatedLink href='#'>Rockets</AnimatedLink> | <AnimatedLink href='#'>Startups</AnimatedLink></p>
|
|
</div>
|
|
<div className="flex items-baseline">
|
|
<ul className="inline-flex items-center gap-4">
|
|
<ThemeSwitcher />
|
|
<li className="inline filter brightness-0 invert">
|
|
<Link href="#">
|
|
<Image
|
|
src={globePic}
|
|
alt="lang"
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
</Link>
|
|
</li>
|
|
<li className="inline filter brightness-0 invert">
|
|
<Link href="#">
|
|
<Image
|
|
src={emailPic}
|
|
alt="email"
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
</Link>
|
|
</li>
|
|
<li className="inline filter brightness-0 invert">
|
|
<Link href="#">
|
|
<Image
|
|
src={rssPic}
|
|
alt="rss"
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
</Link>
|
|
</li>
|
|
<li className="inline filter brightness-0 invert">
|
|
<Link href="#">
|
|
<Image
|
|
src={settingsPic}
|
|
alt="settings"
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |