AderKonstantin/darkwave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat: Implement theme switcher in header

Browse Source 
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.
This commit is contained in:
AderKonstantin
2025-03-26 20:58:40 +03:00
parent 7b97fbe816
commit 5f4b2cf1d5
5 changed files with 92 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/header/main.tsx
View File

@@ -8,34 +8,34 @@ import AnimatedLink from '../animatedLink';
import HeaderToolbar from "../header/toolbar";
export default function MainHeader() {
return (
<header className="flex flex-col">
<div className="flex flex-row mt-12 mb-22">
<ul className="w-full flex flex-row justify-between items-baseline list-none">
<li className="text-4xl">
<AnimatedLink href="https://blog.aderk.tech/en">
aderk.tech
</AnimatedLink>
</li>
return (
<header className="flex flex-col">
<div className="flex flex-row mt-12 mb-22">
<ul className="w-full flex flex-row justify-between items-baseline list-none">
<li className="text-4xl">
<AnimatedLink href="https://blog.aderk.tech/en">
aderk.tech
</AnimatedLink>
</li>
<li className="text-6xl flex items-center justify-center filter brightness-0 invert">
<Link href="#">
<Image
src={searchPic}
alt="search"
width={32}
height={32}
/>
</Link>
</li>
</ul>
</div>
<div className="text-2xl mb-20">
<p className="leading-10">
Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
</p>
</div>
<HeaderToolbar />
</header>
);
<li className="text-6xl flex items-center justify-center filter brightness-0 invert">
<Link href="#">
<Image
src={searchPic}
alt="search"
width={32}
height={32}
/>
</Link>
</li>
</ul>
</div>
<div className="text-2xl mb-20">
<p className="leading-10">
Hello. I am is a programmer, hacker, and gamer. Love comics, coding, read books. There I am posting articles about science and another staff, that’s im like.
</p>
</div>
<HeaderToolbar />
</header>
);
}