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

single exec of theme setter

Browse Source
This commit is contained in:
Max Peintner
2023-04-24 16:30:21 +02:00
parent fd11a78bc2
commit 186fa17fe2
7 changed files with 117 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ import { Analytics } from "@vercel/analytics/react";
import ThemeWrapper from "#/ui/ThemeWrapper";
import { getBranding } from "#/lib/zitadel";
import { server } from "../lib/zitadel";
import { LabelPolicyColors } from "#/utils/colors";
const lato = Lato({
weight: "400",
@@ -22,19 +23,32 @@ export default async function RootLayout({
children: React.ReactNode;
}) {
const branding = await getBranding(server);
let partialPolicy: LabelPolicyColors | undefined;
if (branding) {
partialPolicy = {
backgroundColor: branding?.backgroundColor,
backgroundColorDark: branding?.backgroundColorDark,
primaryColor: branding?.primaryColor,
primaryColorDark: branding?.primaryColorDark,
warnColor: branding?.warnColor,
warnColorDark: branding?.warnColorDark,
fontColor: branding?.fontColor,
fontColorDark: branding?.fontColorDark,
};
}
return (
<html lang="en" className={`${lato.className}`} suppressHydrationWarning>
<head />
<body>
<ThemeWrapper branding={branding}>
<ThemeWrapper branding={partialPolicy}>
<LayoutProviders>
<div className="overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600 bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
<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')]">
<GlobalNav />
<div className="lg:pl-72">
<div className="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8">
<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-600">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
<AddressBar />
</div>
</div>
@@ -46,7 +60,7 @@ export default async function RootLayout({
</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">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-600">
<div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
<Byline />
</div>
</div>

2
apps/login/package.json
View File

@@ -26,7 +26,7 @@
"@zitadel/server": "workspace:*",
"clsx": "1.2.1",
"date-fns": "2.29.3",
"next": "13.3.1-canary.13",
"next": "13.3.2-canary.2",
"next-themes": "^0.2.1",
"nice-grpc": "2.0.1",
"react": "18.2.0",

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

@@ -1,8 +1,6 @@
"use client";
import { ColorService } from "#/utils/colors";
import { ThemeProvider, useTheme } from "next-themes";
import { useEffect } from "react";
type Props = {
children: React.ReactNode;
@@ -12,9 +10,10 @@ export function LayoutProviders({ children }: Props) {
const { resolvedTheme } = useTheme();
const isDark = resolvedTheme && resolvedTheme === "dark";
useEffect(() => {
new ColorService(document);
});
// useEffect(() => {
// console.log("layoutproviders useeffect");
// setTheme(document);
// });
return (
<ThemeProvider

2
apps/login/ui/Theme.tsx
View File

@@ -27,7 +27,7 @@ export default function Theme() {
className={`${
isDark
? "!bg-gray-800 dark:bg-background-dark-400"
: "!bg-gray-100 dark:bg-background-dark-400"
: "!bg-gray-200 dark:bg-background-dark-400"
}
relative inline-flex h-4 w-9 items-center rounded-full`}
>

21
apps/login/ui/ThemeWrapper.tsx
View File

@@ -1,35 +1,20 @@
"use client";
import { LabelPolicy } from "#/../../packages/zitadel-server/dist";
import { ColorService } from "#/utils/colors";
import { setTheme, LabelPolicyColors } from "#/utils/colors";
import { useEffect } from "react";
type Props = {
branding: LabelPolicy | undefined;
branding: LabelPolicyColors | undefined;
children: React.ReactNode;
};
const ThemeWrapper = ({ children, branding }: Props) => {
useEffect(() => {
const colorService = new ColorService(document, branding);
setTheme(document, branding);
}, []);
const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600";
// console.log(branding);
// useEffect(() => {
// if (branding) {
// document.documentElement.style.setProperty(
// "--background-color",
// branding?.backgroundColor
// );
// document.documentElement.style.setProperty(
// "--dark-background-color",
// branding?.backgroundColorDark
// );
// }
// }, []);
return <div className={defaultClasses}>{children}</div>;
};

98
apps/login/utils/colors.ts
View File

@@ -43,55 +43,61 @@ export const BACKGROUND = "#fafafa";
export const DARK_TEXT = "#ffffff";
export const TEXT = "#000000";
export class ColorService {
dark: ColorMap;
light: ColorMap;
export type LabelPolicyColors = {
backgroundColor: string;
backgroundColorDark: string;
fontColor: string;
fontColorDark: string;
warnColor: string;
warnColorDark: string;
primaryColor: string;
primaryColorDark: string;
};
constructor(document: any, policy?: LabelPolicy) {
const lP = {
backgroundColor: BACKGROUND,
backgroundColorDark: DARK_BACKGROUND,
primaryColor: PRIMARY,
primaryColorDark: DARK_PRIMARY,
warnColor: WARN,
warnColorDark: DARK_WARN,
fontColor: TEXT,
fontColorDark: DARK_TEXT,
linkColor: TEXT,
linkColorDark: DARK_TEXT,
};
export function setTheme(document: any, policy?: LabelPolicyColors) {
const lP = {
backgroundColor: BACKGROUND,
backgroundColorDark: DARK_BACKGROUND,
primaryColor: PRIMARY,
primaryColorDark: DARK_PRIMARY,
warnColor: WARN,
warnColorDark: DARK_WARN,
fontColor: TEXT,
fontColorDark: DARK_TEXT,
linkColor: TEXT,
linkColorDark: DARK_TEXT,
};
if (policy) {
lP.backgroundColor = policy.backgroundColor;
lP.backgroundColorDark = policy.backgroundColorDark;
lP.primaryColor = policy.primaryColor;
lP.primaryColorDark = policy.primaryColorDark;
lP.warnColor = policy.warnColor;
lP.warnColorDark = policy.warnColorDark;
lP.fontColor = policy.fontColor;
lP.fontColorDark = policy.fontColorDark;
lP.linkColor = policy.fontColor;
lP.linkColorDark = policy.fontColorDark;
}
this.dark = computeMap(lP, true);
this.light = computeMap(lP, false);
setColors(this.dark.background, "background", "dark", document);
setColors(this.light.background, "background", "light", document);
setColors(this.dark.primary, "primary", "dark", document);
setColors(this.light.primary, "primary", "light", document);
setColors(this.dark.text, "primary", "dark", document);
setColors(this.light.text, "primary", "light", document);
setColors(this.dark.link, "link", "dark", document);
setColors(this.light.link, "link", "light", document);
setColors(this.dark.warn, "warn", "dark", document);
setColors(this.light.warn, "warn", "light", document);
if (policy) {
lP.backgroundColor = policy.backgroundColor;
lP.backgroundColorDark = policy.backgroundColorDark;
lP.primaryColor = policy.primaryColor;
lP.primaryColorDark = policy.primaryColorDark;
lP.warnColor = policy.warnColor;
lP.warnColorDark = policy.warnColorDark;
lP.fontColor = policy.fontColor;
lP.fontColorDark = policy.fontColorDark;
lP.linkColor = policy.fontColor;
lP.linkColorDark = policy.fontColorDark;
}
const dark = computeMap(lP, true);
const light = computeMap(lP, false);
setColors(dark.background, "background", "dark", document);
setColors(light.background, "background", "light", document);
setColors(dark.primary, "primary", "dark", document);
setColors(light.primary, "primary", "light", document);
setColors(dark.text, "primary", "dark", document);
setColors(light.text, "primary", "light", document);
setColors(dark.link, "link", "dark", document);
setColors(light.link, "link", "light", document);
setColors(dark.warn, "warn", "dark", document);
setColors(light.warn, "warn", "light", document);
}
function setColors(map: Color[], type: string, theme: string, document: any) {