Fixed an issue where the screen flickers when reloading the page.
- Add theme detection based on cookies across layouts
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user