Skip to content

Commit 946019c

Browse files
Shikhar97Shikhar97
committed
Fixed theme issue
1 parent 2a227fe commit 946019c

File tree

4 files changed

+38
-28
lines changed

4 files changed

+38
-28
lines changed

‎src/app/layout.tsx

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,24 @@
1+
'use client';
12
import "../styles/global.css";
23
import "../styles/reset.css";
34
import { GoogleAnalytics } from "@next/third-parties/google";
45
import { ThemeProvider } from "@/context/ThemeContext";
5-
import { Metadata } from "next";
66
import { DARK_COLORS, LIGHT_COLORS } from "theme";
77
import Script from "next/script";
8+
import Header from "@/components/Header";
9+
import Footer from "@/components/Footer";
10+
import Splash from "@/components/Splash";
11+
import React from "react";
12+
813

9-
export const metadata: Metadata = {
10-
title: "Shikhar Gupta | Software Developer | Cloud Engineer | ML Engineer",
11-
description:
12-
"Shikhar Gupta is a Computer Science Graduate Student at Arizona State University, who loves learning new things.",
13-
openGraph: {
14-
type: "website",
15-
locale: "en_US",
16-
url: "https://shikhar97.github.io/",
17-
title: "Shikhar Gupta | Software Developer | Cloud Engineer | ML Engineer",
18-
images: ["https://ogcdn.net/e4b8c678-7bd5-445d-ba03-bfaad510c686/v3/shikhar97.github.io/Shikhar%20Gupta%20%7C%20Computer%20Science%20Graduate%20Student%20%7C%20Software%20Developer%20%7C%20Cloud%20Engineer%20%7C%20ML%20Engineer/https%3A%2F%2Fopengraph.b-cdn.net%2Fproduction%2Fdocuments%2F4c58f7e1-8524-4c7b-a5c3-305cdb16dc61.jpg%3Ftoken%3D2dK5g8ViJZYACO--guzL6sOi3xKQpg77X0m6yX6NzSo%26height%3D513%26width%3D1200%26expires%3D33244548259/og.png"],
19-
},
20-
};
2114

2215
function RootLayout({children}: { children: React.ReactNode }) {
23-
const theme = "light";
24-
const themeColors = theme === "light" ? LIGHT_COLORS: DARK_COLORS;
16+
const theme = localStorage.getItem("color-theme") ?? "dark";
17+
const themeColors = theme === "light" ? LIGHT_COLORS : DARK_COLORS;
18+
const showSplash = localStorage.getItem("show-splash") !== "false";
19+
React.useEffect(() => {
20+
localStorage.setItem("show-splash", "false");
21+
})
2522

2623
return (
2724
<html
@@ -36,10 +33,15 @@ function RootLayout({children}: { children: React.ReactNode }) {
3633
<head>
3734
<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.css" rel="stylesheet"/>
3835
<Script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></Script>
39-
<title></title>
36+
<title>Shikhar Gupta | Software Developer | Cloud Engineer | ML Engineer</title>
4037
</head>
4138
<body suppressHydrationWarning={true}>
42-
<ThemeProvider initialTheme={theme}>{children}</ThemeProvider>
39+
<ThemeProvider initialTheme={theme}>
40+
<Header initialTheme={theme} />
41+
{children}
42+
<Footer />
43+
</ThemeProvider>
44+
{showSplash && <Splash/>}
4345
</body>
4446
</html>
4547
);

‎src/app/page.tsx

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,22 @@
11
import Home from "@/components/Home";
2+
import {Metadata} from "next";
3+
4+
5+
export const metadata: Metadata = {
6+
title: "Shikhar Gupta | Software Developer | Cloud Engineer | ML Engineer",
7+
description:
8+
"Shikhar Gupta is a Computer Science Graduate Student at Arizona State University, who loves learning new things.",
9+
openGraph: {
10+
type: "website",
11+
locale: "en_US",
12+
url: "https://shikhar97.github.io/",
13+
title: "Shikhar Gupta | Software Developer | Cloud Engineer | ML Engineer",
14+
images: ["https://ogcdn.net/e4b8c678-7bd5-445d-ba03-bfaad510c686/v3/shikhar97.github.io/Shikhar%20Gupta%20%7C%20Computer%20Science%20Graduate%20Student%20%7C%20Software%20Developer%20%7C%20Cloud%20Engineer%20%7C%20ML%20Engineer/https%3A%2F%2Fopengraph.b-cdn.net%2Fproduction%2Fdocuments%2F4c58f7e1-8524-4c7b-a5c3-305cdb16dc61.jpg%3Ftoken%3D2dK5g8ViJZYACO--guzL6sOi3xKQpg77X0m6yX6NzSo%26height%3D513%26width%3D1200%26expires%3D33244548259/og.png"],
15+
},
16+
};
217

318
const HomePage = () => {
4-
return <Home initialTheme={"light"}/>;
19+
return <Home/>;
520
};
621

722
export default HomePage;

‎src/components/Home/Home.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,19 @@ import Dots from "@/components/Dots";
44
import Education from "@/components/Education";
55
import Email from "@/components/Email";
66
import Experiences from "@/components/Experiences";
7-
import Footer from "@/components/Footer";
8-
import Header from "@/components/Header";
97
import Hero from "@/components/Hero";
108
import Projects from "@/components/Projects";
119
import Socials from "@/components/Socials";
12-
import Splash from "@/components/Splash";
1310
import Technical from "@/components/Technical";
1411
import styles from "./Home.module.css";
1512

16-
const App = ({ initialTheme }: { initialTheme: string }) => {
13+
const App = () => {
1714

1815
return (
1916
<>
2017
<Socials/>
2118
<Email/>
2219
<div className={styles.grid}>
23-
<Header initialTheme={initialTheme}/>
2420
<Dots>
2521
<Hero/>
2622
</Dots>
@@ -30,9 +26,7 @@ const App = ({ initialTheme }: { initialTheme: string }) => {
3026
<Technical/>
3127
<Education/>
3228
<Contact/>
33-
<Footer/>
3429
</div>
35-
<Splash/>
3630
</>
3731
);
3832
};

‎src/components/ThemeToggle/ThemeToggle.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,8 @@ const ThemeToggle = ({ children, initialTheme, ...delegated }: Props) => {
2020
setThemeContext(nextTheme);
2121

2222
// 2 — Update the cookie, for the user's next visit
23-
Cookie.set("color-theme", nextTheme, {
24-
expires: 1000,
25-
});
23+
localStorage.setItem("color-theme", nextTheme);
24+
localStorage.setItem("show-splash", "true");
2625

2726
// 3 — Update the DOM to present the new colors
2827
const root = document.documentElement;

0 commit comments

Comments
 (0)