TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 14:42:17 +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>;
};

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

@@ -43,11 +43,18 @@ 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) {
export function setTheme(document: any, policy?: LabelPolicyColors) {
const lP = {
backgroundColor: BACKGROUND,
backgroundColorDark: DARK_BACKGROUND,
@@ -74,24 +81,23 @@ export class ColorService {
lP.linkColorDark = policy.fontColorDark;
}
this.dark = computeMap(lP, true);
this.light = computeMap(lP, false);
const dark = computeMap(lP, true);
const light = computeMap(lP, false);
setColors(this.dark.background, "background", "dark", document);
setColors(this.light.background, "background", "light", document);
setColors(dark.background, "background", "dark", document);
setColors(light.background, "background", "light", document);
setColors(this.dark.primary, "primary", "dark", document);
setColors(this.light.primary, "primary", "light", document);
setColors(dark.primary, "primary", "dark", document);
setColors(light.primary, "primary", "light", document);
setColors(this.dark.text, "primary", "dark", document);
setColors(this.light.text, "primary", "light", document);
setColors(dark.text, "primary", "dark", document);
setColors(light.text, "primary", "light", document);
setColors(this.dark.link, "link", "dark", document);
setColors(this.light.link, "link", "light", document);
setColors(dark.link, "link", "dark", document);
setColors(light.link, "link", "light", document);
setColors(this.dark.warn, "warn", "dark", document);
setColors(this.light.warn, "warn", "light", document);
}
setColors(dark.warn, "warn", "dark", document);
setColors(light.warn, "warn", "light", document);
}
function setColors(map: Color[], type: string, theme: string, document: any) {

76
pnpm-lock.yaml generated
View File

@@ -41,7 +41,7 @@ importers:
grpc-tools: 1.11.3
lint-staged: 13.0.3
make-dir-cli: 3.0.0
next: 13.3.1-canary.13
next: 13.3.2-canary.2
next-themes: ^0.2.1
nice-grpc: 2.0.1
postcss: 8.4.21
@@ -65,8 +65,8 @@ importers:
'@zitadel/server': link:../../packages/zitadel-server
clsx: 1.2.1
date-fns: 2.29.3
next: 13.3.1-canary.13_q2l6mupuna4bhqrj53otrbdm2a
next-themes: 0.2.1_amhwfk4ri4rspyzmqtvcofnhfa
next: 13.3.2-canary.2_q2l6mupuna4bhqrj53otrbdm2a
next-themes: 0.2.1_fbdiuaz6irj67j3n36ky3t2nbi
nice-grpc: 2.0.1
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
@@ -1963,8 +1963,8 @@ packages:
resolution: {integrity: sha512-FN50r/E+b8wuqyRjmGaqvqNDuWBWYWQiigfZ50KnSFH0f+AMQQyaZl+Zm2+CIpKk0fL9QxhLxOpTVA3xFHgFow==}
dev: false
/@next/env/13.3.1-canary.13:
resolution: {integrity: sha512-Zuwdo2KfGQPw0nTizy6yzj/LgtWl5FcDJJ80gJ/1WHJl9ANkuSsmru6EGUoBVkd481A/dfNP60355zfJjqq3Rg==}
/@next/env/13.3.2-canary.2:
resolution: {integrity: sha512-/NqWjXLGlNpGkxPAXR8TDWT6ZYsYGwWNfwhpPhtyMtUOU78wwWiT5p/smGd/+h/PFaIeLjrjtqiA7hHqrw0u0A==}
dev: false
/@next/eslint-plugin-next/13.3.0:
@@ -2000,8 +2000,8 @@ packages:
dev: false
optional: true
/@next/swc-darwin-arm64/13.3.1-canary.13:
resolution: {integrity: sha512-lwy+zhJnUevo2JxydLUywB3ZWDdQgGGOc5ZWJNxsoef8FVJ3PX8zvZYCWDsD5sGE1BViqjMsbIx/uf4TqaZOhg==}
/@next/swc-darwin-arm64/13.3.2-canary.2:
resolution: {integrity: sha512-HdqGogdJAF88hzmVLhSXu/msxlkv2MP395natN1MmGxjqfTNGLSJewWmPf4vdOBIP54lDc6Nap/b2joYWOrCDw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [darwin]
@@ -2018,8 +2018,8 @@ packages:
dev: false
optional: true
/@next/swc-darwin-x64/13.3.1-canary.13:
resolution: {integrity: sha512-JvwWrWF4Uqm4qEWLQV5Qt96kW1hmlV+8rjJTTOWll6ebCQz9c7/Exv4kCOz0mBkENYRmQlz3Pgd5ZWaooR4ptQ==}
/@next/swc-darwin-x64/13.3.2-canary.2:
resolution: {integrity: sha512-u9LPNpaRXjKi6WPDqhrXEYW3UJxyf3J2mva8fmb3CGZHR8BrkItRDcn7VDgSZ0jTHRHpCGqYXlPE+z6+bVYdeg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [darwin]
@@ -2054,8 +2054,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-arm64-gnu/13.3.1-canary.13:
resolution: {integrity: sha512-OGHPDSjQw4Sqhzgl/fdgZMPPmCj0CJiqIMudyzrBqV9z59vyreIMBzi6sWsC2I5u8EP0Q2+qUFC5AJ4xqyFMZA==}
/@next/swc-linux-arm64-gnu/13.3.2-canary.2:
resolution: {integrity: sha512-e/aUm7RZoDcvLHrK7sTiRMX3cS+1LVlN2gUKV9PYrrXGftuQGkIwJyZPUm4nsJUX7ozNWXPU50YeHPvt9K0c2Q==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -2072,8 +2072,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-arm64-musl/13.3.1-canary.13:
resolution: {integrity: sha512-mvPIWB1WLpyCzZOPgHEPkEtZEdyW6U9VHN8HTmyzybqZx/Lo4AWHobXlujWflBTyHQOu3ft9kfS4TAhdB9XFyg==}
/@next/swc-linux-arm64-musl/13.3.2-canary.2:
resolution: {integrity: sha512-wDvtL9LcN0pSao+M/A3qSYVHvPcyH1H9d0v7aIbwd6F/JuTIlTeXgKuxVCYY5OBNC6dXbzOyGSREZ8hLCx9Wjw==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [linux]
@@ -2090,8 +2090,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-x64-gnu/13.3.1-canary.13:
resolution: {integrity: sha512-hTHNN3n94qQcx0YK6bS2/nw99OSZZa/v7s56OOzCfQpYAz2546wiCOoEcOxQy/1Mum23i2Lt3u6km96GyHrD0Q==}
/@next/swc-linux-x64-gnu/13.3.2-canary.2:
resolution: {integrity: sha512-Z/GTeCcD6YK92rBdrAa5GVLC9TzXkXpGKnlDLJLm/2oY1eBRTVpQT5/vp0vrRcPYjdHXubizquk1Q3eyAtlKTg==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -2108,8 +2108,8 @@ packages:
dev: false
optional: true
/@next/swc-linux-x64-musl/13.3.1-canary.13:
resolution: {integrity: sha512-SW3YdJfJzlin5hp9zMU4HHKKhARq9ojQ1tjUSsgfPtMTG3Gon7dswK/Ap5aguPvqJQK42YaPg7zPr91Ez4piGw==}
/@next/swc-linux-x64-musl/13.3.2-canary.2:
resolution: {integrity: sha512-P0KCzP17aoxfq3k+rtgDhOl8BILdgw3pw8w88/qD5WA2xK2R9Rg4lRI6pAQSro0++ToNDgnrXpRuJov7n1OfeQ==}
engines: {node: '>= 10'}
cpu: [x64]
os: [linux]
@@ -2126,8 +2126,8 @@ packages:
dev: false
optional: true
/@next/swc-win32-arm64-msvc/13.3.1-canary.13:
resolution: {integrity: sha512-SHb96TxxtQXJ87DbZVC22mS2jcQfKeDVcrSB5G972JRK/QaUnRrIn/Fr4/OMVgz8wkMDYyJwhVMNPZ1d7FzlQg==}
/@next/swc-win32-arm64-msvc/13.3.2-canary.2:
resolution: {integrity: sha512-yGpQpU0To4gp/bjhwKHqu3zVJ/Jco+g4Okv95IWnbYUX7sd14kophZGwHiZN4dLErB9Pdd4vvmz8ccJP5h+Ubg==}
engines: {node: '>= 10'}
cpu: [arm64]
os: [win32]
@@ -2144,8 +2144,8 @@ packages:
dev: false
optional: true
/@next/swc-win32-ia32-msvc/13.3.1-canary.13:
resolution: {integrity: sha512-+TM2In/8yh6Ze4ADs9HKSg2mIjzB7SLz9i/8VUCY3SdVMKpKCtMHYzlo5BkIOSmtW0QsGVEY38+6WLOpf8lXhQ==}
/@next/swc-win32-ia32-msvc/13.3.2-canary.2:
resolution: {integrity: sha512-iHtddC48Xdl7RxCdhBWZ6+1hq/eC0duTR4y3yYPELpXpZnIwGjOT5W5N+3nVRXUVLsj6teRf8fEfWBp3WbJ0RQ==}
engines: {node: '>= 10'}
cpu: [ia32]
os: [win32]
@@ -2162,8 +2162,8 @@ packages:
dev: false
optional: true
/@next/swc-win32-x64-msvc/13.3.1-canary.13:
resolution: {integrity: sha512-IFnEsOJIvaC/MytzEsTaWcILy2lzuwFi0aAq0NturKFRH/ykjOnLHd98jBz5D8eCPX9QN2oyB57D6i1wbIAJHA==}
/@next/swc-win32-x64-msvc/13.3.2-canary.2:
resolution: {integrity: sha512-Ctw3gL8cBMvREpJM09xvC+pPKsG8TVSWxsQPTLvD33qFED0gtU9HSIacJ09eXd8mqtRGebcXaNjY9fVFfGHZ3A==}
engines: {node: '>= 10'}
cpu: [x64]
os: [win32]
@@ -5015,14 +5015,14 @@ packages:
/natural-compare/1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
/next-themes/0.2.1_amhwfk4ri4rspyzmqtvcofnhfa:
/next-themes/0.2.1_fbdiuaz6irj67j3n36ky3t2nbi:
resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
peerDependencies:
next: '*'
react: '*'
react-dom: '*'
dependencies:
next: 13.3.1-canary.13_q2l6mupuna4bhqrj53otrbdm2a
next: 13.3.2-canary.2_q2l6mupuna4bhqrj53otrbdm2a
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
dev: false
@@ -5074,9 +5074,9 @@ packages:
- babel-plugin-macros
dev: false
/next/13.3.1-canary.13_q2l6mupuna4bhqrj53otrbdm2a:
resolution: {integrity: sha512-nqLvbeAbJiVFWHzfvUM6D5L/nwjUD7+fc0FWPdJc/jLbInKNqQQHc4+0NKNi8tj6Af9cn4MBPrrg/lyMbf0hVA==}
engines: {node: '>=14.6.0'}
/next/13.3.2-canary.2_q2l6mupuna4bhqrj53otrbdm2a:
resolution: {integrity: sha512-tAJBdhzzQxzomn2Ge3lR3zCVPBnPSfXy6+fTQTDtZHDQe/pH9xJgnMpwvA8kBYEr5yrCcJn0U3kxeo32LRJUjw==}
engines: {node: '>=14.18.0'}
hasBin: true
peerDependencies:
'@opentelemetry/api': ^1.1.0
@@ -5095,7 +5095,7 @@ packages:
sass:
optional: true
dependencies:
'@next/env': 13.3.1-canary.13
'@next/env': 13.3.2-canary.2
'@swc/helpers': 0.5.0
busboy: 1.6.0
caniuse-lite: 1.0.30001473
@@ -5105,15 +5105,15 @@ packages:
sass: 1.62.0
styled-jsx: 5.1.1_duavcg6prxxl5begav3y2fyxcu
optionalDependencies:
'@next/swc-darwin-arm64': 13.3.1-canary.13
'@next/swc-darwin-x64': 13.3.1-canary.13
'@next/swc-linux-arm64-gnu': 13.3.1-canary.13
'@next/swc-linux-arm64-musl': 13.3.1-canary.13
'@next/swc-linux-x64-gnu': 13.3.1-canary.13
'@next/swc-linux-x64-musl': 13.3.1-canary.13
'@next/swc-win32-arm64-msvc': 13.3.1-canary.13
'@next/swc-win32-ia32-msvc': 13.3.1-canary.13
'@next/swc-win32-x64-msvc': 13.3.1-canary.13
'@next/swc-darwin-arm64': 13.3.2-canary.2
'@next/swc-darwin-x64': 13.3.2-canary.2
'@next/swc-linux-arm64-gnu': 13.3.2-canary.2
'@next/swc-linux-arm64-musl': 13.3.2-canary.2
'@next/swc-linux-x64-gnu': 13.3.2-canary.2
'@next/swc-linux-x64-musl': 13.3.2-canary.2
'@next/swc-win32-arm64-msvc': 13.3.2-canary.2
'@next/swc-win32-ia32-msvc': 13.3.2-canary.2
'@next/swc-win32-x64-msvc': 13.3.2-canary.2
transitivePeerDependencies:
- '@babel/core'
- babel-plugin-macros