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

- Add theme detection based on cookies across layouts
This commit is contained in:
2025-04-06 18:26:48 +02:00
parent f581783abf
commit c9eb4e3c42
3 changed files with 37 additions and 22 deletions

View File

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

View File

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

View File

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