Gitlab-Migration/rhein-sw-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed an issue where the screen flickers when reloading the page.

Browse Source 
- Add theme detection based on cookies across layouts
This commit is contained in:
Thatsaphorn
2025-04-06 18:26:48 +02:00
parent f581783abf
commit c9eb4e3c42
3 changed files with 37 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/(root)/layout.tsx
View File

@@ -5,20 +5,25 @@ import Nav from "@/components/Navbar/Nav";
import Footer from "@/components/Home/Footer/Footer"; import Footer from "@/components/Home/Footer/Footer";
import {ThemeProvider} from "@/components/provider/ThemeProvider"; import {ThemeProvider} from "@/components/provider/ThemeProvider";
import React from "react"; import React from "react";
import {cookies} from "next/headers";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Rhein Software", title: "Rhein Software",
description: "Rhein Software Development", description: "Rhein Software Development",
}; };
export default function RootLayout({ export default async function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const cookieStore = await cookies();
const theme = cookieStore.get("theme")?.value === "dark" ? "dark" : "light";
return ( return (
<html lang="de"> <html lang="de" data-theme={theme}>
<body className={'${font.className} antialiased'} style={{backgroundColor: "var(--primary-bg)"}}> <head/>
<body className="antialiased" style={{backgroundColor: "var(--primary-bg)"}}>
<ThemeProvider> <ThemeProvider>
<Nav/> <Nav/>
{children} {children}

17
app/contact/layout.tsx
View File

@@ -1,24 +1,29 @@
import type {Metadata} from "next"; import type {Metadata} from "next";
import '../(root)/globals.css'; import "../(root)/globals.css";
import Nav from "@/components/Navbar/Nav"; import Nav from "@/components/Navbar/Nav";
import Footer from "@/components/Home/Footer/Footer"; import Footer from "@/components/Home/Footer/Footer";
import {ThemeProvider} from "@/components/provider/ThemeProvider"; import {ThemeProvider} from "@/components/provider/ThemeProvider";
import React from "react"; import React from "react";
import {cookies} from "next/headers";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Rhein Software", title: "Rhein Software",
description: "Rhein Software Development", description: "Rhein Software Development",
}; };
export default function RootLayout({ export default async function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const cookieStore = await cookies();
const theme = cookieStore.get("theme")?.value === "dark" ? "dark" : "light";
return ( return (
<html lang="de"> <html lang="de" data-theme={theme}>
<body className={'${font.className} antialiased'} style={{backgroundColor: "var(--primary-bg)"}}> <head/>
<body className="antialiased" style={{backgroundColor: "var(--primary-bg)"}}>
<ThemeProvider> <ThemeProvider>
<Nav/> <Nav/>
{children} {children}

27
app/legal/layout.tsx
View File

@@ -1,29 +1,34 @@
import type {Metadata} from "next"; import type {Metadata} from "next";
import '../(root)/globals.css'; import "../(root)/globals.css";
import Nav from "@/components/Navbar/Nav"; import Nav from "@/components/Navbar/Nav";
import Footer from "@/components/Home/Footer/Footer"; import Footer from "@/components/Home/Footer/Footer";
import {ThemeProvider} from "@/components/provider/ThemeProvider"; import {ThemeProvider} from "@/components/provider/ThemeProvider";
import React from "react"; import React from "react";
import {cookies} from "next/headers";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Rhein Software", title: "Rhein Software",
description: "Rhein Software Development", description: "Rhein Software Development",
}; };
export default function RootLayout({ export default async function RootLayout({
children, children,
}: Readonly<{ }: Readonly<{
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
const cookieStore = await cookies();
const theme = cookieStore.get("theme")?.value === "dark" ? "dark" : "light";
return ( return (
<html lang="de"> <html lang="de" data-theme={theme}>
<body className={'${font.className} antialiased'} style={{backgroundColor: "var(--primary-bg)"}}> <head/>
<ThemeProvider> <body className="antialiased" style={{backgroundColor: "var(--primary-bg)"}}>
<Nav/> <ThemeProvider>
{children} <Nav/>
<Footer/> {children}
</ThemeProvider> <Footer/>
</ThemeProvider>
</body> </body>
</html> </html>
); );