What Is Dark Mode?
Dark mode is a display setting that uses a dark (typically near-black) background with light-coloured text, replacing the traditional light background with dark text. Popularised by mobile operating systems and apps, dark mode is now an expected feature for many web applications and sites. Users can set their OS-level dark mode preference, which websites can detect and respect via the CSS `prefers-color-scheme` media query.
CSS prefers-color-scheme
`@media (prefers-color-scheme: dark)` detects the user's OS-level dark mode preference. Inside this media query, you redefine CSS custom properties (variables) for colours. Example: `:root { --bg: #fff; --text: #111; } @media (prefers-color-scheme: dark) { :root { --bg: #0d1117; --text: #e6edf3; } }`. Elements using `background: var(--bg)` and `color: var(--text)` then automatically switch.
Bootstrap 5 dark mode
Bootstrap 5.3 introduced official dark mode support via the `data-bs-theme='dark'` attribute on the `<html>` element. Adding this attribute switches all Bootstrap components to a dark colour palette. You can also implement per-component dark themes and mix light/dark sections. Canvas Builder generated HTML uses Bootstrap 5's dark mode system for sites requesting dark themes.
Dark mode design considerations
Don't simply invert colours — pure white (#fff) on pure black (#000) is harsh; use dark grey (#121212 or #0d1117) for backgrounds and off-white (#e6edf3) for text. Reduce image brightness in dark mode. Shadows need adjustment — dark UI shadows need to be lighter, not darker, to be visible. Check colour contrast ratios in dark mode — light-on-dark has different contrast dynamics than dark-on-light.
Dark Mode & Canvas Builder
Canvas Builder supports dark mode generation using Bootstrap 5.3's native dark mode system. Specify a dark theme in your prompt and receive dark-palette HTML using Canvas's dark-mode component variants.
Try Canvas Builder →