From 5f4b2cf1d5a40e2b391a175e0728a30ed964dbdf Mon Sep 17 00:00:00 2001 From: AderKonstantin Date: Wed, 26 Mar 2025 20:58:40 +0300 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Implement=20theme=20switche?= =?UTF-8?q?r=20in=20header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- app/globals.css | 8 +++- app/layout.tsx | 7 +--- components/header/main.tsx | 58 ++++++++++++++-------------- components/header/theme-switcher.tsx | 50 ++++++++++++++++++++++++ components/header/toolbar.tsx | 6 ++- 5 files changed, 92 insertions(+), 37 deletions(-) create mode 100644 components/header/theme-switcher.tsx diff --git a/app/globals.css b/app/globals.css index 90a3c45..96cf646 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,6 +1,6 @@ @import "tailwindcss"; -:root { +/* :root { --background: #ffffff; --foreground: #171717; } @@ -10,10 +10,14 @@ --background: #0a0a0a; --foreground: #ededed; } -} +} */ body { color: var(--foreground); background: var(--background); font-family: "JetBrains Mono", monospace; } + +.light { + @apply bg-black text-white; +} diff --git a/app/layout.tsx b/app/layout.tsx index c0945a8..2ab1418 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -30,11 +30,8 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - - - + +
{children} diff --git a/components/header/main.tsx b/components/header/main.tsx index 978238d..cc277f6 100644 --- a/components/header/main.tsx +++ b/components/header/main.tsx @@ -8,34 +8,34 @@ import AnimatedLink from '../animatedLink'; import HeaderToolbar from "../header/toolbar"; export default function MainHeader() { - return ( -
-
-
    -
  • - - aderk.tech - -
    • + return ( +
    +
    +
      +
    • + + aderk.tech + +
      • -
    • - - search - -
      • -
    -
    -
    -

    - 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. -

    -
    - -
    - ); +
  • + + search + +
    • +
+
+
+

+ 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. +

+
+ +
+ ); } \ No newline at end of file diff --git a/components/header/theme-switcher.tsx b/components/header/theme-switcher.tsx new file mode 100644 index 0000000..da5be76 --- /dev/null +++ b/components/header/theme-switcher.tsx @@ -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 ( +
  • + + {isLightMode + +
    • + ); +} \ No newline at end of file diff --git a/components/header/toolbar.tsx b/components/header/toolbar.tsx index 4fb01cb..ea9077d 100644 --- a/components/header/toolbar.tsx +++ b/components/header/toolbar.tsx @@ -1,6 +1,9 @@ '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'; @@ -11,12 +14,13 @@ import AnimatedLink from '../animatedLink'; export default function Toolbar() { return ( -
    +

    Science | Software | Hardware | Rockets | Startups

      +