Branding the portal

This topic guides you through setting up site identity: logos, favicon, link-preview image, brand colours, and footer copy.

Replacing logo files

The logo, social card, and favicon files are defined in docusaurus.config.js, and stored in static/img/.

Recommended file formats

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

1. Add your files under static/img/.
   You can keep the names or choose new ones.

2. Open docusaurus.config.js and update paths to the files:

   • Favicon (browser tab icon):

     docusaurus.config.js

     favicon: 'img/favicon.ico',

   • Social / Open Graph card (link previews):

     docusaurus.config.js

     themeConfig: {
       image: 'img/social-logo.jpg',
     },

   • Navbar logo and title:

     docusaurus.config.js

     navbar: {
       title: '3di Docusaurus Template',
       logo: {
         alt: '3di Docusaurus Template Logo',
         src: 'img/logo.svg',
       },
     },

     Update alt and navbar.title so they match the customer brand.

   • Footer logo:

     docusaurus.config.js

     footer: {
       logo: {
         alt: '3di',
         src: 'img/logo.svg',
         width: 40,
         height: 40,
       },
     },

     Update the footer logo alt text to match the customer brand.

Template logo files and their location

Function	Location
Browser tab icon	img/favicon.ico
Navbar logo	img/logo.svg
Footer logo	img/logo.svg
Social / Open Graph card	img/social-logo.jpg

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',
  },
},

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

Changing brand colours

The brand colours are defined 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;

For the detailed list of styles used in the template, see the Colour map reference below.

Colour map

Use this table when you need to swap colours without inspecting the whole stylesheet. Values are the template defaults today. Most brand accents follow --ifm-color-primary; change that first, then update the related --ifm-color-primary-* shades in the same block so hover and emphasis states stay in family.

Element	Light mode	Dark mode	Where to edit
Links, current sidebar page, list markers (1. • a.), doc page H1	#4f2683 (--ifm-color-primary)	#b38be4	custom.css → :root or [data-theme='dark']
Home hero banner background	Same primary (hero--primary)	Same primary (dark value)	--ifm-color-primary as above
Home tile icons and tile headings	Primary	Primary	--ifm-color-primary
Print / feedback-style primary buttons (hover uses a darker shade)	Primary / --ifm-color-primary-dark	Same variables	--ifm-color-primary and --ifm-color-primary-dark
Highlighted line behind code	rgba(79, 38, 131, 0.1)	rgba(179, 139, 228, 0.15)	--docusaurus-highlighted-code-line-bg in the same blocks
Body text and most headings (H2–H6)	#404040	White (--ifm-color-white)	--ifm-font-color-base, --ifm-heading-color, --ifm-color-content
Hero title on the home banner	#ffffff (forced white)	#ffffff	src/pages/index.module.css → .heroTitle
Footer bar background	#ffffff	Page background	.footer.footer--minimal (and its dark override)
Footer copyright text	#6b7280	Secondary grey	--ifm-footer-color under .footer.footer--minimal
Line above the footer	#d1d5db	Emphasis border	border-top / border-top-color on the footer rules
Back-to-top button	Brand purple PNG + purple shadow	Same asset, pale violet filter	src/theme/BackToTopButton/styles.module.css

Primary shade helpers in the same :root / dark blocks (--ifm-color-primary-dark through -lightest) are used by Infima for hover, focus, and related accents. When you change the main primary, update those shades to match the new brand.

For turning dark mode on or off, see Customising dark theme.

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 the dark mode, see Customising dark theme.

For editing the home page look and feel, see Home page.

Editing the 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.

Editing the footer layout

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

Footer themes

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

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.

Changing the footer logo size

1. Open src/theme/Footer/Layout/styles.module.css.
2. Find .logo :global(.footer__logo).
3. Edit width and max-width (both are 2.25rem in this template).
4. Optionally set matching width and height on footer.logo in docusaurus.config.js so the image attributes stay in line with the CSS size.
5. Refresh the site and check the footer.

Quick reference

Element	Location
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

For theme-aware images in topics, see Graphics.

Related topics

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