80 lines
2.5 KiB
JavaScript
80 lines
2.5 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import "./i18n";
|
|
import Navbar from "./Components/Nav/Navbar";
|
|
import Home from "./Components/Sections/Home/Home";
|
|
import Services from "./Components/Sections/Services/Services";
|
|
import About from "./Components/Sections/About/About";
|
|
import Contact from "./Components/Sections/Contact/Contact";
|
|
import ImagePreloader from "./Components/ImagePreloader";
|
|
import Footer from "./Components/Nav/Footer";
|
|
import BackgroundCanvas from "./Components/BackgroundCanvas/BackgroundCanvas";
|
|
import "./App.css";
|
|
|
|
const App = () => {
|
|
const [theme, setTheme] = useState("light");
|
|
useEffect(() => {
|
|
console.log("Current theme:", theme);
|
|
console.log("HTML has dark class:", document.documentElement.classList.contains('dark'));
|
|
|
|
const canvas = document.querySelector('.background-canvas');
|
|
if (canvas) {
|
|
console.log("Canvas found:", canvas);
|
|
console.log("Canvas dimensions:", canvas.width, "x", canvas.height);
|
|
console.log("Canvas position:", canvas.style.position);
|
|
console.log("Canvas z-index:", canvas.style.zIndex);
|
|
} else {
|
|
console.log("Canvas NOT found!");
|
|
}
|
|
}, [theme]);
|
|
|
|
useEffect(() => {
|
|
const savedTheme = localStorage.getItem("theme");
|
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
|
|
if (savedTheme === "dark" || (!savedTheme && prefersDark)) {
|
|
setTheme("dark");
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
setTheme("light");
|
|
}
|
|
}, []);
|
|
|
|
const toggleTheme = () => {
|
|
const newTheme = theme === "light" ? "dark" : "light";
|
|
setTheme(newTheme);
|
|
|
|
if (newTheme === "dark") {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
|
|
localStorage.setItem("theme", newTheme);
|
|
};
|
|
|
|
return (
|
|
<ImagePreloader>
|
|
<div className="relative min-h-screen bg-transparent">
|
|
<BackgroundCanvas theme={theme} />
|
|
<div className="relative z-10">
|
|
<div className="min-h-screen bg-transparent">
|
|
<div className="flex flex-col min-h-screen">
|
|
<Navbar toggleTheme={toggleTheme} currentTheme={theme} />
|
|
<main className="flex-grow">
|
|
{/* <Home /> */}
|
|
<Services />
|
|
<About theme={theme} />
|
|
<Contact />
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ImagePreloader>
|
|
);
|
|
};
|
|
|
|
export default App; |