{"id":319,"date":"2025-02-27T11:37:16","date_gmt":"2025-02-27T11:37:16","guid":{"rendered":"https:\/\/web-designs-by-niya.uk\/journalpublications\/?p=319"},"modified":"2025-03-26T15:20:22","modified_gmt":"2025-03-26T15:20:22","slug":"how-can-we-design-our-webpages-to-honour-the-users-preference-for-light-or-dark-mode","status":"publish","type":"post","link":"https:\/\/web-designs-by-niya.uk\/journalpublications\/2025\/02\/27\/how-can-we-design-our-webpages-to-honour-the-users-preference-for-light-or-dark-mode\/","title":{"rendered":"How can we design our webpages to honour the user’s preference for light or dark mode?\u00a0"},"content":{"rendered":"\n

Light\/dark mode has been around for a while now, but surprisingly, it\u2019s not implemented much, even though it has become much easier with the introduction of new CSS functions. Having both light and dark modes available on a website is beneficial and important for many reasons. In this article, you will read more about why we should offer our users the choice of either mode and how we can do it.<\/p>\n\n\n\n

\n

Table of contents<\/h2>\n\n\n\n
    \n
  1. Accessibility<\/a><\/li>\n\n\n\n
  2. Sustainability<\/a><\/li>\n\n\n\n
  3. Benefits of light and dark modes<\/a><\/li>\n\n\n\n
  4. How can we make light and dark modes available to the user?<\/a><\/li>\n\n\n\n
  5. Conclusion<\/a><\/li>\n\n\n\n
  6. Additional materials<\/a><\/li>\n\n\n\n
  7. Presentation slides<\/a><\/li>\n<\/ol>\n<\/div><\/div>\n\n\n\n

    Accessibility<\/h2>\n\n\n\n

    In terms of accessibility, people with astigmatism, dyslexia or lower vision<\/a> often find dark text on a lighter background (light mode) easier to read<\/a>, especially if it is a longer piece of text like a news page or a government site. It is important to also note that using a full black and white colour can be problematic for some of those people, because of the total contrast between both colours, especially if we offer only dark mode. For people with astigmatism, it is called the \u201chalation effect\u201d<\/a>.<\/p>\n\n\n\n

    \n
    \"\"<\/figure>\n\n\n\n
    \"\"<\/figure>\n<\/figure>\n\n\n\n

    On the other side, people struggling with migraines or photophobia<\/a> (sensitivity to light) are more likely to find it easier to consume content that is in lighter text on a darker background (dark mode). For some people with lower vision<\/a>, when there is too much light, their eyes struggle to create a clear and focused image and they might prefer using dark mode where lower levels of light reach the eye making it easier for them to focus on the content they see.<\/p>\n\n\n\n

    Switching from one website that supports light and dark mode to another that offers only light or only dark mode can often cause eye strain<\/a>, even to people without accessibility needs. And as web designers and developers, it is our job to ensure that the work we produce not only satisfies the client\u2019s needs but the users’ too. We are designing for the client\u2019s users, so we need to make sure we are considerate of their experience on our site and the other sites they visit – their experience on the web as a whole!<\/p>\n\n\n\n

    Sustainability<\/h2>\n\n\n\n

    Offering dark mode can have a positive impact on the environment too. That applies to devices with OLED screens<\/a> (AMOLED and POLED) because of the way that power is sourced to the light emitters. Websites and applications with dark mode have been known to use less power on those screens. It means that implementing dark mode can, to some extent, reduce the power usage of a device and therefore save battery when using a device and extend battery life.<\/a><\/p>\n\n\n\n

    What devices have OLED screens?<\/h3>\n\n\n\n

    OLED and AMOLED screens<\/a> are used on smartphones, laptops, tablets TVs, and wearables (e.g. smart watches), while POLED screens<\/a> are used only on smartphones and wearables, at least for now. However, this does not mean that all devices have a type of OLED screen, but is good to know that more and more manufacturers are starting to use them. It also means that it is time for us to start thinking about the impact of our work and how we can improve it. <\/p>\n\n\n\n

    Benefits of light and dark modes<\/h2>\n\n\n\n

    User preference<\/h3>\n\n\n\n

    A little after dark mode was introduced, Android and Apple researched what part of their customers used dark mode.<\/a> The majority of Android (81.9%) and half of Apple\u2019s customers (50%) reported using it. This research shows that there is a large audience that likes and prefers dark mode, which also shows the importance of honouring their preference by enabling dark mode on our websites. On the other hand, it does not mean that we should design only for dark mode users. The rest of the people in that research use and prefer light mode, which leaves us with a user need that needs to be catered to. Regardless of whether we prefer our designs to be light or dark, we still need to consider our users and their needs. Having both options will cater to and satisfy more users than if we had only light or only dark mode.<\/p>\n\n\n\n

    Both modes have been known to help users focus<\/a> and improve a website\u2019s readability depending on the users\u2019 needs. For example, for someone with dyslexia, readability would be increased in light mode and for someone with photophobia, readability would be higher in dark mode. Because of the use of dark colours, dark mode can also help with making screen flickering less noticeable<\/a>.<\/p>\n\n\n\n

    Branding<\/h2>\n\n\n\n

    In terms of aesthetics and branding, offering light and dark modes can be seen in two ways. For some, it may be a challenge, especially if there is an already established strong brand identity. Designing for another mode might be difficult when considering brand identity and recognition but nonetheless it is the user who needs to come first in our decision making.<\/p>\n\n\n\n

    For others, this can be seen as a positive, because it can make a brand more adaptive. Designing a brand\u2019s colours for both modes would provide different colour combinations that are still aligned and associated with the brand<\/a>. This will maintain brand consistency and recognition across all user devices regardless of the mode they choose to use. In addition, it can also help with physical products that a brand may decide to produce. They would have several colour combinations that can be used on products of different colours and still maintain brand identity.<\/p>\n\n\n\n

    From a user perspective, those who prefer dark mode have also reported that they find the dark colours of a website more appealing<\/a>.<\/p>\n\n\n\n

    Lastly, it simply makes the user experience on our website more personal<\/a>!<\/p>\n\n\n\n

    How can we make light and dark modes available to the user?<\/h2>\n\n\n\n

    System colours<\/h3>\n\n\n\n

    To enable light\/dark mode we need to declare the color-scheme<\/code> property<\/a> to indicate which colour schemes a document can be comfortably rendered in. With this property, the browser follows the operating system\u2019s settings for light or dark mode and displays the pages accordingly.<\/p>\n\n\n\n

    The first way to implement light and dark modes is to enable the use of system colours.<\/a> Each browser has its own system colours for displaying an HTML document: background, text (e.g. heading, body, link, etc.) and different functions (e.g. forms). If you are designing a simple website and you are using black and white colours the easiest way would be to include light\/dark mode using system colours, which is done by declaring color-scheme: light dark;<\/code> to the :root<\/code> (in CSS) or the <head><\/code> (in HTML) with a single line of code. Though it is unlikely that you would stick with the browser’s default styling, it is good to know that we have the option.<\/p>\n\n\n\n

    Using just the color-scheme<\/code> property will only change the default system colours that are set for each browser<\/a>. For us as developers, changing those colours is not possible, but a user can customise their own browser theme<\/a>. If we declare a different colour for the headings, for example, dark green, when we switch between light and dark mode the heading colour will not change to a lighter green since it is not part of the browser\u2019s default colours. There are different system colours<\/a> but in recent years many of them have been deprecated from most browsers, which means that if we decide to use the majority of them, users would likely not see them.<\/p>\n\n\n\n

    Demo 1:<\/summary>\n

    In the example here I have declared the color-scheme: light dark;<\/code> property to the root in CSS and am using two of the available and commonly used system colours. The Canvas<\/code> corresponds to the colour of the background and the CanvasText<\/code>, to the text colour. When switching between light and dark mode, we ca see that the colours change accordingly.<\/p>\n\n\n\n

    \n