From 672f69f7da2e12b39d3fe396ef516fe6b88abbb0 Mon Sep 17 00:00:00 2001 From: ehab-hassan Date: Mon, 25 Aug 2025 12:21:54 +0300 Subject: [PATCH] update dark and light --- src/App.jsx | 4 ++-- src/components/HeroSection.jsx | 2 +- src/components/Navigation.jsx | 34 ++++++++++++++++++++++++++++++++-- src/pages/Home.jsx | 3 ++- 4 files changed, 37 insertions(+), 6 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 6aa3f08..5c5c07b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,9 +12,9 @@ import './App.css'; function App() { return ( -
+
-
+
} /> } /> diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx index 33a59a4..bbcb55f 100644 --- a/src/components/HeroSection.jsx +++ b/src/components/HeroSection.jsx @@ -47,7 +47,7 @@ const HeroSection = ({ > {subtitle && ( { const location = useLocation(); @@ -15,6 +16,27 @@ const Navigation = () => { return () => window.removeEventListener('scroll', handleScroll); }, []); + // Theme toggle state + const [isDark, setIsDark] = useState(() => { + if (typeof window === 'undefined') return true; + const stored = localStorage.getItem('theme'); + if (stored === 'light') return false; + if (stored === 'dark') return true; + return true; + }); + + // Apply theme to the element so CSS variables and body styles update + useEffect(() => { + const root = document.documentElement; // + if (isDark) { + root.classList.add('dark'); + localStorage.setItem('theme', 'dark'); + } else { + root.classList.remove('dark'); + localStorage.setItem('theme', 'light'); + } + }, [isDark]); + const navItems = [ { path: '/', label: 'HOME' }, { path: '/host', label: 'HOST' }, @@ -36,11 +58,11 @@ const Navigation = () => { src={logo} alt="ThreeFold Logo" className={`transition-all duration-300 ${ - isScrolled ? 'h-5' : 'h-6' + isScrolled ? 'h-5' : 'h-5' }`} /> -
+
{navItems.map((item) => ( { {item.label} ))} +
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 2d5d260..300184e 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -10,6 +10,7 @@ import matter from 'gray-matter'; // Import images import threeFoldImage from '../assets/sphere.jpg'; // Digital network visualization +import bgVideo from '../assets/bg_video.mp4'; // Use Vite's import.meta.glob to import all home content markdown files and images const homeModules = import.meta.glob('../content/home/*.md', { query: '?raw', import: 'default', eager: true }); @@ -82,7 +83,7 @@ const Home = () => { showVideo={true} videoEmbed={