ourworld_web/www_testAI
21
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update dark and light

Browse Source
This commit is contained in:
Ehab Hassan
2025-08-25 12:21:54 +03:00
parent 120c697c80
commit 672f69f7da
4 changed files with 37 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.jsx
View File

@@ -12,9 +12,9 @@ import './App.css';
function App() { function App() {
return ( return (
<Router basename={import.meta.env.VITE_APP_BASE_URL}> <Router basename={import.meta.env.VITE_APP_BASE_URL}>
<div className="dark min-h-screen bg-black text-white"> <div className="min-h-screen">
<Navigation /> <Navigation />
<main className="pt-20"> <main className="">
<Routes> <Routes>
<Route path="/" element={<Home />} /> <Route path="/" element={<Home />} />
<Route path="/host" element={<Host />} /> <Route path="/host" element={<Host />} />

2
src/components/HeroSection.jsx
View File

@@ -47,7 +47,7 @@ const HeroSection = ({
> >
{subtitle && ( {subtitle && (
<motion.p <motion.p
className="text-green-300 text-lg font-medium mb-4" className="text-blue-400 text-lg font-medium mb-4"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
transition={{ delay: 0.2, duration: 0.6 }} transition={{ delay: 0.2, duration: 0.6 }}

34
src/components/Navigation.jsx
View File

@@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import logo from '../assets/new_logo_tft.png'; // <-- replace with your logo path import logo from '../assets/new_logo_tft.png'; // <-- replace with your logo path
import { Sun, Moon } from 'lucide-react';
const Navigation = () => { const Navigation = () => {
const location = useLocation(); const location = useLocation();
@@ -15,6 +16,27 @@ const Navigation = () => {
return () => window.removeEventListener('scroll', handleScroll); 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 <html> element so CSS variables and body styles update
useEffect(() => {
const root = document.documentElement; // <html>
if (isDark) {
root.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
root.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
}, [isDark]);
const navItems = [ const navItems = [
{ path: '/', label: 'HOME' }, { path: '/', label: 'HOME' },
{ path: '/host', label: 'HOST' }, { path: '/host', label: 'HOST' },
@@ -36,11 +58,11 @@ const Navigation = () => {
src={logo} src={logo}
alt="ThreeFold Logo" alt="ThreeFold Logo"
className={`transition-all duration-300 ${ className={`transition-all duration-300 ${
isScrolled ? 'h-5' : 'h-6' isScrolled ? 'h-5' : 'h-5'
}`} }`}
/> />
</Link> </Link>
<div className="hidden md:flex space-x-8"> <div className="hidden md:flex items-center space-x-6">
{navItems.map((item) => ( {navItems.map((item) => (
<Link <Link
key={item.path} key={item.path}
@@ -54,6 +76,14 @@ const Navigation = () => {
{item.label} {item.label}
</Link> </Link>
))} ))}
<button
type="button"
aria-label="Toggle theme"
onClick={() => setIsDark((v) => !v)}
className="inline-flex items-center justify-center h-8 w-8 rounded-md border border-white/10 text-white/80 hover:text-white hover:border-white/20 transition-colors"
>
{isDark ? <Sun size={16} /> : <Moon size={16} />}
</button>
</div> </div>
</div> </div>
</div> </div>

3
src/pages/Home.jsx
View File

@@ -10,6 +10,7 @@ import matter from 'gray-matter';
// Import images // Import images
import threeFoldImage from '../assets/sphere.jpg'; // Digital network visualization 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 // 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 }); const homeModules = import.meta.glob('../content/home/*.md', { query: '?raw', import: 'default', eager: true });
@@ -82,7 +83,7 @@ const Home = () => {
showVideo={true} showVideo={true}
videoEmbed={ videoEmbed={
<video <video
src="/src/assets/bg_video.mp4" src={bgVideo}
autoPlay autoPlay
muted muted
loop loop