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() {
return (
<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 />
<main className="pt-20">
<main className="">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/host" element={<Host />} />

2
src/components/HeroSection.jsx
View File

@@ -47,7 +47,7 @@ const HeroSection = ({
>
{subtitle && (
<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 }}
animate={{ opacity: 1 }}
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 { Link, useLocation } from 'react-router-dom';
import logo from '../assets/new_logo_tft.png'; // <-- replace with your logo path
import { Sun, Moon } from 'lucide-react';
const Navigation = () => {
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 <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 = [
{ 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'
}`}
/>
</Link>
<div className="hidden md:flex space-x-8">
<div className="hidden md:flex items-center space-x-6">
{navItems.map((item) => (
<Link
key={item.path}
@@ -54,6 +76,14 @@ const Navigation = () => {
{item.label}
</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>

3
src/pages/Home.jsx
View File

@@ -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={
<video
src="/src/assets/bg_video.mp4"
src={bgVideo}
autoPlay
muted
loop