Theme Customization Deep Dive

$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
);

@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";
  }
}

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