Theme Changes

Author: AttAditya

src/components/Navbar/index.jsx

@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Hamburger } from "lucide-react";
 
 import "./style.css";
 
 export function Navbar() {
   const [active, setActive] = useState(false);
+  const [navTop, setNavTop] = useState(true);
 
   const links = [
     {
@@ -41,8 +42,28 @@ export function Navbar() {
     },
   ];
 
+  useEffect(() => {
+    const handleScroll = () => {
+      const rootElement = document.getElementById("root");
+      setNavTop(rootElement.scrollTop === 0);
+    };
+    
+    const rootElement = document.getElementById("root");
+    rootElement.addEventListener("scroll", handleScroll);
+    handleScroll();
+    
+    return () => {
+      rootElement.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (<>
-    <div className="navbar">
+    <div
+      className={[
+        "navbar",
+        navTop ? "nav-top" : "",
+      ].join(" ")}
+    >
       <div
         onClick={() => setActive(!active)}
         className={[

src/components/Navbar/style.css

@@ -31,12 +31,13 @@
   opacity: 0.3;
 }
 
+.nav-top .nav-links,
 .nav-links:hover {
   opacity: 1;
 }
 
 .nav-link {
-  color: white;
+  color: var(--color-gradient);
   text-decoration: none;
   cursor: pointer;
   position: relative;
@@ -52,7 +53,7 @@
   display: block;
   width: 0.125rem;
   height: 1rem;
-  background: white;
+  background: var(--color-gradient);
   transition: width 0.3s ease-in-out;
 }
 

src/components/Section/style.css

@@ -36,6 +36,7 @@
 
 .section-name {
   background: var(--gradient);
+  color: var(--color-gradient);
   display: flex;
   padding: 1rem 2rem;
   border-radius: 1rem;
@@ -48,7 +49,7 @@
 .section-description {
   font-size: 1.5rem;
   text-align: left;
-  color: var(--text-secondary);
+  color: var(--color-text);
   line-height: 1.5;
   font-weight: 200;
   display: flex;

src/styles/index.css

@@ -8,7 +8,7 @@
   box-sizing: border-box;
   cursor: inherit;
   background: transparent;
-  color: var(--color-white);
+  color: var(--color-text);
   user-select: none;
   -webkit-user-select: none;
   transition:
@@ -36,8 +36,9 @@ html, body, #root {
   height: 100%;
   cursor: default;
   background-color: var(--color-background);
-  color: var(--color-white);
+  color: var(--color-text);
   overflow-y: auto;
+  transition: none;
   font-family:
     "Lexend",
     "JetBrains Mono",

src/styles/variables.css

@@ -11,7 +11,9 @@
   --color-success: #4CAF50;
   --color-warning: #FF9800;
 
-  --color-background: #111111;
+  --color-background: #E0E0E0;
+  --color-text: #111111;
+  --color-gradient: #FFFFFF;
 
   --gradient: linear-gradient(
     to bottom right,