Web Design & UX

Dark Mode

Quick Definition

Dark mode is a UI variant with dark background and light text, typically toggled via user preference or system setting.

In context

Now expected on modern sites. Implement with CSS custom properties (variables) and the prefers-color-scheme media query. Test contrast ratios in both modes — they require different colour decisions.

Have a question this didn't answer?

Book a free 60-minute strategy call. We'll explain how this concept applies to your specific situation.

Book a Free Call Browse 50+ Detailed Answers

Related terms

Responsive Design

Responsive design means a single website adapts its layout to any screen size — phone, tablet, desktop — using fluid grids and CSS media queries.

Static Site

A static site serves pre-built HTML files rather than generating pages dynamically per request.

Touch Target Size

Touch target size is the clickable / tappable area of an interactive element — for accessibility and mobile usability, recommended minimum is 48×48 CSS pixels with at least 8 pixels separation from adjacent targets.

Design System

A design system is a comprehensive set of design standards, components, patterns, and guidelines that govern a brand's digital products.

UI (User Interface)

UI is the visual layer of a product — buttons, layouts, typography, colour, and interactive elements that users see and interact with.

Mockup

A mockup is a high-fidelity visual representation of a page, showing colours, typography, imagery, and final design — but not interactive.

Back to all terms