mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-18 13:52:51 +00:00
Max PeintnerandGitHub
434aeb275a
# Which Problems Are Solved This PR introduces a comprehensive theme customization system for the login application with responsive behavior and enhanced visual options. <img width="1122" height="578" alt="Screenshot 2025-08-19 at 09 55 24" src="https://github.com/user-attachments/assets/cdcc8948-533d-4e13-bf45-fdcc24acfb2b" /> # How the Problems Are Solved ## ✨ Features Added - **🔄 Responsive Layout System**: Automatic switching between side-by-side and top-to-bottom layouts based on screen size - **🖼️ Background Image Support**: Custom background images configurable via environment variables - **⚙️ Theme Configuration**: Complete theme system with roundness, spacing, appearance, and layout options - **📱 Mobile-First Design**: Intelligent layout adaptation for different screen sizes - **🎯 Enhanced Typography**: Improved visual hierarchy with larger titles in side-by-side mode ## 🏗️ Architecture - **Server-Safe Theme Functions**: Theme configuration accessible on both server and client - **SSR-Safe Hooks**: Proper hydration handling for responsive layouts - **Component Separation**: Clear boundaries between server and client components - **Two-Section Layout**: Consistent content structure across all login pages ## 🔧 Configuration Options All theme options are configurable via environment variables: - `NEXT_PUBLIC_THEME_ROUNDNESS`: `edgy` | `mid` | `full` - `NEXT_PUBLIC_THEME_LAYOUT`: `side-by-side` | `top-to-bottom` - `NEXT_PUBLIC_THEME_APPEARANCE`: `flat` | `material` - `NEXT_PUBLIC_THEME_SPACING`: `regular` | `compact` - `NEXT_PUBLIC_THEME_BACKGROUND_IMAGE`: Custom background image URL ## 📄 Pages Updated Updated all major login pages to use the new two-section responsive layout: - Login name entry - Password verification - MFA verification - User registration - Account selection - Device authorization - Logout confirmation ## 📚 Documentation - **THEME_ARCHITECTURE.md**: Complete technical documentation of the theme system - **THEME_CUSTOMIZATION.md**: User-friendly guide with examples and troubleshooting ## 🚀 Benefits - **Better UX**: Responsive design that works seamlessly across all devices - **Brand Flexibility**: Easy customization to match any brand identity - **Maintainable Code**: Clean separation of concerns and well-documented architecture - **Future-Proof**: Extensible system for additional theme options <img width="580" height="680" alt="Screenshot 2025-08-19 at 09 22 23" src="https://github.com/user-attachments/assets/9de8da37-6d56-4fe9-b337-5d8ad2a3ba59" /> <img width="599" height="689" alt="Screenshot 2025-08-19 at 09 23 45" src="https://github.com/user-attachments/assets/26a30cc7-4017-4f4b-8b87-a49466c42b94" /> <img width="595" height="681" alt="Screenshot 2025-08-19 at 09 23 17" src="https://github.com/user-attachments/assets/a3d31088-4545-4f36-aafe-1aae1253d677" />
76 lines
2.6 KiB
Bash
76 lines
2.6 KiB
Bash
# ==============================================
|
|
# 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
|