Customization

This guide covers everything you need to make Scholar uniquely yours — from colors and fonts to layout and animations.

Quick customization checklist

• Update src/config/site.ts with your brand details
• Adjust colors in src/config/theme.ts
• Replace example content in src/content/
• Update public/favicon.svg and public/og-image.svg
• Set production URL in astro.config.mjs

Color customization

Scholar uses CSS custom properties for theming. Edit the light and dark palettes in theme.ts, then mirror changes in src/styles/global.css under @theme and .dark.

Always verify contrast ratios in both modes. Aim for WCAG AA compliance (4.5:1 for body text).

Typography

Default fonts are Inter (sans-serif) and JetBrains Mono (code). To change fonts:

1. Install a new @fontsource-variable package
2. Import it in global.css
3. Update --font-sans and --font-mono in the @theme block

Component overrides

Components live in src/components/. Each is self-contained — modify styling via Tailwind classes without breaking other pages.

Disabling animations

Set features.animations and features.smoothScroll to false in site.ts for a fully static experience.

Support

For theme support, contact the author at info@noel.marketing (license holder). Demo content uses @example.com addresses.