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

Merge pull request #7 from AderKonstantin/theme-switcher

Browse Source 
✨ feat: Implement theme switcher in header
This commit is contained in:
AderKonstantin
2025-03-26 20:59:02 +03:00
committed by GitHub
parent 7b97fbe816 5f4b2cf1d5
commit ccb5978831
5 changed files with 92 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/globals.css
View File

@@ -1,6 +1,6 @@
@import "tailwindcss"; @import "tailwindcss";
:root { /* :root {
--background: #ffffff; --background: #ffffff;
--foreground: #171717; --foreground: #171717;
} }
@@ -10,10 +10,14 @@
--background: #0a0a0a; --background: #0a0a0a;
--foreground: #ededed; --foreground: #ededed;
} }
} } */
body { body {
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
font-family: "JetBrains Mono", monospace; font-family: "JetBrains Mono", monospace;
} }
.light {
@apply bg-black text-white;
}

7
app/layout.tsx
View File

@@ -30,11 +30,8 @@ export const metadata: Metadata = {
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en"> <html className="dark" lang="en">
<body <body className={`bg-black text-white light:bg-white light:text-black font-sans`}>
className={`bg-black text-white font-sans`}
>
<div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6"> <div className="text-xl 2xl:mx-64 xl:mx-32 md:mx-6">
<MainHeader /> <MainHeader />
{children} {children}

50
components/header/theme-switcher.tsx Normal file
View File

@@ -0,0 +1,50 @@
'use client';
import { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import moonPic from '@/public/moon.svg';
import sunPic from '@/public/sun.svg';
export function ThemeSwitcher() {
const [isLightMode, setIsLightMode] = useState(false);
// Initialize theme from localStorage or system preference
useEffect(() => {
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (savedTheme === 'light' || (!savedTheme && !systemPrefersDark)) {
setIsLightMode(true);
document.documentElement.classList.add('light');
}
}, []);
// Toggle theme and save preference
const toggleTheme = () => {
const newLightMode = !isLightMode;
setIsLightMode(newLightMode);
if (newLightMode) {
document.documentElement.classList.add('light');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.remove('light');
localStorage.setItem('theme', 'dark');
}
};
return (
<li className="theme-switcher inline">
<Link href="#" onClick={toggleTheme} className="block p-2">
<Image
src={isLightMode ? moonPic : sunPic}
alt={isLightMode ? 'Switch to dark mode' : 'Switch to light mode'}
width={32}
height={32}
className={`transition-all duration-300 ${isLightMode ? 'filter brightness-0 invert' : 'filter-none'}`}
/>
</Link>
</li>
);
}

6
components/header/toolbar.tsx
View File

@@ -1,6 +1,9 @@
'use client'; 'use client';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { ThemeSwitcher } from './theme-switcher';
import globePic from '../../public/globe.svg'; import globePic from '../../public/globe.svg';
import emailPic from '../../public/email.svg'; import emailPic from '../../public/email.svg';
import rssPic from '../../public/rss-feed.svg'; import rssPic from '../../public/rss-feed.svg';
@@ -11,12 +14,13 @@ import AnimatedLink from '../animatedLink';
export default function Toolbar() { export default function Toolbar() {
return ( return (
<div className="flex h-24 justify-between items-center border-white border-t border-b"> <div className="flex h-24 justify-between items-center border-white light:border-black border-t border-b">
<div className="flex items-baseline"> <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> <p><AnimatedLink href='#'>Science</AnimatedLink> | <AnimatedLink href='#'>Software</AnimatedLink> | <AnimatedLink href='#'>Hardware</AnimatedLink> | <AnimatedLink href='#'>Rockets</AnimatedLink> | <AnimatedLink href='#'>Startups</AnimatedLink></p>
</div> </div>
<div className="flex items-baseline"> <div className="flex items-baseline">
<ul className="inline-flex items-center gap-4"> <ul className="inline-flex items-center gap-4">
<ThemeSwitcher />
<li className="inline filter brightness-0 invert"> <li className="inline filter brightness-0 invert">
<Link href="#"> <Link href="#">
<Image <Image