CSS Dark Mode

Dark mode is increasingly popular in web design because it reduces eye strain and gives websites a modern look. With CSS, we can implement light and dark themes either automatically or manually.

Automatic dark mode with media query

The <prefers-color-scheme> media query allows the page to automatically switch between light and dark mode based on the user’s system settings.

This example shows how dark mode can be applied automatically according to the user’s operating system settings.

Manual dark mode with classes

In addition to automatic switching, manual solutions are also possible, where JavaScript is used to add or remove classes on the body element.

In this example, light and dark mode can be toggled manually with CSS classes.

Tips for using dark mode

When implementing dark mode, ensure that content remains readable and meets accessibility standards.

• Always check the contrast between text and background.
• Provide users with the option for manual switching.
• Test dark mode across devices and browsers.