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

      +