typescript/.env.theme.example at main · zitadel/typescript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# ==============================================
# ZITADEL LOGIN THEME CONFIGURATION
# ==============================================
# This file contains all available theme options for customizing the login experience.
# Copy the variables you want to customize to your .env.local file.

# Theme Roundness Options
# ----------------------
# Controls the border radius of UI elements
# Options: "edgy" | "mid" | "full"
# - edgy: Sharp corners (rounded-none)
# - mid: Medium rounded corners (rounded-lg)
# - full: Fully rounded corners (rounded-full)
NEXT_PUBLIC_THEME_ROUNDNESS=mid

# Layout Options
# --------------
# Controls the overall layout structure
# Options: "side-by-side" | "top-to-bottom"
# - side-by-side: Brand section on left, form on right (desktop)
# - top-to-bottom: Brand section on top, form below
NEXT_PUBLIC_THEME_LAYOUT=side-by-side

# Spacing Options
# ---------------
# Controls spacing and padding throughout the interface
# Options: "regular" | "compact"
# - regular: Standard spacing with comfortable padding (p-6, space-y-6)
# - compact: Tighter spacing for information-dense layouts (p-4, space-y-4)
NEXT_PUBLIC_THEME_SPACING=regular

# Appearance Options
# ------------------
# Complete design philosophies
# Options: "flat" | "material"
# - flat: Minimal flat design with cards matching background color, subtle borders, and normal typography
# - material: Material Design inspired with elevated cards, proper contrast, and medium typography
NEXT_PUBLIC_THEME_APPEARANCE=flat

# Background Image
# ---------------
# Path to a background image (optional)
# Can be a relative path from /public or an absolute URL
# Example: NEXT_PUBLIC_THEME_BACKGROUND_IMAGE=/images/login-bg.jpg
# NEXT_PUBLIC_THEME_BACKGROUND_IMAGE=

# ==============================================
# EXAMPLE COMBINATIONS
# ==============================================

# Modern Tech Startup
# NEXT_PUBLIC_THEME_ROUNDNESS=full
# NEXT_PUBLIC_THEME_LAYOUT=side-by-side
# NEXT_PUBLIC_THEME_SPACING=regular
# NEXT_PUBLIC_THEME_APPEARANCE=material
# NEXT_PUBLIC_THEME_BACKGROUND_IMAGE=/images/tech-bg.jpg

# Corporate Banking
# NEXT_PUBLIC_THEME_ROUNDNESS=edgy
# NEXT_PUBLIC_THEME_LAYOUT=top-to-bottom
# NEXT_PUBLIC_THEME_SPACING=regular
# NEXT_PUBLIC_THEME_APPEARANCE=material

# Minimal SaaS
# NEXT_PUBLIC_THEME_ROUNDNESS=mid
# NEXT_PUBLIC_THEME_LAYOUT=side-by-side
# NEXT_PUBLIC_THEME_SPACING=compact
# NEXT_PUBLIC_THEME_APPEARANCE=flat

# Creative Agency
# NEXT_PUBLIC_THEME_ROUNDNESS=full
# NEXT_PUBLIC_THEME_LAYOUT=top-to-bottom
# NEXT_PUBLIC_THEME_SPACING=regular
# NEXT_PUBLIC_THEME_APPEARANCE=material
# NEXT_PUBLIC_THEME_BACKGROUND_IMAGE=/images/creative-bg.jpg