From 5fcfe1f9131085581198f09c616dd75cc8dc0f4a Mon Sep 17 00:00:00 2001
From: PHOENIX-05 <154254031+PAVANTEJ-05@users.noreply.github.com>
Date: Sun, 29 Dec 2024 19:14:55 +0530
Subject: [PATCH 1/4] Dark mode css added global-styles.tsx

---
 site/components/global-styles.tsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/site/components/global-styles.tsx b/site/components/global-styles.tsx
index 8da8e4d3f7..ca0bf918e0 100644
--- a/site/components/global-styles.tsx
+++ b/site/components/global-styles.tsx
@@ -3,6 +3,22 @@ import { ReactElement } from 'react'
 import { colors, draculaPrism } from '../util'
 
 const globalCss = css({
+    ':root': {
+    '--background-color': '#ffffff',
+    '--text-color': '#000000',
+    '--link-color': colors.pink,
+    '--link-hover-color': colors.hightlight,
+  },
+  '.dark': {
+    '--background-color': '#121212',
+    '--text-color': '#ffffff',
+    '--link-color': colors.pink, // Adjust if different in dark mode
+    '--link-hover-color': colors.hightlight, // Adjust if different in dark mode
+  },
+  body: {
+    backgroundColor: 'var(--background-color)',
+    color: 'var(--text-color)',
+  },
   a: {
     color: colors.pink,
     textDecoration: 'none'

From 320b39dac9396e51e2719d4961dc4c799913b8eb Mon Sep 17 00:00:00 2001
From: PHOENIX-05 <154254031+PAVANTEJ-05@users.noreply.github.com>
Date: Sun, 29 Dec 2024 19:22:02 +0530
Subject: [PATCH 2/4] Update site-header.tsx

dark mode feature added
---
 site/components/site-header.tsx | 38 +++++++++++++++++++++++++++------
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/site/components/site-header.tsx b/site/components/site-header.tsx
index b833c9f543..ca957381fa 100644
--- a/site/components/site-header.tsx
+++ b/site/components/site-header.tsx
@@ -4,6 +4,8 @@ import { colors, mediaQueries, styleConstants } from '../util'
 import { css } from '@emotion/react'
 import { useRouter } from 'next/router'
 import { Container } from './container'
+import {useState, useEffect} from'react'
+import { Moon, Sun } from 'lucide-react'
 
 export const animatedUnderline = css({
   '&::after': {
@@ -70,9 +72,8 @@ function UkraineBanner() {
           css={{
             fontWeight: 'bold',
             color: '#fff',
-            fontSize: 20,
-
-            [mediaQueries.mdUp]: {
+           fontSize: 20,
+           [mediaQueries.mdUp]: {
               fontSize: 28
             }
           }}
@@ -83,13 +84,26 @@ function UkraineBanner() {
     </a>
   )
 }
-
 export function SiteHeader() {
   const router = useRouter()
 
   const path = router.asPath
   const onCommunityPage = path === '/docs/community'
+  const [darkMode, setDarkMode] = useState(false);
+    useEffect(() => {
+    const isDark = localStorage.getItem('darkMode') === 'true';
+    setDarkMode(isDark);
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    }
+  }, []);
 
+  const toggleDarkMode = () => {
+    const newDarkMode = !darkMode;
+    setDarkMode(newDarkMode);
+    localStorage.setItem('darkMode', String(newDarkMode));
+    document.documentElement.classList.toggle('dark');
+  };
   return (
     <>
       <UkraineBanner />
@@ -100,7 +114,6 @@ export function SiteHeader() {
           boxShadow: '0 .125rem .25rem rgba(0, 0, 0, .075)',
           paddingTop: '0.25rem',
           marginBottom: '1.5rem',
-
           [mediaQueries.mdUp]: {
             marginBottom: '2.5rem'
           }
@@ -153,7 +166,6 @@ export function SiteHeader() {
             css={{
               marginLeft: 'auto',
               overflowX: 'auto',
-
               // For proper scrollbar placement on mobile. Note, mobile scrollbars
               // are pretty different between Safari and Chrome
               padding: '0.25rem 0'
@@ -170,6 +182,20 @@ export function SiteHeader() {
                 listStyle: 'none'
               }}
             >
+
+               <li>
+                <button
+                  onClick={toggleDarkMode}
+                  className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                  aria-label="Toggle dark mode"
+                >
+                  {darkMode ? (
+                    <Sun className="h-5 w-5 text-gray-700 dark:text-gray-200" />
+                  ) : (
+                    <Moon className="h-5 w-5 text-gray-700 dark:text-gray-200" />
+                  )}
+                </button>
+              </li>
               <li>
                 <HeaderLink
                   href="/docs"

From 89d929d2445619d9bfa9482d4c50360d1a4f53e0 Mon Sep 17 00:00:00 2001
From: PHOENIX-05 <154254031+PAVANTEJ-05@users.noreply.github.com>
Date: Sun, 29 Dec 2024 20:55:01 +0530
Subject: [PATCH 3/4] Update package.json

lucide-react installed
---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index ac464ba243..40ade1e23d 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "postinstall": "preconstruct dev && manypkg check",
     "changeset": "changeset",
     "version-packages": "changeset version && yarn --mode=\"update-lockfile\"",
+    "lucide-react": "^0.469.0",
     "release": "yarn build && changeset publish"
   },
   "author": "Kye Hohenberger",

From 58db57b3cc5e4beac5cac80ee890d800c2f24393 Mon Sep 17 00:00:00 2001
From: PHOENIX-05 <154254031+PAVANTEJ-05@users.noreply.github.com>
Date: Sun, 29 Dec 2024 21:03:29 +0530
Subject: [PATCH 4/4] Update site-header.tsx

---
 site/components/site-header.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/site/components/site-header.tsx b/site/components/site-header.tsx
index ca957381fa..8ec8bd36b1 100644
--- a/site/components/site-header.tsx
+++ b/site/components/site-header.tsx
@@ -72,8 +72,9 @@ function UkraineBanner() {
           css={{
             fontWeight: 'bold',
             color: '#fff',
-           fontSize: 20,
-           [mediaQueries.mdUp]: {
+            fontSize: 20,
+
+            [mediaQueries.mdUp]: {
               fontSize: 28
             }
           }}
@@ -84,6 +85,7 @@ function UkraineBanner() {
     </a>
   )
 }
+
 export function SiteHeader() {
   const router = useRouter()
 
@@ -114,6 +116,7 @@ export function SiteHeader() {
           boxShadow: '0 .125rem .25rem rgba(0, 0, 0, .075)',
           paddingTop: '0.25rem',
           marginBottom: '1.5rem',
+
           [mediaQueries.mdUp]: {
             marginBottom: '2.5rem'
           }
@@ -166,6 +169,7 @@ export function SiteHeader() {
             css={{
               marginLeft: 'auto',
               overflowX: 'auto',
+
               // For proper scrollbar placement on mobile. Note, mobile scrollbars
               // are pretty different between Safari and Chrome
               padding: '0.25rem 0'