Create a dark mode theme in CSS with this guide!

In today’s digital age, where the user experience is just as crucial as the content on offer, implementing a dark mode theme is not just a stylistic choice, but a growing necessity for apps and websites.

We will therefore explain below How to create a dark mode theme using CSS, an essential skill for developers looking to improve the accessibility and aesthetics of their projects.

What is a dark mode theme?

A dark mode theme is a feature that allows you to change the colours of a user interface, replacing light-coloured backgrounds with dark ones and light-coloured text with softer shades.

This change not only reduces the light emitted by devices, but also improves the readability of text, particularly in low-light conditions, helping to reduce eye strain for users.

Importance in modern web design

Dark mode has become incredibly popular in recent years, not only because of its visual appeal, but also because of its ergonomic benefits.

Numerous studies have shown that the use of dark colours can significantly reduce the eye strain and improve the user experience in low-light environments.

Furthermore, dark mode can help save energy on devices with AMOLED screens, where black pixels are effectively switched off.

This feature is particularly useful for users who spend a lot of time browsing on their mobile devices or computers.

Principles of dark mode

When designing a dark mode theme, it is crucial to adhere to certain principles that will not only ensure a visually appealing design, but also one that is functional and accessible to all users.

These core principles include appropriate contrast, colour selection and improved accessibility.

Contrast

One of the most important aspects of implementing a dark mode theme is maintaining adequate contrast between the the background and the foreground elements such as text and images.

Good contrast helps to improve the readability and ease of use, However, excessive contrast can be just as harmful, as it can cause eye strain.

Ideally, the contrast ratio should be around 7:1, in accordance with the WCAG (Web Content Accessibility Guidelines).

Here is an example of how to use contrast effectively:

 

«`css

body {

  background-colour: #121212; /* dark background */

  colour: #E0E0E0; /* light text */

}

«`

Colours

The choice of colours in a dark mode theme is vital not only for aesthetic reasons, but also for functionality.

Bright, saturated colours can be overwhelming and difficult to see against dark backgrounds.

It is preferable to use softer, desaturated shades that complement the dark background without competing for attention.

Furthermore, it is important to avoid using pure white or black, opting instead for slightly muted shades that reduce eye strain and enhance visual harmony.

«`css

:root {

  –accent-colour: #BB86FC; /* soft colour for highlighted elements */

}

«`

Accessibility

Accessibility is a key consideration when designing any theme, but particularly in dark mode, where visibility challenges can be more pronounced for those with visual impairments.

As well as ensuring adequate contrast, it is essential to implement features that enable users to personalise their experience according to their needs.

This may include user controls for adjusting brightness or colour saturation, and ensuring that all interactions and transitions are clearly visible.

 

«`css

@media (prefers-reduced-motion: reduce) {

  * {

    animation-duration: 0ms !important;

    transition-duration: 0ms !important;

  }

}

«`

 

Including controls in the design that allow users to switch between light and dark themes as they prefer is another way of improving accessibility.

By respecting users’ preferences and adapting the interface to cater for different visual conditions and sensitivities, developers can create a truly inclusive experience.

Project preparation

Before you start implementing a dark mode theme, it is essential to lay a solid foundation for your project.

This involves setting up a basic HTML structure and preparing the necessary CSS files to ensure a smooth transition between colour schemes.

Below, we describe how to prepare these essential items.

Basic HTML structure

The HTML structure of your website must be clear and semantically correct to ensure that the CSS you apply has the desired effect.

Here’s a example A simple HTML structure that you can use as a starting point:

 

«`html

<!DOCTYPE html>

<html lang="»es»">

<head>

    <meta charset=»UTF-8″>

    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

   

    <link rel=»stylesheet» href=»styles.css»>

</head>

<body>

   

        <h1>Welcome to my website</h1>

        Change Theme

   

   

       

            <h2>Main Content</h2>

            <p>This is the main content of the page.</p>

       

       

   

   

    <script src=»theme.js»></script>

</body>

</html>

«`

 

This structure includes all the key sections of a website and is flexible enough to be expanded to meet the specific needs of the project.

Initial CSS configuration

Once you have the HTML structure in place, the next step is to set up the initial CSS configuration. This involves defining basic styles, set the colour variables and prepare the document to suit a dark theme.

Here is an example of how you could set up your initial CSS file:

 

«`css

/* Sets the colour variables for the light theme */

:root {

    –background-colour: #FFFFFF;

    –text-colour: #333333;

    –accent-colour: #007BFF;

}

 

/* Global styles */

body {

    font-family: Arial, sans-serif;

    background-colour: var(–background-colour);

    colour: var(–text-colour);

    margin: 0;

    padding: 0;

}

 

header, main, footer {

    padding: 1em;

    text-align: centre;

}

 

/* Specific styles for the theme-switch button */

#theme-toggle {

    background-colour: var(–accent-colour);

    colour: #FFFFFF;

    border: none;

    padding: 0.5em 1em;

    font-size: 1em;

    cursor: pointer;

}

 

/* Styles for the dark theme that will be applied when the user selects this mode */

[data-theme=»dark»] {

    –background-colour: #333333;

    –text-colour: #FFFFFF;

    –accent-colour: #FFD700;

}

 

«`

 

This initial CSS not only sets out a basic colour palette, but also includes styles for a button that will allow users to switch between the light and dark themes.

These elements form the basis on which the rest of the site’s design will be built, enabling an effective and aesthetically pleasing implementation of the dark mode theme.

Implementation of dark mode

Once the project has been set up with a suitable HTML structure and initial CSS configuration, the next step is to implement the dark mode theme. This involves the clever use of CSS variables and the integration of media queries that respond to the user’s system preferences.

Using CSS variables

CSS variables, also known as custom properties, are essential for implementing a dark mode theme because they allow change the values of various elements consistently and centrally across the entire site. This makes it easy to switch between light and dark themes simply by adjusting a set of variables.

Here we show how to define and apply these variables for both themes:

 

«`css

:root {

    /* Colours for the light theme */

    –background-colour: #FFFFFF;

    –text-colour: #333333;

    –accent-colour: #007BFF;

}

 

[data-theme=»dark»] {

    /* Colours for the dark theme */

    –background-colour: #121212;

    –text-colour: #E0E0E0;

    –accent-colour: #BB86FC;

}

 

body {

    background-colour: var(–background-colour);

    colour: var(–text-colour);

}

 

a, button {

    colour: var(–accent-colour);

}

«`

 

With this configuration, you can easily switch between themes using JavaScript by changing the `data-theme` attribute on the root element, as mentioned above.

Media queries for dark mode

Media queries are a powerful tool in CSS for adapt the presentation of the content to different conditions, such as the user’s operating system colour scheme preferences.

By using the `prefers-color-scheme` media query, you can automatically adjust your site to use dark mode if the user has set that preference on their system.

Here is how to implement this functionality:

 

«`css

@media (prefers-colour-scheme: dark) {

    :root {

        –background-colour: #121212;

        –text-colour: #E0E0E0;

        –accent-colour: #BB86FC;

    }

}

 

@media (prefers-colour-scheme: light) {

    :root {

        –background-colour: #FFFFFF;

        –text-colour: #333333;

        –accent-colour: #007BFF;

    }

}

«`

 

Optimisation and customisation

Following implementation, the next step is to optimise and customise the experience to ensure that it is perfectly tailored to users’ needs and preferences.

This stage of development focuses on fine-tuning colours and backgrounds, as well as customising the typography and user interface (UI) elements to improve both aesthetics and functionality.

Colour and background settings

Adjusting the colours and backgrounds in a dark mode theme is crucial to ensuring that the content is not only legible but also visually appealing. These adjustments should focus on minimising eye strain and improving the site’s visual consistency.

Here are some practical tips:

• Colour desaturation: In a dark theme, highly saturated colours can be vibrant and quickly strain the eyes. Consider desaturating the colours to improve visual comfort.
• Brightness and contrast settings: Make sure that the brightness and contrast levels of the backgrounds and text are appropriate so as not to create a visual impact that is too harsh. Backgrounds should be dark enough and text light enough to ensure good readability without causing glare.
• Using gradients and textures: Plain backgrounds can look monotonous, especially on a dark theme. Incorporate subtle gradients or textures to add depth and visual interest without overwhelming the design.

Typography and UI elements

Typography and user interface elements play a vital role in the usability and visual appeal of the dark mode theme.

Here are some key points for optimising these areas:

• Choice of typefaces: Choose fonts that are clear and easy to read against dark backgrounds. Bolder fonts can improve readability in these contexts.
• Font size and spacing: Increase the text size and spacing slightly to improve readability. Dark backgrounds can cause tightly packed text to blend in and become difficult to read.
• Button and control styles: Make sure that buttons and other control elements are easy to identify and use. Use accent colours and shadows to make these elements stand out without being too overpowering.
• Visual feedback: In a dark theme, it is crucial to provide clear visual feedback when users interact with UI elements. This may include colour changes, hover effects and smooth transitions that clearly inform the user of the action taken.

Testing and validation

Once dark mode has been implemented, it is crucial to ensure that it works correctly across different devices and browsers. This stage of the process – testing and validation – is essential for ensuring a consistent, high-quality user experience. In the following paragraphs, we explore some testing tools and strategies for gathering user feedback.

Testing tools

To test the implementation of a dark mode theme, you can use a range of tools to help you identify issues relating to display, accessibility and design consistency across multiple devices and browsers:

• Browser tools: Most modern browsers, such as Chrome, Firefox and Safari, include developer tools with emulators for testing different colour schemes. These emulators allow you to simulate how your site looks in both themes without having to manually change your system settings.
• Lighthouse: An automated tool that forms part of Chrome DevTools, providing audits for accessibility, performance, progressive web apps and more. Lighthouse can help you assess how your implementation of dark mode affects accessibility and the user experience.
• CrossBrowserTesting: A platform that allows you to test your website on different browsers and devices to ensure that the dark theme looks and works correctly across the board.
• Wave: An online accessibility assessment tool that can help you identify contrast issues and other accessibility errors in your dark mode theme.

User feedback

As well as technical testing, gathering direct feedback from your users is invaluable. They can provide insights that automated tools might overlook. Here are some techniques you can use to collect and utilise this feedback effectively:

• Online surveys and forms: Once you have implemented dark mode, you can ask users to complete surveys or forms giving their views on the usability and aesthetics of the dark theme.
• Focus groups: Organising focus group sessions can give you a deeper understanding of how different types of users experience the dark theme on various devices and in different contexts.
• On-site user testing: Observing users as they interact with your site in both modes can provide valuable insights into practical issues that might not be apparent in more controlled tests.
• Technical support analysis: Keeping a record of and analysing support enquiries relating to the ‘dark’ issue can help you identify and resolve recurring problems that users encounter.

Conclusions

Developing a dark mode theme in CSS is not only a trend in web design, but also an essential consideration for to improve accessibility and the user experience in the digital sphere.

Throughout this guide, we have covered the key aspects of creating and implementing an effective dark theme, from basic configuration to advanced customisation, ensuring that developers are equipped to deliver an optimal user experience.

On the other hand, as we have seen, implementing a dark mode theme involves much more than simply adjusting the background and text colours.

It requires a detailed approach that includes the appropriate contrast, colour selection, typography and interface elements, as well as adaptability to user preferences.

By following best practice and using the right tools for testing and optimisation, developers can create interfaces that are not only visually appealing, but also user-friendly and accessible to all users.

It is also worth noting that the future of web design is increasingly moving towards personalisation and adaptability.

Dark mode themes are a clear example of how technology and design can work together to meet users’ changing needs.

With advances in CSS and other web technologies, it has never been easier to implement sophisticated features that previously required complex solutions or design compromises.

Ultimately, a well-implemented dark mode can make the difference between a site that is merely functional and one that offers a rich, dynamic and user-friendly experience.

What you should bear in mind when creating a dark mode theme in CSS

• Implementing a dark mode theme is crucial not only for aesthetic reasons, but also for functionality, as it improves accessibility and user comfort in low-light environments.
• The use of CSS variables makes it easy to switch between light and dark themes, allowing for global changes to colour and style with minimal changes to the code.
• Implementing `prefers-color-scheme` media queries enables the website to respect the colour scheme settings of the user’s operating system, automatically adapting to their light or dark theme preferences.
• It is essential to maintain adequate contrast in the dark mode theme to ensure readability and reduce eye strain, in line with the WCAG accessibility guidelines.
• Choosing desaturated, soft colours in the dark theme can improve readability and prevent visual fatigue, whilst avoiding colours that are too bright or saturated.
• Using tools such as Lighthouse and CrossBrowserTesting ensures that the dark theme works correctly across different devices and browsers, validating the user experience across multiple platforms.
• Incorporating user feedback is crucial for refining the dark theme, using surveys, user testing and technical support analysis to fine-tune and improve the implementation.
• Implementing additional features such as gradients, textures and visual effects can enhance the dark theme experience, making the site more appealing and dynamic.
• A well-implemented dark mode theme improves accessibility and the user experience, adapting to individual visual needs and preferences.