diff --git a/apps/login/app/layout.tsx b/apps/login/app/layout.tsx index b79fa8bf54b..39d9dbde523 100644 --- a/apps/login/app/layout.tsx +++ b/apps/login/app/layout.tsx @@ -9,23 +9,25 @@ import { LayoutProviders } from "#/ui/LayoutProviders"; import { Analytics } from "@vercel/analytics/react"; import { ZitadelUIProvider } from "#/../../packages/zitadel-react/dist"; import ThemeWrapper from "#/ui/ThemeWrapper"; +import { getBranding } from "#/lib/zitadel"; +import { server } from "../lib/zitadel"; const lato = Lato({ weight: "400", subsets: ["latin"], }); -export default function RootLayout({ +export default async function RootLayout({ children, }: { children: React.ReactNode; }) { + const branding = await getBranding(server); return ( - {/* @ts-expect-error Server Component */} - +
diff --git a/apps/login/styles/globals.css b/apps/login/styles/globals.css index bbcde40e0f9..c94e8298d3f 100755 --- a/apps/login/styles/globals.css +++ b/apps/login/styles/globals.css @@ -12,3 +12,16 @@ @apply text-sm; } } + +html { + --background-color: #ffffff; + --dark-background-color: #000000; +} + +.bg-background-light-600 { + background-color: var(--background-color); +} + +.dark .dark\:bg-background-dark-600 { + background-color: var(--dark-background-color) !important; +} diff --git a/apps/login/ui/ThemeWrapper.tsx b/apps/login/ui/ThemeWrapper.tsx index 6104a6d4d70..d736534ae17 100644 --- a/apps/login/ui/ThemeWrapper.tsx +++ b/apps/login/ui/ThemeWrapper.tsx @@ -1,36 +1,39 @@ -import { getBranding } from "#/lib/zitadel"; -import { server } from "../lib/zitadel"; +"use client"; -const ThemeWrapper = async ({ children }: any) => { - console.log("hehe"); +import { LabelPolicy } from "#/../../packages/zitadel-server/dist"; +import { useEffect } from "react"; +type Props = { + branding: LabelPolicy | undefined; + children: React.ReactNode; +}; + +const ThemeWrapper = ({ children, branding }: Props) => { const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600"; - try { - const policy = await getBranding(server); + console.log(branding); + useEffect(() => { + if (branding) { + document.documentElement.style.setProperty( + "--background-color", + branding?.backgroundColor + ); + document.documentElement.style.setProperty( + "--dark-background-color", + branding?.backgroundColorDark + ); + } + }, []); - const darkStyles = { - backgroundColor: `${policy?.backgroundColorDark}`, - color: `${policy?.fontColorDark}`, - }; - - const lightStyles = { - backgroundColor: `${policy?.backgroundColor}`, - color: `${policy?.fontColor}`, - }; - - console.log(policy); - - return ( -
- {children} -
- ); - } catch (error) { - console.error(error); - - return
{children}
; - } + return ( +
+ {children} + {/* */} +
+ ); }; export default ThemeWrapper;