A modern website does not have to look exactly the same for everyone. Some visitors prefer a bright, traditional interface; others find a darker presentation more comfortable, particularly in the evening or in low-light surroundings. Offering both light and dark modes gives people more control over how they experience a website.
The most effective implementations usually begin by respecting the visitor’s device preference. Operating systems and browsers can tell a website whether the user has selected a light or dark appearance and the website can respond to this preference, allowing the site to adopt a suitable theme. This feature leads on from nearly three decades of colour-scheming for websites, using the principles of technology exhibited in the “CSS Zen Garden” to restyle the content based on the site owner’s or site visitor’s preference.
A website can also offer its own theme switcher. This is useful because a person may prefer dark mode on their phone but light mode on their desktop, or may want to override their operating-system setting for a particular website. The visitor’s choice is remembered, so that there is no need to unnecessarily switch modes on each visit.
Why people use dark mode
Dark mode is not simply a fashionable alternative colour scheme. Many people use it because it feels more comfortable, reduces the visual intensity of a bright screen or fits better into a dark environment. It can also be helpful for people who experience glare, light sensitivity, migraines or certain visual-processing difficulties.
Light mode remains valuable too. It often provides a familiar reading experience and can be particularly effective in bright surroundings. Some people (like me!) find dark interfaces harder to read, especially when text is thin, small or insufficiently contrasted.
The important principle is choice. There is no single colour scheme that is best for every person, device or situation. A well-designed theme system accommodates these differences without making either mode feel like an afterthought.
Accessibility as part of the design
Accessibility is not achieved merely by offering a dark background. Both themes need to be tested independently, because a colour combination that works in light mode may become unusable when its colours are inverted or adjusted for dark mode.
Accessibility also applies to more than text. Icons, form controls, borders, focus indicators, charts and other meaningful interface elements need to remain distinguishable. The Web Content Accessibility Guidelines include separate guidance for non-text contrast, while keyboard users need a clearly visible focus state in either theme.
Not just light text on a dark background
The complexity of dark and light mode becomes clear when looking beyond the main page background and body text. A website contains many visual relationships, and each one needs a deliberate colour choice.
For example, a theme may need separate colours for:
- the page background and content surfaces;
- primary, secondary and muted text;
- links and interactive controls;
- borders, separators and form-field outlines;
- buttons and their hover, active and disabled states;
- keyboard focus indicators;
- cards, panels, menus and overlays;
- success, warning, error and informational messages;
- highlights, selected text and search results;
- icons, illustrations and decorative details.
A light theme might use a white page background, a slightly grey card background and a subtle grey border. Simply changing the page background to near-black in dark mode may leave the cards too similar to the page, make the borders disappear or produce an unpleasantly stark contrast.
The same issue affects brand colours. A bright yellow button may work beautifully against a dark surface, but become too pale against a light one. A corporate blue may be suitable for large headings but fail as small body text. A muted grey that looks elegant in light mode may become almost invisible in dark mode.
This is why professional theme systems use semantic colour roles rather than scattering individual colour values throughout the code. Instead of thinking only in terms of “blue” or “grey”, the design defines roles such as --colour-background, --colour-surface, --colour-text-primary, --colour-text-muted, --colour-border and --colour-focus. Each role receives an appropriate value in light and dark mode.
This approach makes the system easier to maintain. Components can refer to the role they need, while the theme determines the actual colour. It also makes testing more systematic: every important combination can be checked in both themes, including hover, focus, disabled and error states.
Planning the company CI/CD
Dark and light mode should be planned as part of a company’s Corporate Identity and Corporate Design (CI/CD) rather than added as a technical feature later on in the project.
Brand guidelines usually define core colours, but a complete digital colour system needs more detail. It should document how colours are used for backgrounds, text, borders, links, buttons, notifications and states across both themes. It should also define which colours may be adjusted for accessibility while preserving the recognisable character of the brand.
This creates consistency across the website, applications, emails and other digital products. It helps designers make decisions more quickly, gives developers a reliable set of tokens to implement and makes future redesigns less disruptive.
Dark and light mode is therefore best understood as an extension of a thoughtful design system. When the principles, accessibility requirements and colour relationships are planned from the beginning, the result is a website that feels more flexible, more comfortable and more welcoming — while remaining recognisably part of the same brand.
Lead image by Arafat Gazi on Unsplash.
