GauthierWebDev/memento-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update theme based on cookies consent

Browse Source
This commit is contained in:
Gauthier Daniels 2025-04-18 13:26:12 +02:00
parent 7c61d3afd6
commit 949843cf4e
2 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/layouts/LayoutDefault.tsx
View File

@ -75,11 +75,11 @@ function Header() {
} }
export default function DefaultLayout({ children }: { children: React.ReactNode }) { export default function DefaultLayout({ children }: { children: React.ReactNode }) {
const { urlPathname } = usePageContext(); const { urlPathname, cookies } = usePageContext();
const isHomePage = urlPathname === "/"; const isHomePage = urlPathname === "/";
return ( return (
<ThemeProvider> <ThemeProvider defaultTheme={cookies.theme}>
<div className="flex w-full flex-col font-sans"> <div className="flex w-full flex-col font-sans">
<Header /> <Header />

6
app/providers/ThemeProvider.tsx
View File

@ -1,4 +1,5 @@
import { ThemeContext, type Theme } from "@/contexts/ThemeContext"; import { ThemeContext, type Theme } from "@/contexts/ThemeContext";
import { usePageContext } from "vike-react/usePageContext";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
type ThemeProviderProps = { type ThemeProviderProps = {
@ -7,6 +8,7 @@ type ThemeProviderProps = {
}; };
export function ThemeProvider(props: ThemeProviderProps) { export function ThemeProvider(props: ThemeProviderProps) {
const { cookies } = usePageContext();
const [theme, setTheme] = useState<Theme>(props.defaultTheme || "light"); const [theme, setTheme] = useState<Theme>(props.defaultTheme || "light");
useEffect(() => { useEffect(() => {
@ -14,6 +16,10 @@ export function ThemeProvider(props: ThemeProviderProps) {
rootElement.classList.toggle("dark", theme === "dark"); rootElement.classList.toggle("dark", theme === "dark");
rootElement.classList.toggle("light", theme === "light"); rootElement.classList.toggle("light", theme === "light");
if (cookies.consent.customization) {
// TODO: update the theme in the cookies
}
}, [theme]); }, [theme]);
return <ThemeContext.Provider value={{ theme, setTheme }}>{props.children}</ThemeContext.Provider>; return <ThemeContext.Provider value={{ theme, setTheme }}>{props.children}</ThemeContext.Provider>;