TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 10:25:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix theme provider

Browse Source
This commit is contained in:
peintnermax
2023-07-28 09:21:07 +02:00
parent f69d922bc1
commit c17a2bad87
4 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
apps/login/app/layout.tsx
View File

@@ -8,6 +8,7 @@ import ThemeWrapper from "#/ui/ThemeWrapper";
import { getBrandingSettings } from "#/lib/zitadel";
import { server } from "../lib/zitadel";
import { BrandingSettings } from "@zitadel/server";
import ThemeProvider from "#/ui/ThemeProvider";
const lato = Lato({
weight: ["400", "700", "900"],
@@ -41,29 +42,31 @@ export default async function RootLayout({
<head />
<body>
<ThemeWrapper branding={partial}>
<LayoutProviders>
<div className="h-screen overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
{showNav && <GlobalNav />}
<ThemeProvider>
<LayoutProviders>
<div className="h-screen overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
{showNav && <GlobalNav />}
<div className={`${showNav ? "lg:pl-72" : ""} pb-4`}>
<div className="mx-auto max-w-[440px] space-y-8 pt-20 lg:py-8">
{showNav && (
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
<AddressBar domain={domain} />
<div className={`${showNav ? "lg:pl-72" : ""} pb-4`}>
<div className="mx-auto max-w-[440px] space-y-8 pt-20 lg:py-8">
{showNav && (
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
<AddressBar domain={domain} />
</div>
</div>
</div>
)}
)}
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20 mb-10">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 px-8 py-12">
{children}
<div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20 mb-10">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 px-8 py-12">
{children}
</div>
</div>
</div>
</div>
</div>
</div>
</LayoutProviders>
</LayoutProviders>
</ThemeProvider>
</ThemeWrapper>
<Analytics />
</body>

17
apps/login/ui/LayoutProviders.tsx
View File

@@ -1,5 +1,5 @@
"use client";
import { ZitadelReactProvider } from "@zitadel/react";
import { ThemeProvider, useTheme } from "next-themes";
type Props = {
@@ -7,8 +7,8 @@ type Props = {
};
export function LayoutProviders({ children }: Props) {
// const { resolvedTheme } = useTheme();
const isDark = false; //resolvedTheme && resolvedTheme === "dark";
const { resolvedTheme } = useTheme();
const isDark = resolvedTheme && resolvedTheme === "dark";
// useEffect(() => {
// console.log("layoutproviders useeffect");
@@ -16,13 +16,8 @@ export function LayoutProviders({ children }: Props) {
// });
return (
<ThemeProvider
attribute="class"
defaultTheme="system"
storageKey="cp-theme"
value={{ dark: "dark" }}
>
<div className={`${isDark ? "ui-dark" : "ui-light"} `}>{children}</div>
</ThemeProvider>
<div className={`${isDark ? "ui-dark" : "ui-light"} `}>
<ZitadelReactProvider dark={isDark}>{children}</ZitadelReactProvider>
</div>
);
}

4
apps/login/ui/SignInWithIDP.tsx
View File

@@ -34,8 +34,8 @@ export function SignInWithIDP({ identityProviders }: SignInWithIDPProps) {
},
body: JSON.stringify({
idpId: idp.id,
successUrl: `${host}/api/idp/success`,
failureUrl: `${host}/api/idp/success`,
successUrl: `${host}`,
failureUrl: `${host}`,
}),
});

16
apps/login/ui/ThemeProvider.tsx Normal file
View File

@@ -0,0 +1,16 @@
"use client";
import { ThemeProvider as ThemeP } from "next-themes";
import { ReactNode } from "react";
export default function ThemeProvider({ children }: { children: ReactNode }) {
return (
<ThemeP
attribute="class"
defaultTheme="system"
storageKey="cp-theme"
value={{ dark: "dark" }}
>
{children}
</ThemeP>
);
}