Logo

The theme displays a logo in the site header of every documentation site.

Available Logo Assets

The theme ships two logo files in the assets/ directory:

File	Format	Description
assets/f5-logo.svg	SVG	F5 logo in Cloud Red (#e4002b)
assets/github-avatar.png	PNG	GitHub organization avatar (default)

Default Logo

The default logo is set in the createF5xcDocsConfig factory in config.ts:

const logo = options.logo || { src: '@f5xc-salesdemos/docs-theme/assets/github-avatar.png' };

If no logo option is provided, the GitHub avatar PNG is used. The path is an npm package specifier resolved through the exports map in package.json.

Replacing the Logo

Option 1: Use the F5 SVG logo

Pass the logo option to createF5xcDocsConfig:

import { createF5xcDocsConfig } from '@f5xc-salesdemos/docs-theme/config';

export default createF5xcDocsConfig({
  logo: { src: '@f5xc-salesdemos/docs-theme/assets/f5-logo.svg' },
});

Option 2: Use a custom logo

Place your logo file in the content repo and reference it:

import { createF5xcDocsConfig } from '@f5xc-salesdemos/docs-theme/config';

export default createF5xcDocsConfig({
  logo: { src: './src/assets/my-logo.svg' },
});

Option 3: Separate light and dark logos

Starlight supports separate logos for light and dark mode:

import { createF5xcDocsConfig } from '@f5xc-salesdemos/docs-theme/config';

export default createF5xcDocsConfig({
  logo: {
    light: './src/assets/logo-light.svg',
    dark: './src/assets/logo-dark.svg',
  },
});

Guidelines

• Use SVG format — raster images (PNG, JPG) will work but won’t scale cleanly at all sizes
• Include a viewBox — ensures the logo scales proportionally (e.g., viewBox="0 0 100 100")
• Keep file size small — the logo loads on every page; aim for under 10 KB
• Test in both themes — verify the logo looks correct in both light and dark mode