Branding the portal

Use this topic when you set up site identity: logos, favicon, link-preview image, brand colours, and footer copy.

Asset or setting	Where it lives
Image files	static/img/ (URLs start with /img/…)
Favicon, logos, social card paths	docusaurus.config.js
Brand colours and footer bar colours	src/css/custom.css
Footer layout (copyright left, logo right)	src/theme/Footer/Layout/
Site version in the copyright line	package.json → version

For light/dark behaviour and turning dark mode off, see Customising dark theme. For theme-aware images in topics, see Graphics.

Replace logo files

Place graphics under static/img/. This template points several places at the same logo file.

Occurrence	Config / file	Current path
Browser tab icon	favicon in docusaurus.config.js	img/favicon.ico
Navbar logo	themeConfig.navbar.logo.src	img/logo.svg
Footer logo	themeConfig.footer.logo.src	img/logo.svg
Social / Open Graph card	themeConfig.image	img/social-logo.jpg

1. Add your files under static/img/ (keep names or choose new ones).
2. Open docusaurus.config.js and point each setting at the matching file:

docusaurus.config.js

favicon: 'img/favicon.ico',

themeConfig: {
  image: 'img/social-logo.jpg',
  navbar: {
    title: '3di Docusaurus Template',
    logo: {
      alt: '3di Docusaurus Template Logo',
      src: 'img/logo.svg',
    },
  },
  footer: {
    logo: {
      alt: '3di',
      src: 'img/logo.svg',
      width: 40,
      height: 40,
    },
  },
},

3. Update alt text to match the customer brand.
4. Update navbar.title so the text beside the navbar logo matches the product name.

Prefer PNG or JPG for themeConfig.image (link previews and social cards). SVG works well for navbar and footer logos.

Logos in dark theme

When dark mode stays on, add a light-on-dark logo file (for example img/logo-dark.svg) and set srcDark on the navbar logo:

docusaurus.config.js

navbar: {
  logo: {
    alt: 'Product logo',
    src: 'img/logo.svg',
    srcDark: 'img/logo-dark.svg',
  },
},

The footer logo uses src only in this template. Use a single footer graphic that reads on both light and dark bars, or adapt the footer CSS under Footer colours so contrast stays clear.

Change brand colours

Brand accents live in src/css/custom.css.

Light mode

1. Open src/css/custom.css.
2. Edit the :root primary scale:

src/css/custom.css

:root {
  --ifm-color-primary: #4f2683;
  --ifm-color-primary-dark: #482277;
  --ifm-color-primary-darker: #411f6b;
  --ifm-color-primary-darkest: #351957;
  --ifm-color-primary-light: #5e2d9a;
  --ifm-color-primary-lighter: #6a32ae;
  --ifm-color-primary-lightest: #7e41c8;
}

Those variables drive links, the home hero banner, sidebar current-page colour, list markers, doc H1 colour, tile icons, and other Infima primary accents.

Body and heading text in light mode use:

src/css/custom.css

--ifm-font-color-base: #404040;
--ifm-heading-color: #404040;
--ifm-color-content: #404040;

Dark mode

1. In the same file, edit the [data-theme='dark'] block:

src/css/custom.css

[data-theme='dark'] {
  --ifm-color-primary: #b38be4;
  --ifm-color-primary-dark: #a373de;
  --ifm-color-primary-darker: #9862da;
  --ifm-color-primary-darkest: #8545d3;
  --ifm-color-primary-light: #c1a0e9;
  --ifm-color-primary-lighter: #ccb1ed;
  --ifm-color-primary-lightest: #dfcdf3;
}

2. Check the site with the navbar theme toggle after you change colours.

For enabling or disabling dark mode itself, follow Customising dark theme.

Edit footer text

Footer copyright comes from themeConfig.footer.copyright in docusaurus.config.js. The template injects the package version from package.json:

docusaurus.config.js

footer: {
  style: 'light',
  logo: { /* … */ },
  copyright: `© 3di · 3di Docusaurus Template · ${siteVersion}`,
},

1. Edit the copyright string (company name, product name, year wording).
2. Keep ${siteVersion} if you want the version from package.json to stay in sync automatically.
3. To change the displayed version number, update version in package.json.

footer.style is 'light' in this template. The minimal footer look is driven mainly by CSS (next section), not by switching to 'dark'.

Footer colours

The footer uses a swizzled layout with the class footer--minimal. Colours and padding are CSS variables on that class in src/css/custom.css:

src/css/custom.css

.footer.footer--minimal {
  --ifm-footer-background-color: #ffffff;
  --ifm-footer-color: #6b7280;
  --ifm-footer-padding-vertical: 1.5rem;
  --ifm-footer-padding-horizontal: 0;
  /* … */
  border-top: 1px solid #d1d5db;
}

Variable / property	What it controls
--ifm-footer-background-color	Footer bar background
--ifm-footer-color	Copyright text colour
--ifm-footer-padding-vertical	Top and bottom padding
--ifm-footer-padding-horizontal	Side padding
border-top	Line above the footer

Dark theme overrides sit in the same file:

src/css/custom.css

[data-theme='dark'] .footer.footer--minimal {
  --ifm-footer-background-color: var(--ifm-background-color);
  --ifm-footer-color: var(--ifm-color-secondary-darkest);
  border-top-color: var(--ifm-color-emphasis-300);
}

1. Adjust the light values under .footer.footer--minimal.
2. Adjust the dark values under [data-theme='dark'] .footer.footer--minimal.
3. Refresh and check both colour modes.

Footer logo size is capped in src/theme/Footer/Layout/styles.module.css (.logo :global(.footer__logo)). Change width / max-width there if the graphic needs more room; footer.logo.width / height in config also feed the image attributes.

Quick reference

Goal	Where
Favicon	docusaurus.config.js → favicon + file in static/img/
Navbar logo and title	themeConfig.navbar
Footer logo	themeConfig.footer.logo
Social card	themeConfig.image
Copyright text	themeConfig.footer.copyright
Version in copyright	package.json → version
Brand primary (light)	custom.css → :root
Brand primary (dark)	custom.css → [data-theme='dark']
Footer bar colours	custom.css → .footer.footer--minimal
Home hero title / tiles	Customising the home page
Dark mode on/off	Customising dark theme

Related topics

• Customising the home page
• Customising dark theme
• Graphics
• Customising the template