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

Merge pull request #8 from AderKonstantin/theme-switcher

Browse Source 
Theme switcher
This commit is contained in:
AderKonstantin
2025-04-01 19:40:42 +03:00
committed by GitHub
parent ccb5978831 17271c1e52
commit 80ed9c8978
6 changed files with 5 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/blogpost/layout.tsx
View File

@@ -1,15 +1,8 @@
import "../globals.css"; import "../globals.css";
import Link from "next/link";
import AnimatedLink from "@/components/animatedLink";
import Image from "next/image";
import MainHeader from "@/components/header/main";
import MainFooter from "@/components/footer/main";
export default function RootLayout({ children }: { children: React.ReactNode }) { export default function RootLayout({ children }: { children: React.ReactNode }) {
return ( return (
<div className="text-base"> <div className="m-auto text-base 2xl:w-4xl xl:w-3xl md:w-full">
{children} {children}
</div> </div>
); );

4
app/globals.css
View File

@@ -15,9 +15,9 @@
body { body {
color: var(--foreground); color: var(--foreground);
background: var(--background); background: var(--background);
font-family: "JetBrains Mono", monospace; font-family: "Open Sans", sans-serif;
} }
.light { .dark {
@apply bg-black text-white; @apply bg-black text-white;
} }

4
app/layout.tsx
View File

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

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

@@ -1,50 +0,0 @@
'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>
);
}

4
components/header/toolbar.tsx
View File

@@ -2,12 +2,9 @@
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';
import supportPic from '../../public/support.svg';
import settingsPic from '../../public/settings.svg'; import settingsPic from '../../public/settings.svg';
import AnimatedLink from '../animatedLink'; import AnimatedLink from '../animatedLink';
@@ -20,7 +17,6 @@ export default function Toolbar() {
</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

1
public/support.svg
View File

@@ -1 +0,0 @@
<svg fill="none" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g fill="#000"><path d="m7.824 5.937a1 1 0 0 0 .726-.312 2.042 2.042 0 0 1 2.835-.065 1 1 0 0 0 1.388-1.441 3.994 3.994 0 0 0 -5.674.13 1 1 0 0 0 .725 1.688z"/><path d="m17 7a7 7 0 1 0 -14 0 3 3 0 0 0 -3 3v2a3 3 0 0 0 3 3h1a1 1 0 0 0 1-1v-7a5 5 0 1 1 10 0v7.083a2.92 2.92 0 0 1 -2.917 2.917h-.083a2 2 0 0 0 -2-2h-1a2 2 0 0 0 -2 2v1a2 2 0 0 0 2 2h1a1.993 1.993 0 0 0 1.722-1h.361a4.92 4.92 0 0 0 4.824-4h.093a3 3 0 0 0 3-3v-2a3 3 0 0 0 -3-3z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 525 B