Customising dark theme

Light and dark colour modes come from the classic Docusaurus theme. With this template, you can change how the initial theme is chosen.

Template configuration

In docusaurus.config.js, under themeConfig, the only colorMode setting is:

docusaurus.config.js
colorMode: {
  respectPrefersColorScheme: true,
},

Everything else uses Docusaurus defaults:

Option	Template value	Meaning
`respectPrefersColorScheme`	`true`	On a first visit, follow the OS light/dark preference
`defaultMode`	`'light'`	Used only when system preference is not applied (for example if you set `respectPrefersColorScheme: false`)
`disableSwitch`	`false`	Theme toggle stays visible in the navbar

To keep the site in light mode only (no toggle, ignore OS dark preference), set all three options:

docusaurus.config.js
colorMode: {
  defaultMode: 'light',
  disableSwitch: true,
  respectPrefersColorScheme: false,
},

Option	Effect
`defaultMode: 'light'`	Use light mode
`disableSwitch: true`	Hide the navbar theme toggle
`respectPrefersColorScheme: false`	Do not follow the OS colour scheme

note

Turning off dark theme does not remove the need to check contrast for light mode. If you later re-enable dark mode, review graphics again.

When dark theme stays available, some images (dark logos, black icons, light-on-white diagrams) can disappear or look wrong on a dark background.

For theme-aware assets, like two files with ThemedImage, or one SVG using currentColor, see Using images in light and dark mode.