انتقل إلى المحتوى الرئيسي

Theme Customization Deep Dive

Advanced theme customization for the Gauzy Angular frontend.

Theme Architecture​

Gauzy uses Nebular as the UI framework with customizable themes.

Available Themes​

ThemeClass NameDescription
LightdefaultWhite/gray light UI
DarkdarkDark mode
CosmiccosmicBlue-purple dark
CorporatecorporateProfessional light

Custom Theme Variables​

$nb-themes: nb-register-theme(
  (
    // Brand colors
    color-primary-100: #f2f6ff,
    color-primary-500: #3366ff,
    color-primary-900: #002885,

    // Background
    background-basic-color-1: #ffffff,
    background-basic-color-2: #f7f9fc,

    // Text
    text-basic-color: #222b45,
    text-hint-color: #8f9bb3,

    // Fonts
    font-family-primary: "Inter, sans-serif",

    // Borders
    border-radius: 0.5rem,

    // Sidebar
    sidebar-width: 16rem,
    sidebar-background-color: #f7f9fc
  ),
  default,
  default
);

Dynamic Theme Switching​

@Injectable()
export class ThemeService {
  constructor(private themeService: NbThemeService) {}

  switchTheme(themeName: string) {
    this.themeService.changeTheme(themeName);
    localStorage.setItem("theme", themeName);
  }

  getCurrentTheme(): string {
    return localStorage.getItem("theme") || "default";
  }
}

CSS Custom Properties​

Override CSS variables for quick styling:

:root {
  --primary-color: #3366ff;
  --sidebar-bg: #f7f9fc;
  --card-border-radius: 8px;
}

Custom Logo & Branding​

Replace the logo in:

  • apps/gauzy/src/assets/images/logos/
  • Configure in Settings → Organization → Logo