Master of Science Thesis University of Turku Department of Computing Computer Science November 2023 Julius Virtanen Dark Mode Preferences: Exploring User Motivations in Interface Theme Selection The originality of this thesis has been checked in accordance with the University of Turku quality assurance system using the Turnitin Originality Check service. UNIVERSITY OF TURKU Department of Computing, Faculty of Technology VIRTANEN, JULIUS: Dark Mode Preferences: Exploring User Motivations in Interface Theme Selection Master of Science Thesis, 80 pages, 1 appendix page. November 2023 In a world that is increasingly digital, the interfaces through which we interact with our technology play a critical role in our daily experiences. One important aspect of interface design is theming, which allows users to personalize their visual interaction with software applications and websites. Theming itself is a varied concept, but it enables users to tailor their digital environments according to their preferences, thereby enhancing usability and user satisfaction. Among various theming options, ’Dark mode’ has risen to prominence as a notable design trend in recent years. The adoption of Dark mode by major software platforms and applications signifies its impact and growing relevance. However, the key factors that lead to its adoption are highly debated among end users. In addition, many websites and applications have yet to incorporate a Dark mode feature. For this reason, understanding what leads to these preferences has practical implications for web developers and designers as well. To better understand and evaluate the motivations behind users’ Dark mode theme selection, a survey was conducted. The survey employed a questionnaire where the questions were rooted in a set of background hypotheses that are believed to be influential in determining why users opt for Dark or Light mode. These background hypotheses were formed using the literature existing in the field. The results of the survey suggest that there is no single driver for Dark mode selection, rather, users might be weighing Dark mode’s visual appeal against functional benefits like reduced eye strain, focus, power savings, and select a theme based on these assumptions. A subset of users also tailor their own interfaces more than others, where the implications of application specificity rises to question. In addition, age also plays a factor in the selection, but only to a degree. Keywords: Dark mode, User-interface, UI Design, Usability, Screen time, Readability, Power Consumption, Accessibility, Questionnaire TURUN YLIOPISTO Tietotekniikan laitos, Teknillinen tiedekunta VIRTANEN, JULIUS: Mieltymykset tummaan teemaan: Käyttöliittymäteeman valintaan johtavat tekijät Pro gradu -tutkielma, 80 sivua, 1 liitesivu. Marraskuu 2023 Digitaalisessa vuorovaikutuksessa käyttöliittymät ovat keskiössä. Yksi tärkeä käyttöliittymäsuunnittelun näkökulma ovat teemat, joiden avulla käyttäjät voivat yksilöidä oman kokemuksensa sovelluksissa ja verkkosivustoilla. Teemojen käyttö on monipuolinen ilmiö, mutta viime kädessä ne sallivat käyttäjien mukauttaa digitaalista ympäristöään heidän mieltymystensä mukaisesti parantaen näin käytettävyyttä ja käyttäjätyytyväisyyttä. Yksi suosituimmista teemavaihtoehdoista on ’Tumma tila’ eli ’Dark Mode’. Se on noussut merkittäväksi trendiksi viime vuosina erityisesti suurten ohjelmistoyritysten ja suosittujen sovellusten vauhdittamana. Kuitenkin ne avaintekijät, jotka johtavat sen käyttöönottoon, ovat kiistanalaisia. Näistä tekijöistä myös käydään kiivaita keskusteluja loppukäyttäjien joukossa. Lisäksi monet verkkosivustot ja sovellukset eivät ole vielä sisällyttäneet Dark Mode -ominaisuutta alustalleen. Tästä syystä teemamieltymysten ymmärtäminen on tärkeää myös web-kehittäjille ja sovellusten suunnittelijoille. Käyttäjien teeman valintaperusteiden ymmärtämisen ja arvioinnin parantamiseksi suoritettiin kattava kyselytutkimus. Kyselyssä käytettiin kyselylomaketta, jonka kysymykset perustuivat taustaoletuksiin, joiden uskotaan vaikuttavan käyttäjien päätöksiin valita joko tumma tai vaalea teema. Nämä taustaoletukset muodostettiin olemassa olevan alan kirjallisuuden perusteella. Kyselytutkimuksen tulokset viittaavat siihen, että tumman teeman valintaan ei ole yksittäistä merkittävää tekijää. Sen sijaan käyttäjät saattavat punnita tumman teeman visuaalista viehätysvoimaa toiminnallisiin hyötyihin, kuten esimerkiksi silmien rasituksen vähentämiseen, keskittymiseen, virrankulutukseen ja valita näiden olettamusten perusteella oman teemansa. Osa käyttäjistä myös mukauttaa omia käyttöliittymiään enemmän kuin toiset, jolloin sovelluskohtaiset valinnat tulevat ilmi. Lisäksi ikä vaikuttaa valintaan, mutta ainoastaan tietyssä määrin. Asiasanat: tumma teema, käyttöliittymä, käyttöliittymämuotoilu, käytettävyys, näyttöaika, luettavuus, virrankulutus, saavutettavuus, kyselylomake Table of Contents 1. Introduction ....................................................................................................... 1 1.1 Background and Goals ............................................................................... 1 1.2 Structure...................................................................................................... 2 2. Graphical User Interfaces ................................................................................ 3 2.1 History of User Interfaces .......................................................................... 5 2.2 Modern User Interfaces and Web Content .............................................. 11 3. Theming and Styling ....................................................................................... 15 3.1 Cascading Style Sheets (CSS) .................................................................. 16 4. The Rise of ‘Dark Mode’ ................................................................................ 20 4.1 Dark Mode Implementation ..................................................................... 22 4.2 Previous Research and Related Work ...................................................... 27 5. Dark Mode Survey Design ............................................................................. 34 5.1 Research Methodology ............................................................................. 34 5.2 Data Collection Method ........................................................................... 36 6. Results and Analysis ....................................................................................... 38 6.1 Overview .................................................................................................. 38 6.2 Comparison ............................................................................................... 66 6.3 Discussion ................................................................................................. 71 7. Conclusion ........................................................................................................ 74 7.1 Future Work .............................................................................................. 75 References ............................................................................................................ 76 Appendices ........................................................................................................... 80 Appendix A – Dark Mode Preferences Survey ............................................. 80 Appendix B – Survey Results ........................................................................ 80 1 1. Introduction In a world that is increasingly digital, the interfaces through which we interact with our technology play a critical role in our daily experiences. One aspect of interface design that has gathered large amounts of attention is theming, which allows users to personalize their visual interaction with software applications and websites. Theming itself is a varied concept, confining everything from colour schemes and typography to layout and iconography. It enables users to tailor their digital environments according to their preferences, thereby enhancing usability and user satisfaction. Among various theming options, ’Dark mode’ has risen to prominence as a notable design trend in recent years. Dark mode is a user interface option that reverses the default colour scheme, primarily using dark backgrounds with lighter text and interface elements. Originally an option which was commonplace for developers and tech enthusiasts, Dark mode has now mainstreamed, becoming a frequently debated topic among everyday users. The adoption of Dark mode by major software platforms and applications signifies its impact and growing relevance. 1.1 Background and Goals Despite Dark mode growing in popularity, the reasons behind choosing Dark mode or conversely, sticking with the default ’Light mode’ vary among users. While some users advocate the benefits of Dark mode, such as reduced eye strain and battery saving or even privacy, others prefer the traditional light mode for its perceived readability and brighter appearance. Many websites and applications have yet to incorporate a Dark mode feature. For this reason, understanding what leads to these preferences has practical implications for web developers and designers. It can inform the people who are contemplating whether to allocate resources for embracing new theming options like Dark mode into their platforms. This leads us to our central research question: What factors motivate people to choose a different theme or change to a Dark mode in various software applications and websites? 2 To address this question, this thesis employs a survey method aimed at uncovering why users prefer one mode over another. By evaluating these preferences this study aims to deliver practical recommendations that could guide future design and development of user interfaces and even guide further Dark mode research. Furthermore, the findings could reveal patterns or factors previously overlooked, such as specific use-cases where one mode may be more beneficial than the other, or demographic variations in theme preferences. The information gained here could be valuable for web developers and designers, but also for software companies and digital content providers looking to enhance user experience and engagement. 1.2 Structure This thesis is organized into several chapters, each focused on a different aspect of the interface topic. After this introduction, Chapter 2 explains the basics of graphical user interfaces, the history, and the development of user interfaces to set the stage for current trends. Chapter 3 covers theming and styling of graphical user interfaces, specifically going over cascading style sheets and their technicalities. This works as a transition for the Dark mode Chapter 4, which goes in-depth with the rising trend of dark theming, Dark mode implementation, and previous research regarding these theming options. Later in Chapter 5, we discuss the design of the research survey, particularly research methodology and data collection of our survey. Following that, Chapter 6 presents the results and analysis of this survey, exploring the collected data and what implications it might have regarding our research question about users’ theming preferences. Finally, Chapter 7 concludes the thesis, summarizing the findings and suggesting future research areas. Additional materials, such as the survey questions and collected data, can be found in the appendices. 3 2. Graphical User Interfaces Graphical user interfaces (GUIs) serve as the bridge between humans and computers, streamlining interaction and facilitating a multitude of tasks [1]. While interfaces can exist in various forms, this thesis will focus primarily on graphical user interfaces and their web-based variations. These interfaces are what users encounter on various platforms like computer monitors, smartphone screens, tablets, and other digital displays. The fundamental purpose of a graphical user interface, as Donald Norman [2] suggests, is to serve as a digital extension of real-world tools and functions, thereby enhancing intuitive use. Given that people are already accustomed to interacting with buttons, levers, and switches in the physical real world, incorporating these elements into a digital context feels natural as users directly manipulate and toy with them. The graphical user interface also offers navigational guidance. Through recognizable icons and symbols - such as a magnifying glass for search, a menu icon for options, signal bars for wireless networks, and a diskette for saving - users receive visual cues that inform them of their actions. This is based on what Norman [2] calls ‘mental models’, or the ideas we already have about how things should work. These models make it easier for us to use new digital tools, whether it is a desktop application or a website on a mobile device. Now, how does a computer know to show these helpful icons and layouts? That is where the basics of GUI design come in. In traditional desktop GUIs, there are usually three foundational components that work together to form the basic user interface. The first is the windowing system, responsible for the structure and layout of windows, menus, and dialog boxes on the screen. The second is the imaging model, which defines the visual elements such as fonts and graphics that are displayed. Lastly, there is the Application Program Interface (API). This is the set of protocols and tools that allow users to specify how windows and graphics should appear and behave on the screen [1]. While this explanation simplifies the complexities of window managers and the underlying technologies, it offers a useful high-level overview of how GUIs operate. 4 To illustrate how these principles still apply - even in modern systems like Apple's MacOS Ventura, these basics still play a critical role in making technology user-friendly and familiar as seen in Figure 1. Figure 1. MacOS Ventura 13 Desktop GUI, https://support.apple.com/guide/mac-help/work-on-the-desktop- mh40612/mac With the advent of the Internet and the high adoption of mobile devices, it is important to note that desktop environments are not the only platforms where GUIs are relevant. Web and mobile interfaces have gained popularity as an increasingly significant category within the landscape of user interfaces. This shift to more varied digital platforms has been driven by emerging technological advancements such as cloud services and high- speed internet availability [3]. This multi-platform expansion of GUIs not only diversifies the types of interfaces available but also greatly influences user expectations and experiences. For instance, modern users often expect seamless transition, customizability and consistent functionality across desktop, web, and mobile applications. This presents challenges for designers and developers of new graphical user interfaces [4]. Take for instance Discord in Figure 2., an instant messaging application which needs to adapt to different devices and environments, while still retaining all its functionality. 5 Figure 2. Discord desktop and mobile views compared, https://discord.com/blog/how-discord-made-android- in-app-navigation-easier But before we inspect any specific challenges developers and designers face, let us delve into the evolution of visual user interfaces, tracing their development from the early days of graphical displays to their modern incarnations. This sets the stage for a focused discussion on theming options, and in particular, the increasing popularity and implementation of Dark mode in the UI design landscape. 2.1 History of User Interfaces Before GUIs, users faced a daunting blank black screen and a prompt, a design choice that did little to guide the user. In such environments, the computer's abilities remained mostly obscure to the layman. Command line interfaces (CLIs) use only text and are accessed solely by a keyboard [5]. One such example can be seen in Figure 3. with the DEC VT100 Terminal, but probably the most familiar example of a CLI to many is MS- DOS or its modern incarnation, the command prompt. Another example is Linux when it is used in shell or bash mode (i.e., the entire screen shows text only). One could say that CLI's are the living fossils of modern GUIs representing a time when interaction with computers was more text-based and less visually intuitive. Despite their seemingly archaic nature, CLI's continue to be a vital tool for developers and system administrators even today. While CLIs are still being used today, the origins of the 6 modern GUI can be traced back to the limitations and challenges posed by these text- based interfaces. Figure 3. DEC VT100 Terminal (Photo: Digital Equipment Corporation) During World War II, Vannevar Bush, a scientist and futurist who worked at the Massachusetts Institute of Technology (MIT) proposed an information administration tool called the Memex, in his now classic 1945 magazine article ‘As We May Think’ [6]. It would allow data to be stored on a microfilm and made easily accessible and linkable with hyperlinks. He envisioned the device to follow the similar associative processes as the human mind. Despite Memex being completely hypothetical, it would lay the foundation for user interfaces as we will soon see. In 1963 Ivan Sutherland, a graduate student at MIT, developed a program for his Ph.D. dissertation called Sketchpad, which allowed the direct manipulation of graphic objects on a CRT screen using a light pen. His concept included the capability to zoom in and out on the display, the provision of memory for storing objects and the ability to draw precision lines and corners on the screen [5]. Later, Douglas Engelbart was credited with the invention of the computer mouse. He was already deeply involved in human-computer interaction research at Stanford University during the early 1950s. His work was significantly influenced by Bush's Memex concept. In 1968, Engelbart introduced the world to the first rudimentary mouse at the Fall Joint 7 Computer Conference in San Francisco. Initially called the "X-Y Position Indicator for a Display System," the device was encased in a small wooden box and featured wheels. When moved on a flat surface, it controlled the cursor on the display screen. Despite its innovative design, Engelbart never earned royalties from his invention, as the patent had expired by the time the mouse became commercially available in other systems [7]. In 1970, Xerox Corporation established the Palo Alto Research Center (PARC) in California, with the ambitious goals of shaping ‘the architecture of information’ [5]. Among its contributions was the development of the first practical GUI, which was integrated into the PARC's Alto computer. Launched in 1974, the Alto was designed to be an alternative to the mainframe computers of the time. With a GUI and point-select interaction, the Star interface was the archetype of direct manipulation [7]. Parts of the icon designs can be seen in Figure 4. Despite its innovative features, MacKenzie [7] states that the Alto and its successor, the Xerox 8010 Star Information System, failed to achieve commercial success, largely due to their exorbitant pricing ($16,000 for the workstation alone). Figure 4. Icon examples that were designed for the Xerox Star desktop. During the same time frame, Steve Jobs, the co-founder of Apple Computer, was influenced by the pioneering work at PARC, which was conveniently located nearby Jobs’ residence. In exchange for shares of Apple, Xerox granted Jobs access to the PARC branch [7]. Determined to build upon PARC's innovations, Jobs and Apple engineers integrated a GUI into Apple's computer systems. Apple significantly expanded on the previous work done at PARC, introducing features like dropdown menus, interactive 8 icons, movable windows, a fixed menu bar, and a trash can for file deletion. The subsequent results of Apple’s interface design can be seen in Figure 5. Figure 5. The Apple II GS Desktop environment from 1986 (http://toastytech.com/guis/a2desk.html) The Apple Macintosh, launched in 1984, was the first commercially successful use of a GUI. It was so successful, in fact, that the GUI was subsequently adopted by most other developers of operating systems and software [5]. The Mac interface was simple and intuitive. Anyone could use it. Part of the simplicity was its one-button mouse. With one button, there was no confusion on which button to press. [7]. The success of Apple can be attributed to its competitive pricing compared to Xerox’s workstations. Also, according to MacKenzie [7], Apple always viewed their computers as personal computers, not ‘a personal computer designed for office professionals’. This user-centric focus on their computers and GUI was a recipe for success. GUIs entered the mainstream and, consequently, a much broader community of users and researchers were exposed to this new genre of interaction. Microsoft was a latecomer in GUIs [7]. Microsoft announced development of its first operating system that 9 incorporated a GUI in November 1983. Windows 2.0, released in December 1987, represented a major improvement over the primitive Windows 1.0 with its addition of icons and overlapping windows, but it was not until 1995 with the launching of Windows 95 that Microsoft was able to offer a relatively modern GUI with their new product. Moving on to the new millennia, the 2000s were marked by the rise of mobile operating systems with advanced GUIs designed for mobile use. Nokia innovated and dominated the market with their Symbian based UI, but it was not until Apple's iOS, introduced in 2007, popularized the way we interact with mobile devices. iOS offered a multi-touch interface that was both intuitive and familiarized the public with the ‘app ecosystem’ [8] of large tappable icons on users’ screens. Google's Android followed suit, providing a flexible and customizable GUI that rapidly gained market share in the mobile sphere as well. Figure 6. Apple iOS 2 mobile user interface, also known as iPhone OS 2 in 2008 10 Also, the introduction of new web technologies, such as JavaScript and Macromedia Flash (subsequently Adobe Flash), website developers were able to create more dynamic and interactive web pages. This led to the creation of more complex and sophisticated web UIs, which included animations, drop-down menus, and other interactive elements. Even online browser games were created using these technologies. As more people began to use the web for online shopping, social networking, and other activities, the need for better web UIs grew tremendously [9]. Moving in to the 2010s, the lines between desktop, mobile and web UIs began to blur. Microsoft's Windows 8, released in 2012, attempted to merge the mobile and desktop views with its ‘Metro’ interface, optimized for both touch and traditional mouse-and- keyboard input [10]. While the change was met with mixed reviews, it signified a trend towards unified interfaces across different device types as seen in Figure 7. Figure 7. Microsoft’s Metro design language’s evolution as seen in Windows 10, released on July 29, 2015. The rise of cloud computing and web applications led to the development of browser- based interfaces, blurring the lines between local and web-based software. This trend has been driven by SaaS (Software as a Service) platforms, which provide access to software applications over the internet rather than requiring local installation. Google's Chrome OS, launched in 2011, was a notable example of this trend, offering a lightweight operating system that relied heavily on web applications and cloud storage [11]. 11 2.2 Modern User Interfaces and Web Content As we proceed into the current landscape of user interfaces and web content, the lines between native and web applications have blurred, and the user experience is increasingly shaped by a blend of technologies, platforms, and devices. Historically, web services were available only through a desktop web browser. Nowadays, methods of access move beyond the desktop computer towards ubiquitous access through portable devices [12]. User interface designers, on the other hand, aim to design usable interfaces to cater for the varying requirements of these devices. One good example of the current state of web UI design is the focus on minimalism and user-centred design [9]. Design systems like Google’s Material UI (Figure 8.), Apple’s Human Interface Guidelines, and IBM’s Carbon Design System have become tools in achieving this focus. These frameworks provide a unified set of guidelines, components, and best practices that help in creating consistent and intuitive user interfaces across platforms [13]. According to Nielsen Norman Group [13], these systems help designers and developers to ensure a consistent user experience, whether the user is on a mobile device, desktop, or even using a web application. Additionally, design systems contribute to the scalability and maintainability of a product, as it alleviates strain on design resources and creates a unified language within and between cross functional teams. Figure 8. Material UI – Google provides documentation and components that developers can utilize. 12 In addition to the design systems, Web API (Application Programming Interfaces) integration should be considered as well. These APIs enable seamless integration between different services and platforms, allowing for more feature-rich and dynamic UIs. Whether it is embedding a Google Map into a web page or pulling in real-time weather data, APIs have become the building blocks of the modern web by providing extensibility and reusability [14]. You can see the basic architecture and functionality of an API in Figure 9. Building on this, APIs also make it easier for smaller developers or teams to make apps that integrate with larger platforms. This helps different services work well together, giving users a better experience overall. Using APIs can also speed up the development process, saving both time and money as developers can integrate ready-made components to their applications without starting from zero. Figure 9. Basic architecture diagram of a web API, and how communication is established with endpoints. Another relatively new development are PWAs (Progressive Web Applications). Although these web applications do not necessarily give new design standards to mobile applications, according to Tandel & Jamadar [15], PWAs continue to gain traction as they offer the best of both native and web applications. With capabilities like offline access, push notifications, and fast load times, PWAs provide a native app-like experience without requiring users to download anything from an app store. The predecessor of PWAs could be seen as early as 2007. At the launch of the iPhone in 2007, Apple announced that web applications (developed in HTML5 using AJAX architecture) would be the conventional format for iOS apps. No SDK (software development kit) was initially required, and the apps would integrate via the Safari 13 browser engine. This was later redacted, and Apple switched to the App Store design and the subsequent bundling of apps [16]. Despite the varying degrees of support from different vendors and the popularity of app stores, PWAs have seen a significant increase in adoption since 2015, both by businesses and users, due to their cross-platform nature, offline capabilities, and the enhanced user experience they offer [17]. Notable PWAs include Spotify, Uber, Google Maps, Facebook and Airbnb (see Figure 10. for example), all of which provide a native app and the web app version which can be added to the users’ home screen on their mobile device. Figure 10. Airbnb, a housing booking broker, and a marketplace website as seen in 2023, exemplifying modern web design. The same exact layout and design is in the web application and the downloadable application. In addition to PWAs, a large modern trend has been the user customizability and personalization of UIs. Custom wallpapers and screensavers have been a long-standing staple of computers and displays, but during recent years, we have seen a greater focus on personalization to maintain and solidify the relationship between users and digital products. Regardless of application type, researching new ways to provide personalised system feedback will be important going forward [18]. 14 To achieve this, new methods of data collection, such as big data analytics, are likely to influence the everyday interactions between users and systems in the near future. For this advancement, UX specialists and software engineers will need to widen their scope on the types of contextual data that can be collected with user consent. By using big data with new forms of user interfaces, application designers could establish deeper and more beneficial relationships with end users. Additionally, research could explore the role of Internet of Things (IoT) technologies in conjunction with big data. This angle could offer more personalized digital experiences for new UIs. All of this is of course all speculative, but interesting to think about. All these factors - design systems, Web APIs, Progressive Web Apps (PWAs), and customizability illustrate how modern UIs are formed and what they encase nowadays. GUIs have come a long way since the beginning of the first CLIs and windowing interfaces. Now, to set the stage for the next chapter, we will dive deeper into the concept of customizability and personalization by examining UI theming and styling standards. 15 3. Theming and Styling As we previously went over, the evolution of UI design has incorporated several developmental factors, one of which was the rising trend of UI customizability. To deliver personalized and effortless digital experiences, developers and designers have included options for users to customize their screens and content. The concept of theming and styling fits into this view, as it serves as a tool for both aesthetic appeal and improved user interaction. In this chapter, we will explore the role of theming in modern UIs and later in subsequent chapters the trend of Dark mode theming. This emphasis on user customization is not just a design trend but is backed by empirical data. A study conducted by Hui & See [19] found that the ability of the user to customize their own UI is linked to the user's sense of control over the UI. Since the sense of control over the UI is illustrated to directly impact perceived user efficiency levels, it is highly likely that customizability is proportional to the user's PEOU (Perceived Ease of Use) of the UI. Thus, by developing software that allows both developers and users to collaborate and cooperate in the creation of user-preferred UI design, we can enhance user satisfaction. Some research also points to the psychology of cognitive bias. This can be attributed to the "IKEA effect" – a cognitive bias in which consumers place higher value on things they helped to build or create [20]. This psychological principle can be extended to UI design and theming, reinforcing the importance of user customization. According to UX research, giving users agency, will create stronger bond between the user and the product. The effort that users will put into completing the product to a complete state will transform into love for that product. The subjective value will be higher in comparison to a product that has not cost any effort for the user [21]. Expanding on this psychological insight, the idea of personalization extends to the content displayed within the UI. Dynamic themes can adjust the layout, highlight particular services, or even modify textual content based on user preferences and behaviour. This level of customization not only makes the experience more engaging but also highly satisfying, as users feel their unique needs and tastes are being catered to. 16 3.1 Cascading Style Sheets (CSS) Theming and styling are not just about changing the colour scheme or adding a catchy background or a wallpaper. Theming involves tailoring visual elements and the interactive components on a technical level. This is achieved through techniques such as Cascading Style Sheets (CSS), a long-standing technology used for the layout, colouring, and fonts of web pages and applications all over. Ryan Lanciaux covers this in-depth in his book Modern Front-end Architecture [22]. CSS serves as the backbone for creating presentation styling for web content. By using a range of CSS properties and values, designers can create highly customizable themes that can be easily altered or switched out. This flexibility is especially invaluable, as it enables quick adaptations to user preferences or emerging design trends. As prefaced by Lanciaux [22], any discussion around styling web applications should start with CSS. CSS is the browser-supported way to style web applications, and it is specifically designed to be the standard language for describing the look and formatting of a document written in HTML (HyperText Markup Language). In HTML, elements are used to describe the web page, and these elements are represented by tags that can be nested inside one another. Using CSS, developers apply rules to the HTML elements and define the styles that should be applied by referring to them through selectors. A rule consists of a selector followed by a block of CSS properties contained inside curly braces. The properties consist of a property and value separated by a colon and are delimited with semicolons. A value may be a single value or a collection of multiple values, depending on the property. Every element in the document that is matched by the selector has the properties in the CSS rule applied to it [23]. An example of a CSS rule is shown in Figure 11. Figure 11. Basic syntax of a CSS rule - targeting the header-selector with properties that have certain values. 17 There are also several ways to use CSS in an HTML document: Inline styling, style blocks and external style sheets. These all have an end result: a style sheet that is applied to the HTML document. Every HTML element supports the style attribute. Inline styles are specified as CSS properties in the value of the style attribute. An inline style does not contain selectors or curly braces; it is simply a collection of CSS properties. An example of an inline style is shown in Listing 1. Listing 1. An element with inline styles: 1. 2. 3. Inline Styles Example 4. 5. 6.

This text is red

7. 8. In this part, we use the HTML

paragraph element and add a style attribute to it. The attribute ‘color: red;’ sets the text colour of the paragraph to red. If there are conflicts in the rules that apply to an element, its inline style always takes precedence. For example, if there was a CSS rule somewhere that made all

elements have a blue styling, this element’s inline style would override that and give it a red look. CSS rules can also be specified inside a style sheet within the HTML document itself. This is done by adding CSS rules inside of a style element. Listing 2. shows an example HTML document containing the 10. 11. 12.

This text is blue.

13. 14. 18 The styles are applied to every

element on the page unless overridden by more specific selectors or inline styles. The final and probably most used CSS method is the loading of an external style sheets. The style sheet is first defined in the HTML file in Listing 3. Listing 3. HTML file with a link to an external style sheet called styles.css. 1. The CSS file (styles.css) itself will contain the styling of different elements in Listing 4. Listing 4. The external style sheet file contains the styling of each element. This targets

elements and makes them green. 1. p { 2. color: green; 3. font-size: 20px; 4. } The benefit of external CSS is that the styles can be reused across multiple HTML files. This method keeps code organized, reusable and consistent. Also, web browsers tend to cache external CSS files, which means that the styles are loaded only once and then reused for subsequent pages. This improves the speed and performance of web applications. In addition to external CSS files, you can use CSS media queries to further enhance usability across various devices. This brings an extra layer of flexibility to the stylesheets. For example, you can have a single media query that adjusts the layout and theming for mobile screens and apply it across multiple pages, ensuring a consistent and optimized user experience. In Listing 5. media queries begin with @media followed by an optional type. The media-type specifies the type of media (e.g., screen, print) a type of output device where the styles will be applied. The media-feature specifies the feature to test (e.g., min-width, max-height). Listing 5. Basic CSS media-query syntax. 1. @media media-type and (media-feature) { 2. /* CSS rules to apply if the condition is met */ 3. } 19 If the test conditions specified in the media-feature are met, the CSS rules under the query will be made active in the stylesheet (or only on the type that was specified). Just like your general CSS rules, media queries defined in an external stylesheet will be applied across all HTML files that link to it. One of the major advantages of using CSS is its universal compatibility with virtually all web browsers used in web application development. Unlike other styling methods like preprocessors, which need to be translated or compiled into browser-readable code, CSS works directly and does not require any additional steps to be functional [22]. While different developers may have their own unique approaches to using CSS, the plain vanilla styling language itself is widely accepted and understood across the development community. There are, of course, more advanced methods of creating CSS, but these advanced techniques often build upon the basic principles of vanilla CSS. For example, you can use preprocessors like Sass or Less, which allow for variables, nesting, and functions [24]. These tools compile down to standard CSS, which means that ultimately, the core language remains the same. CSS-in-JS libraries, such as styled-components or JSS, are another advanced approach, especially popular in JavaScript frameworks like React. These methods enable you to write CSS directly within your JavaScript code, offering dynamic styling options based on component state or props [22]. However, even with these advanced approaches, understanding the fundamentals of CSS is crucial for effective implementation. Additionally, there are CSS frameworks like Bootstrap or Tailwind CSS that offer pre- written, customizable CSS utility classes that can speed up development as developers can use readymade styles for different elements and components [25]. This also ties back to the use of design systems like Google’s Material UI or IBM’s Carbon Design System in development as we earlier discussed in Chapter 2 as CSS is often bundled with these ready-to-use design systems. It is also noteworthy to mention that not all applications rely on CSS for their theming and styling. While CSS is widely used in web development, there are alternative methods and technologies for designing the UI and layout of applications. For example, native mobile applications often use platform-specific frameworks and styling languages. 20 4. The Rise of ‘Dark Mode’ In recent years, the term ‘Dark Mode’ has gained traction in the realm of user interface design, serving both aesthetic and functional purposes. But what exactly is it, and why has it gained such a big following (as illustrated in Figure 12.)? As denoted by Eisfeld & Kristallovich [26] Dark mode is a UI option that reverses the default colour scheme, primarily using dark backgrounds with lighter text, icons and interface elements. It is also known as reverse polarity in some literature, and it is widely considered to be an emerging trend in the contemporary field of UI design. While being a relatively new UI personalization method for users, it has strong roots in the history of UIs, especially with CLIs (command line interfaces) as we mentioned in the early parts of Chapter 2. CLIs historically display white text-based command prompts on a dark background. Figure 12. Google Trends showing the search interest over time for ‘dark mode’. As Dark mode provides an alternative to the traditional ‘Light mode’, which typically features dark text on light backgrounds, many modern operating systems, applications, and websites now offer a Dark mode setting. Now this allows users to toggle between light and dark themes. Notable Dark mode implementations include Discord, Signal, YouTube, Outlook, Reddit and even Google Maps among many others. One notable example is MacOS’s implementation which can be seen in Figure 13. 21 Figure 13. MacOS light, dark and auto interface modes. Users are free to use any of the following options. This growing preference for Dark mode can also be seen in some polls; A 2020 study by Android Authority [27] shows that a significant 81.9% of its readers prefer using Dark mode across all applications on both their phones and desktops. While this statistic is compelling, it is worth noting that the sample is biased towards Android users and may not fully represent broader consumer preferences. Brage [28] on the other hand argues that many experimental and retro trends are currently emerging. Focusing her work rather on web design, researching brutalism, she mentions that trends are ‘unlikely to directly affect mainstream web design in its current state. Despite Brage’s predictions, Dark mode has seen substantial adaption after 2019 when about 92 popular digital applications started to offer their services in Dark mode as a response to the update of Apple’s and Android’s interface designs [29]. The list of Dark mode applications has since risen dramatically. Some have pointed out that the adoption of Dark mode stems from the fact that screen times have risen in the last decade. Especially after the COVID-19 pandemic in 2020, studies show that screen time has risen significantly: A study of 254 Canadian families with young children reported increased screen time in mothers, fathers, and children during COVID-19 at 74%, 61%, and 87%, respectively [30]. Moreover, a study conducted in China found that about 70% of 1033 participants spent more time looking at screens after the COVID-19 outbreak [31]. As the usage of Dark mode is also rising, the accessibility and comfort provided by Dark mode becomes particularly relevant. Given the adverse effects of prolonged exposure to blue light, such as disrupted sleep cycles, increased eye strain, heightened stress, and diminished focus [32], many users might be turning to darker theming as a preventative measure. This might also be the reason why developers tend to use darker themes in their 22 development environments, VSCode for example, a popular code editor, has a dark theme by default (see Figure 14.) Figure 14. VSCode Editor with a dark theme applied (‘One Monokai’). Notice the syntax colour highlighting. 4.1 Dark Mode Implementation Implementing Dark mode can be done in various ways. For demonstration purposes this thesis presents a common and simple way web applications can implement Dark mode by utilizing a combination of HTML, CSS, and vanilla JavaScript. Listing 6. HTML document as a base. Note the use of an external style sheet and the inclusion of a script tag. A toggle button for the theme switch is also included. 1. 2. 3. 4. Dark Mode Example 5. 6. 7. 8.

9.

Hello reader!

10.

This is a simple dark mode example.

11. 12.
13. 14. 15. 16. 23 Listing 7. Stylesheet for the theme. Comments added for clarification. Note the hexadecimal colour codes for each property and the use of CSS variables. 1. /* Default light theme */ 2. :root { 3. --background-color: #ffffff; 4. --text-color: #000000; 5. } 6. 7. /* Dark theme */ 8. [data-theme="dark"] { 9. --background-color: #000000; 10. --text-color: #ffffff; 11. } 12. 13. body { 14. background-color: var(--background-color); 15. color: var(--text-color); 16. transition: background-color 0.3s ease, color 0.3s ease; 17. } 18. 19. button { 20. padding: 10px; 21. margin-top: 20px; 22. } Listing 8. JavaScript ‘script.js’ for the theme switch functionality. 1. // Waits for the DOM to be fully loaded 2. document.addEventListener('DOMContentLoaded', () => { 3. // Grabs the toggle button element by its ID 4. const toggleButton = document.getElementById('toggleButton'); 5. 6. // Event listener to the toggle button 7. toggleButton.addEventListener('click', () => { 8. // Retrieves the current theme attribute from the HTML root 9. const currentTheme = document.documentElement.getAttribute('data-theme'); 10. 11. // Check if the current theme is 'dark' 12. if (currentTheme === 'dark') { 13. // If so, set the theme attribute to 'light' 14. document.documentElement.setAttribute('data-theme', 'light'); 15. } else { 16. // Otherwise, set the theme attribute to 'dark' 17. document.documentElement.setAttribute('data-theme', 'dark'); 18. } 19. }); 20. }); 24 In this example, we first define the HTML document in Listing 6, here we have some basic tags, such as a title, header, paragraph, and a button for the Dark mode toggle, which is often present in Dark mode implementations. The external style sheet is defined, and a script tag is also included to load external JavaScript, which adds the actual functionality for the toggle switch. In the style sheet Listing 7., we define the root style. The :root pseudo-class is a way to declare global variables that can be accessed anywhere in the stylesheets. Here, -- background-color and --text-color are custom properties set to a default light theme with a white background and black text. The selector [data-theme="dark"] targets the HTML root element when its data-theme attribute is set to "dark." This overrides the default light theme variables with the inverse of the default light theme. To style the body of the document we use CSS variables set earlier to apply styles to the body. The var(--background-color) and var(--text-color) lines refer back to the custom properties. The transition line ensures that when the theme changes, the background and text colours transition smoothly over 0.3 seconds. The button also has some rudimentary styling with padding and margins set. The script section, marked as Listing 8, begins by waiting for the DOM (Document Object Model) to fully load. The DOM acts as a bridge between web pages and scripts or programming languages. It essentially creates an in-memory representation of the structure of a document, such as the HTML that makes up a web page [33]. In practical terms, the DOM allows for the dynamic manipulation of content and structure, which enables us to add extra functionality to a page. Waiting for the DOM to load before executing scripts is a standard practice in web development. This ensures that all elements referenced in the script are available for manipulation. After the DOM has loaded, the script is active. Pressing the button, the script locates the toggle button in the HTML by its id (toggleButton). On line 7. of the JavaScript, an event listener is added to the toggle button to listen for any user clicks. If a click is detected, the code checks what the current theme is by looking at a data-theme attribute on the document's root element. Depending on the current theme, it toggles between light and dark by setting the data- theme attribute appropriately. The transition applies and the theme switches successfully. The final example site and the different states are displayed in Figure 15. 25 Figure 15. The two different theme states of the example web application shown in a web browser. Note the toggle button, which is usually present in Dark mode implementations. Along with the basic the CSS implementation, modern browsers also support the prefers-color-scheme media query. This can be used in conjunction with the user’s operating system theme, as it fetches the info from the user’s OS. This query enjoys support by major browsers, including Chrome 76+, Firefox 67+, Chrome Android 76+, Safari 12.5+ (13+ on iOS), and Samsung Internet Browser. It does not support Internet Explorer [34]. Listing 9. Automatically fetch the theme preference using a special CSS media query 1. /* Dark Theme media query */ 2. @media (prefers-color-scheme: dark) { 3. body { 4. background-color: black; 5. color: white; 6. } 7.} While the media query option is simple and easy to implement, many still opt for different storage options to improve user experience, especially if users want to customise their web experience irrespective of their OS theming options. Many sites tend to store the preference for dark or light mode so that it will be applied consistently throughout the site and on subsequent visits. To do that, we can save the user’s choice to the localStorage object when the theme is toggled. The localStorage object stores 26 data with no expiration date in the browser. The data is not deleted when the browser is closed and are available for future sessions [35]. Cookies are also suitable for this task. Cookies are text files with small pieces of data that are usually used to keep track of your interactions with a website. By using cookies, we can enable functionalities like remembering login status, preferences, or items in a shopping cart [36]. We can utilize this functionality for Dark mode preferences as well - for instance we can use JavaScript to check for a cookie with a Dark mode variable when the page loads and set a new cookie when the toggle button is clicked. In addition, if a website has user accounts and a database, this also a good and robust option to save theme preferences. We can store those preferences to the database where user account details are stored. Then, when the user logs in, fetch the theme info from the database and apply it to the page [36]. This of course requires the definition of a user schema which includes a theme field in the database. As we have seen, there are various approaches to implementing and storing Dark mode preferences. Beyond these storage methods, there are also ways to enable Dark mode without changing any settings on the website itself. Browser plugins can automatically apply a dark theme to various websites, irrespective of whether they offer a built-in Dark mode feature. Figure 16. Dark Reader browser extension dynamically changing Wikipedia’s theming to dark. Notice how the logo is also in negative polarity. (https://darkreader.org/images/darkreader-screenshot-v5-preview.png) 27 A good example is Dark Reader [37], which dynamically creates a dark theme for almost any website on-the-fly. It analyses the CSS of a website and adjusts colours, brightness, and contrast to generate a dark theme that maintains the overall look and feel of the website. While these plugins may not always be perfect and could potentially cause some elements to be displayed incorrectly, they still do a decent job with most sites, of course depending on the complexity of elements and visuals. At its core, the plugin manipulates the CSS of a web page to achieve its Dark mode effect. This is done through injecting custom CSS rules that override the default styles of a site. There is also some added quality of life additions, such as different toggles for different sites and further personalization as can be seen in Figure 16. The existence of Dark Reader tells us that there is a growing demand for customizable and user-friendly dark theming options across various platforms and applications. While not everyone knows of its existence, it is a good case study on how Dark mode users want to use dark themes despite not every page providing options or toggles for it. It also provides accessibility for older websites that are not maintained or not updated to use a Dark mode toggle. 4.2 Previous Research and Related Work Despite Dark mode’s rising popularity and adoption, research on the subject remains relatively young and underexplored. This is of course to be expected as Dark mode entered real mainstream in 2019. However, it presents challenges for new research as there is little foundation for new inquiries on the subject. Previously we glanced over some studies, namely the Android Authority study [27] and the literature review by Eisfeld & Kristallovich called the ‘The Rise of Dark Mode’ [26]. Eisfeld & Kristallovich’s literature review finds that Dark Mode's popularity stems from various factors. On a practical level the review tells us that Dark Mode is easier on the eyes, especially in poorly lit environments or during nighttime use. The review emphasizes that this added level of comfort significantly enhances user satisfaction by giving people more control over their device's appearance. The literature review also reveals that Dark Mode can extend battery life, but this benefit is mainly for devices with 28 OLED screens. On these screens, black or darker areas (i.e., pixels) can be turned off thus saving energy and battery life. The review also highlights that using darker theming maybe more environmentally sustainable as a result. A study by Dash and Hu [38] also reaffirm the lower power draw when using Dark mode. Health-wise, Eisfeld’s & Kristallovich’s review [26] notes that as screen time increases, so does the incidence of eye-related problems. Dark Mode emerges as a minor solution to this, providing a more comfortable visual experience for users with long screen times. However, the review does acknowledge some limitations in its findings, such as the brief timeframe for the research and the impact of the Covid-19 pandemic. Despite these constraints, it serves as a valuable foundation for understanding why Dark Mode might not just be a trend but a feature likely to endure to the long future. Other Dark Mode theming research is quite diverse, most often focusing on specific applications of Dark mode or experimental studies if Dark mode is beneficial in some way for its users. For instance, Pedersen et al. [39] investigated whether Dark mode affects productivity or is merely an aesthetic choice, suggesting that there is room for further exploration on its functional benefits. Figure 17. Virtual keyboards used in Pedersen et al. [39] experimental study. 29 The researchers designed a controlled experiment involving a text entry task that was visually intensive. Participants used a virtual keyboard with an unfamiliar layout to further isolate the impact of the display mode (see Figure 17.). Interestingly, their results found no significant differences between Dark mode and light mode in both productivity and error quantity. The study by Pedersen et al. [39] is an important counterpoint to the sentiment that dark theming is universally "better." Instead, it suggests that the preference for Dark mode may be more rooted in aesthetics or individual user comfort rather than measurable improvements in efficiency or accuracy. Although the number of participants (16 students) was rather small to make larger conclusions about the influence of Dark mode, it is still an interesting finding and provides good context for further research. Corcoran and Corcoran [40] explored the benefits of Dark mode in the context of astronomy, suggesting that it could have niche applications as well. They make an argument for incorporating Dark mode themes into astronomical journals. While Dark mode is commonly discussed in the context of everyday applications or coding environments, this paper focuses on its utility in a more specialized, scientific setting. The authors suggest that implementing a Dark mode option in scientific journals could have several benefits, including reduced power consumption on OLED devices, lower risk of screen burn-in, improved figure visibility, and colour schemes that are more accessible to those with colour vision deficiencies. Additionally, Corcoran and Corcoran [40] make an interesting point about rhodopsin loss - a protein crucial for vision in low-light conditions - stating that Dark mode could be beneficial for those who frequently observe astronomical phenomena. This is an interesting angle and by using this observation, they did some community surveying and estimate that a substantial portion, around 35% to 42%, of the astronomical community would welcome a dark theming change in their journals. While astronomy might a be a niche application, the study conducted by Sethi and Ziat [41] had broader scope regarding Dark Mode. They questioned whether light-on-dark displays offer measurable large advantages to users. Their paper delves into the psychological and physiological impacts of using Dark mode, specifically looking at its effects on cognitive load. The cognitive load theory, coined by John Sweller [42], refers to the amount of information our working memory can process at any given time. 30 Overloading the short-term memory reduces the effectiveness of teaching and learning. The theory essentially argues that educational content and settings should be designed to minimize mental strain, as the objective of learning is to successfully transfer new data from our short-term to long-term memory [42]. Unlike most other studies that tend to focus on visual comfort or energy efficiency, Sethi’s and Ziat’s [41] paper uses eye-tracking technology and emotional response measurements to understand how display polarity affects both younger and older adults during writing and search tasks. They found that older adults experienced a higher cognitive load when using Dark mode, especially in bright environments. This was observed through increased search times and larger pupil diameters, explained to be indicators of mental effort. For this demographic, light mode was not only easier on the eyes but also less mentally taxing, leading to more positive emotional states. In contrast, younger adults showed a preference for Dark mode but mainly in dim environments. Interestingly, their inclination towards Dark mode was not due to any physiological benefit but was more rooted in aesthetics. The paper emphasises that the effects of Dark mode can be subjective and may vary based on age and the lighting conditions in which the device is used. Older adults appear to prioritize minimizing mental fatigue, leaning towards light mode especially in brighter settings. Younger adults, however, seem to favour the look and feel of Dark mode, even if it does not offer any cognitive advantage [41]. Overall, the research suggests that user age and environmental factors play significant roles in determining the effectiveness and desirability of Dark mode. This is also looked upon in this thesis in later chapters. On the augmented reality front, Kim et al. [43] delved into the effects of Dark mode on visual fatigue and acuity, particularly in optical see-through displays. In the study the researchers focus particularly on optical see-through head-mounted displays (OST- HMDs). They conducted a human-subject study to evaluate Dark mode's impact on user tiredness when using these helmets. Their results revealed significant benefits of using Dark mode on OST-HMDs, especially in terms of visual comfort and sharpness, and noted that user preferences for Dark mode were influenced by the lighting conditions of the physical environment they were in. Of course, given the specialized context of OST-HMDs, the findings may not be directly applicable to the more conventional uses of Dark mode on standard computer screens or 31 mobile devices. This is a reminder, that the effectiveness and utility of Dark mode can vary significantly depending on the specific technology and location in which it is used. Specifically, the location aspect is later analysed in this thesis. From head-mounted displays to online shopping, Nazeriha and Jonsson [44] looked at the potential impact of Dark mode on user trust in E-commerce websites. In the study Nazeriha and Jonsson [44] focus on how the use of dark theming on E-commerce websites affects the initial trust a visitor may place on the website. Their study, which uses a model by McKnight et al., categorizes initial trust into various components including disposition of trust, institution-based trust, trusting belief, and trusting intention. The results showed that participants generally rated light-themed versions of websites higher in terms of graphic design, which in turn led to higher trusting belief and intention. It is important to note that the study found no significant difference between users who normally use Dark mode daily and those who do not, which suggests that the lower trust ratings for dark-themed websites may not simply be a matter of familiarity or preference for light themes. Interestingly, the study [44] suggests that the lowered trust in dark themed versions of websites could be due to the implementation method. Specifically, Dark mode was directly implemented by software in the study, which may have led to existing images and design elements not being fully compatible with the dark theme. As a result, the authors recommend that if developers or designers want to implement Dark mode, it should ideally be part of the website's initial development or require a comprehensive redesign, rather than being added later through a plugin. This is an interesting suggestion as many websites tend to implement Dark mode later in their development, especially if the website was designed a long time ago before the Dark mode trend. Also, the aspect of application genre specificity and the angle of poor implementation is also looked upon later in this thesis. Other works have investigated the accessibility implications of Dark mode and design guidelines. One notable study by Buchner [45], conducted as early as 2009 and which is brought up often in ergonomics and Dark mode discourse, addresses the effectiveness of positive and negative polarity displays (i.e., light, and dark mode displays). The study 32 designed an experiment where text-background polarity and display luminance were manipulated independently. Surprisingly, when the overall display luminance was equivalent for both positive and negative polarity, no significant advantage for positive polarity was observed. Instead, what mattered most was the level of display luminance: higher luminance led to better reading performance, irrespective of polarity. This is thought to be because the eye receives more light with higher levels of luminance, allowing for a clearer and more focused visual image, which in turn could facilitate easier character recognition and text comprehension [45]. The findings point to an interesting aspect: the importance of high luminance levels for text in Dark Mode to enhance readability and user comfort. It suggests that the focus should not just be on the aesthetic appeal or battery-saving benefits of a dark background, but also on the readability of the text itself. This insight adds good context for our understanding of Dark mode, which is why readability itself should be looked upon in further detail when inquiring Dark mode’s design and implementation. In addition, some studies also support this positive-polarity advantage, saying that light mode users tend to have better response times especially in under glance-like reading conditions. This was particularly highlighted by Dobres et. al. [46] where their results indicate that legibility thresholds, quantified as the amount of time needed to read a word accurately, were highest for the negative polarity configurations under dark ambient illumination. Conversely, the positive polarity conditions under dark ambient illumination and all conditions under bright illumination demonstrated significantly reduced thresholds, indicating greater legibility. These results align with the hypothesis that the "positive polarity advantage" may be due to brighter illumination causing the pupils to contract, which in turn reduces optical aberrations as light enters the eye. According to the researchers, these findings could have significant implications for the automotive industry, where drivers frequently glance at their vehicle's interface or dashboard. In contrast, the impact might be less pronounced for basic monitor or mobile usage. Interestingly, using light mode with high brightness levels could strain the eyes more compared to using negative polarity or Dark mode. LG Electronics argue that a balanced approach to brightness and contrast is essential, as both excessively high and low levels can be eye-straining [47]. Apple also 33 recommends using Dark Mode to increase comfort in low-light environments in their developer documentation [48]. The body of work we examined, shows that the landscape of Dark Mode research is quite varied and diverse while still being very young. From practical concerns like power consumption in mobile devices to psychological constructs like trust and cognitive load, the landscape of Dark Mode research is as complex. All these findings support the initial literature review by Eisfeld & Kristallovich [26] and of course expand upon that. The next chapter will shift focus to our own research and present a new survey, which aims to understand why users pick a certain mode for their interface and what is driving this preference. This survey will incorporate elements from the body of literature we have discussed here, spanning areas like privacy, battery-saving, readability, accessibility, aesthetics, location, and time. 34 5. Dark Mode Survey Design The previous chapter offered an extensive review on the basics of Dark Mode, implementation methods and the existing literature and research on Dark Mode theming, exploring its impact from multiple different perspectives. This background information provides context for this chapter as we shift focus to our own research, presenting a survey designed to explore why users opt for dark theming in their interface preferences. We will first explain the research methodology behind the survey, explaining what methods are used and what are the driving background hypotheses for the formulated questions. Then we will move to how the data was collected explaining what platform was used and where the survey was circulated. After all of this, we will review the outcome in the subsequent chapter and analyse the results and implications. 5.1 Research Methodology To answer our initial research question of what factors motivate users to choose a different theme or change to a Dark mode, we have designed a questionnaire survey that integrates both qualitative and quantitative methods – albeit heavily relying on quantitative closed questions which provide ordinal data on theme preference selection. You may view the final questionnaire in the appendix section A. By "quantitative," we mean the use of structured questions that offer predetermined options for respondents to select from, allowing for easily aggregable and analysable data. Closed questions also provide large amounts of research data for relatively low costs and makes the answering threshold for respondents lower [49]. These are in the form of Likert scale questions and multiple-choice queries in this survey. This will help in discerning broader patterns and trends in user preferences for Light or Dark mode preferences. We will later browse through the actual results. The survey also has some open questions to allow respondents to give more in-depth answers, which results in non-numerical data that provides context to our survey’s quantitative findings. By “qualitative” we mean the use of questions that are open-ended, inviting participants to freely express their thoughts, experiences, and reasons for their 35 theme preferences. Qualitative research analyses data from direct fieldwork observations, in-depth, open-ended interviews, and written documents [50]. Some of the questions were hard to formulate to simple one-off questions, which is why added context of open- ended questions were required. These open-ended questions might also provide some additional insight to why some people choose a particular theme which was not considered in the design phase of this survey. In designing the questionnaire survey, the questions are rooted in a set of background hypotheses that are believed to be influential in determining why users opt for Dark mode or Light mode. These background hypotheses were formed using the literature and analysis existing in the field. Here are the factors used in the survey: 1. Age: Users with high age are more likely to not use Dark mode. 2. Screen Times: Users with high screen time usage are more likely to use Dark mode. 3. Readability: Users tend to switch to Dark Mode to enhance text readability and contrast of text elements (emojis, syntax highlighting, formulas etc.). 4. Privacy: Users are more likely to choose Dark Mode for increased screen privacy in public settings. 5. Aesthetics: The overall visual appeal and aesthetic of Dark Mode is a significant factor influencing user preference and choice. 6. Productivity: Users believe that their chosen theming mode increases their focus and productivity (this is asked indirectly in the work-related part of the questionnaire). 7. Location and Time: Users toggle between modes depending on their direct physical environment and the time of day. 8. Battery-saving: Users opt for Dark Mode to conserve battery life on OLED and AMOLED screens (commonly found on mobile devices). 9. Application Specificity: Users prefer different modes depending on the specific application or task they are engaged with. 10. Accessibility: Users prefer Dark Mode for a more comfortable viewing experience and to reduce eye strain. Additionally, users with eye disabilities or impairments prefer Dark mode to reduce glair and to improve eye comfort. 36 As mentioned, these hypotheses form the basis of the questionnaire, as all questions are derived from aforementioned factors. It is also easier to group the answers depending on how well they relate to these individual claims. You can see the grouping of questions in the questionnaire (appendix A.). In addition to the hypotheses, this questionnaire employs conditional questions to be as user-friendly as possible. For instance, by answering “No” to some questions, the questionnaire will skip these parts entirely and present new section. There are multiple examples of this, as this reduces the time frame for participants. Multiple hypotheses need to be formulated in such a way that they can be easily and promptly answered without any additional questions if some aspects do not apply. Also, the questionnaire attempts to track whether a person is an ‘active user’ of Dark mode by asking on how active respondents are in seeking out and utilizing Dark mode options in different digital interfaces. There are of course Dark mode ‘enthusiasts’ and we want to track these correspondents to see what are the driving factors behind their theming preferences as well. There are also open questions for suggestions regarding Dark mode and theming options in general if the correspondent feels the urge to tell something more the questionnaire does not cover. This might present valuable qualitative insight as well. Questions were formulated in English language only to ensure consistency and to mitigate any potential misunderstandings that could arise from translation errors. The English language was chosen as it is widely considered the lingua franca of online platforms and academic research. Finnish translation was considered but was ultimately left out because of time constraints and the added workload for the researcher. 5.2 Data Collection Method The questionnaire itself was first drafted on paper and then later formulated to Google Forms after some initial clean-up work. Google Forms was chosen for its provided accessibility and ease of use for both the respondents and the researcher. After finalizing the questionnaire on Google Forms, the survey link was distributed through online platforms such as Reddit and email links to different faculty members of 37 University of Turku. These platforms were selected to target a diverse audience of various ages, occupations, and interests to ensure a wide range of users. Google Forms automatically collected and stored the data. Collected data is encrypted and stored on Google's servers. No emails were collected to ensure respondent anonymity. In addition, no data was disclosed to any third parties. Access and edit control to the survey was only permitted to the creator of the form. For added validity, the survey was initially piloted with a smaller group of participants of my local contacts to identify any problems in question formation. Feedback from the pilot test was used to refine and revise the questionnaire before the final distribution. In terms of duration, the survey was open for 21 days (10.10- 1.11.2023) to allow for sufficient number of responses. No reminders were sent out, people simply answered as they pleased. Google Forms also auto-saves the answers if someone wants to resume their survey. The survey was circulated using the short Google Forms link and a QR code (short for quick-response code) in Figure 18. with people who I interacted face to face for added convenience. They could also resend the code for other people if they so pleased. At the end of the collection period, the data was exported from Google Forms to a spreadsheet for cleaning and analysis. Any incomplete or inconsistent responses were removed during the data cleaning phase. This was to avoid skewing the results and ensuring that the data was reflective of genuine user experiences and opinions. Figure 18. Custom QR code used in the Dark mode preferences survey to easily lead people to Google Forms. 38 6. Results and Analysis This chapter examines the findings extracted from the collected data and providing an extensive analysis of user dark theme preferences. We begin by outlining the demographic composition of our respondents, their general screen time habits, and their predispositions towards dark theming options. Following that, we move to interpret the qualitative and quantitative data to understand the nuances of these user preferences. The overview section will present the dataset and answers in order. The dataset all in all consists of a total of 98 responses, which were collected between October 10 and November 1 of 2023. The complete raw dataset along with timestamps can be found in the appendix B. section of this thesis. 6.1 Overview Starting the overview, we must see the demographic distribution of the answers. The demographic questions were as follows: 1. age, 2. gender, 3. occupation, 4. daily screentime and 5. the familiarity of dark theming options. These basic questions provide context for interpreting the survey responses as well can reveal important trends and differences in preferences and behaviours among different groups, for instance age or screentime groups. These will be inspected further in the comparison section. Out of 98 respondents most respondents (38,8%) were in the age group of 18-24 years old with second largest group being 25-34 years old (32.7%) and the third largest group being 35-44 years old (12.2%). The youngest (<18) and the senior (65+) demographics were minimally represented as the fewest responses were with Below 18 and 65 and above age groups, with only 1 answer for under 18 and 2 answers for 65 and above respectively. Group of 45-54 gathered 8 (8.2%) and 55-64 had 5 responses in total (5.1%). All in all, less engagement was met with the older age spectrum, which skews the results to a degree. We will be conversing about this later in this thesis. The entire age distribution can be seen in the age chart in Figure 19. 39 Figure 19. Question 1, Age distribution of respondents. For the second demographic question we had gender. Gender distribution was predominantly male with 63 respondents identifying as male (64.3%). This predominance is reflective of the gender distribution commonly seen in tech-related fields and surveys [51], suggesting that while our findings are informative, they may be more indicative of male user experiences and perspectives. Female distribution was 29 (29.6%). Additionally, a small yet important segment, representing 6.1% of the population with 6 respondents, chose to maintain privacy by selecting the 'Prefer not to say,' option in the survey. The gender distribution can be seen in Figure 20. Figure 20. Question 2, Gender distribution of respondents. 40 The third demographic question was occupation. This question did not make the specific distinction between the line of job or what field a student was studying. It only asked whether someone was a student, employed, unemployed, self-employed, or retired to give us a little more context about our respondents. Respondents could choose all that would apply, so some were students and employed at the same time. Majority of our respondents were students with 63.3% respondents choosing that. This of course ties with the age grouping of our survey, as majority of young respondents happen to be students as well. Second largest occupation was ‘Employed’ with almost half of all respondents (48%) choosing it. The entire occupational responses can be seen in Figure. 21. Figure 21. Question 3, Occupational distribution of respondents. Respondents could choose multiple occupations. The fourth demographic question was related to screen times and this one was crucial, as previous research has shown Dark mode being a response to rising screen times. The survey revealed that the majority of participants, 38.8%, reported a screen time of 7-9 hours per day, indicating a significant portion engaged with digital screens. This is followed by 28.6% of respondents who spend an even longer duration of 10-12 hours. A substantial 18.4% indicated a moderate use of screens, falling within the 4-6 hour range. Notably, a smaller portion, 9.2%, reported more than 12 hours of screen time, which shows a high engagement in digital activities. Only a minimal 5.1% reported 1-3 hours of screen usage. None of the respondents reported less than 1 hour of screen time, which clearly shows us the role that digital devices play in modern life. The screentime distribution as a whole can be seen in Figure 22. 41 Figure 22. Question 4, Screentime estimation distribution. The final demographic question was simply the familiarity aspect of dark mode or dark theming options. We wanted to see how well the dark mode term has penetrated the general public in these recent years when it has become widely available in different UI’s and platforms. The data is undeniable, as almost every one of the respondents knew what dark theming was. 96.9% of respondents answered that they are familiar with the concept of 'Dark Mode', dark theme or negative polarity in user interfaces. It was clear that people knew what they were engaging with and what the survey topic is. The distribution can be seen clearly in Figure 23. Figure 23. Question 5, Familiarity distribution. 42 Moving from the general demographic questions to preference questions, we first asked whether a user tries to actively use Dark mode across all possible platforms and application where it is available or not. We wanted to scope the people who are Dark mode enthusiasts or ‘active users’ and see why they are likely to seek out the option in the first place. Out of 98 responses 73,5% are active users – they try to actively seek out Dark mode toggles everywhere. The remainder of respondents of 26.5% are impartial, they do not try to seek out these options as can be seen in Figure 24. We will later explore if there is a demographic aspect that might affect this activity. Figure 24. Question 6, Active preference for Dark mode distribution. Whether a respondent answered yes or no to the active preference question, they were presented with an additional conditional question. For users with an active preference, they would select predetermined aspects of Dark mode that would motivate them to toggle it on. There was also the ‘other’ section if a respondent wanted to specify some other motivating factor or aspect. If a respondent answered no to the active preference, they would answer why they do not prefer it in all use cases. For the active preference users, the largest motivator was reduced eye strain or glare (90.3%) along with aesthetic reasons (76.4%). Readability was the third largest motivator (61.1%) according to the active users followed by consistency with application and sites (41.7%), which is also an aesthetic choice. In the minority were the selections of focus and productivity (30.6%), direct environment (meaning the conditions you commonly use your devices) (26.4%), battery saving (26.4%) and finally privacy (13.9%). Some 43 other responses pointed out the use OLED screens as this extends its lifespan when the pixels are off. Also, one respondent claimed to use Dark mode for migraine and epilepsy reasons, which can be attributed to the disability section of this section. No other disability or visual impairment motivators were recorded. All the selections can be seen in Figure 25. Figure 25. 6A, Active Dark mode users’ motivating aspects and factors. In turn, what about people who tend to switch or do not use Dark mode actively? Their answers were more varied, having more ‘other’ responses and opinions typed out. However, a large trend among these users was their personal preference which tends to vary depending on different application, device, or site they are on (53,8%). In addition, these non-active Dark mode users, prefer that some activities are better suited for light mode (30,8%), readability is improved in light mode (23.1%) and that some platforms simply implement dark mode poorly (23.1%). Direct environment has an influence (15.4%), affecting focus and concentration (7.7%), aesthetic preference (7.7%) and not trusting Dark mode pages with a single response (3.8%). The additional responses were interesting. Many said that switching is a hassle and they simply do not bother – their stance was ambivalent to the subject matter and the reasoning was laziness, default options being good enough, no strong opinions or no concern at all. All of the non-active users’ responses can be seen in Figure 26. 44 Figure 26. Non-active Dark mode users’ reasoning why they do not actively seek out dark mode options. Moving forward, we arrive at the hypothesis-based question sets. The background hypotheses were introduced in the previous chapter. Using these background hypotheses, we formed question sets that each touched upon a potential motivator for interface selection. The first one we introduced was readability – do respondents feel that they find text easier to read when using Dark mode or a darker theme. Majority of respondents responded with a neutral stance (50%), while 38,8% responded that Dark mode helps with readability. 11.2% responded with no, they do not find text easier to read when viewed in dark theme. The results can be seen in Figure 27. Figure 27. Question 7, Dark mode text readability distribution. Majority favouring a neutral stance. 45 Results show that there is a small incline that readability might motivate to people use dark mode, but majority are neural regarding it. Results could differ if we had more people in the higher age brackets as previous research shows that older people tend to prefer lighter themes when reading [41]. In addition, respondents who answered ‘Yes’ were presented with additional two questions regarding readability. We wanted to see if there are any specifics why readability is improved for these individuals and is it dependent on the content people view. We first asked if dark mode improves colour and text highlighting as this often referred in official documentation of Dark themes, such as Apple’s developer documentation [48]. Majority of respondents reaffirm this claim with 65,8% responding with a ‘Yes’. The distribution of this highlighting question can be seen in Figure 28. Figure 28. 7A, Additional readability question regarding the highlighting aspect of Dark mode. Next, we asked does the dark theme preference apply to all types of content or only some specific types of content. This also ties with the application specific question later in this thesis. Majority think that is preference is universal (81.6%). However, there was quite a lot of variances with ‘Other’ responses, as respondents wanted to specify their preference. Many of these answers were related to coding and syntax highlighting – a common use case for dark theme. Some also prefer to use it in books, articles and blogs, platforms where text is the primary medium. Some also pointed out that if the overall design of a site uses a particular theme, it might affect their choice. The results are seen in Figure 29. 46 Figure 29. 7B, Additional readability question regarding types of content. Note the responses with specific content types. The next hypothesis-based question was privacy. As Dark mode often reduces the amount of light emitted from a device screen, there is a privacy angle related to the use of Dark mode. Some users have reported that they use Dark mode primarily because they do not want to draw attention to themselves, especially in darker environments, which is why we formed some questions around this. However, most users did not even consider this to be even a motivator for Dark mode usage as a majority (69,4%) of respondents replied with ‘I haven’t thought about it’. Only a few respondents replied with ‘Yes’ (15,3%) and ‘No’ with the same ratio (15,3%). The privacy distribution can be seen in Figure 30. Figure 30. Question 8, Privacy related question distribution. 47 In addition, we also asked (in 1-5 Likert scale) if respondents thought that Dark mode might protect your privacy. The majority of responses were centered around the neutral point of the scale with 37,8% choosing ‘'3’. This was followed by '4', selected by 29.6% of respondents, suggesting a mild agreement that Dark mode might protect your privacy. Meanwhile, '2' was chosen by 20.4%, leaning towards a mild disagreement. Notably, the extremes of the scale were less frequently selected, with only 10.2% opting for '1', indicating strong disagreement, and 2% choosing '5', indicating strong agreement. This distribution suggests that most respondents held moderate views on the privacy aspect of Dark mode as seen in Figure 31. Figure 31. 8A, Dark mode privacy Likert scale results - 1. Strong Disagree and 5. Strongly agree. As most responses were in the middle of the scale, it suggests to us general ambivalence or a lack of strong opinion about privacy as a key motivator for Dark mode usage. This ambiguity might highlight the need for further investigation or more targeted questions to see how people view privacy and Dark mode in conjunction. Carrying on, the next question set relates to aesthetics. We wanted to see how aesthetics impact the choice of dark theming, but we needed to make the distinction between functional and aesthetic motivators as previous studies often highlight the functional aspects of Dark mode. Aesthetics could be equally pivotal but not as quantified. The initial question in this segment was determined the path of subsequent questions. We asked respondents, ‘If you use Dark Mode, is your choice to use Dark Mode mainly influenced by its aesthetic appeal rather than any functional benefits?’ The responses 48 revealed a significant inclination towards a balanced view, with 61.2% of participants selecting ‘Both equally’, indicating that aesthetic appeal and functional benefits are of equal importance. Notably, 15.3% chose ‘Only aesthetic appeal’, and an equal percentage (15.3%) selected ‘Only functional benefits.’ Only 8.2% of the respondents indicated that they do not use Dark Mode at all. The first question distribution can be seen in Figure 32. Figure 32. Question 9, Initial aesthetic question distribution. Furthermore, respondents who answered, ‘Both equally’ and ‘Only aesthetic appeal’ were presented with additional 3 questions related to aesthetics of dark theming. The first question was related to what aesthetic elements are most appealing to these respondents (as seen in Figure 33.), where ‘Color contrast’ (68%) and ‘Visual simplicity’ (66,7%) rose to the top with most picks. This suggests that many users appreciate the clean and uncluttered look that dark themes can provide or influence. Many also chose ‘Gives a modern or cool vibe’ (52%) indicating that the contemporary and stylish connotations of dark mode are significant drawing factors. 'The sense of focus it brings to content' was also a notable pick, with 49.3% of users selecting it, reflecting the perception that dark theming options can enhance content readability and focus – this of course ties back into the readability motivator which was previously discussed. Only 26,7% chose ‘How it complements other colors on the screen.’ This suggests that while Dark Mode is seen as beneficial for contrast and simplicity, its role in a broader colour scheme might not be its strongest attribute according to these users’ preferences. 49 Figure 33. 9A additional aesthetic elements question distribution. The second additional aesthetic question was related to customizability, namely if respondents have customized the default Dark mode settings for aesthetic reasons. The results can be seen in Figure 34. The majority, 56%, answered 'Yes', indicating an active involvement in tweaking and personalizing the dark theming settings to align with their aesthetic preferences. This suggests to us that respondents who prefer aesthetics want to also tailor their UIs to fit their personal tastes. To them visual comfort is of high importance. Figure 34. 9B additional aesthetic question about customizability. On the other hand, 33.3% of the respondents stated 'No', suggesting contentment with the default settings or possibly a lack of interest in customization. Only 10.7% of participants 50 were not aware that they could customize their theming, revealing a gap in user knowledge about the capabilities of interface personalization. While these responses were in the minority, this might reveal an opportunity for developers and designers to make customization features more apparent and accessible. In turn, a high rate of customization could also indicate a need for improved default design or more flexible options in user interfaces. Moving on, the third aesthetics related question asked our respondents how overall important the aesthetics in their digital interfaces are. This question was in a Likert scale, ranging from 1 (Not Important) to 5 (Very Important). The results can be seen in Figure 35. Figure 35. 9C additional aesthetic question about the overall importance of aesthetics in digital interfaces. The results revealed a clear inclination towards recognizing aesthetics as an important factor. Notably, no respondents selected ‘1’, indicating that aesthetic appeal holds at least some level of importance for all participants. ‘2’, suggesting a lower importance of aesthetics, was chosen by 8% of respondents. The middle option, ‘3’, was selected by 24% of respondents, showing us a moderate importance of aesthetics. This suggests that while these users acknowledge the role of aesthetics, it might not be the primary driver especially for Dark mode usage. A significant 38.7% of participants rated aesthetics as '4', showing a strong inclination towards valuing aesthetic appeal. This is further reinforced by the 29.3% who chose '5' being very important. The results show us that 51 aesthetics are a major consideration when influencing user interaction. Especially when taken into consideration the high number of ‘Both equally’ answers in the initial aesthetic question, the results imply that the choice of Dark mode are indeed driven not just by its functional benefits but also by its aesthetic qualities. Proceeding on with the rest of the motivator specific questions, we have productivity as a driving factor. Here we first present all respondents with a primary use case question, where we ask if users use devices mainly for productivity and if they do, do they prefer to use Dark mode. The results of this query can be seen in Figure 36. Figure 36. Question 10, productivity related initial question. The results show that a large portion of users lean towards Dark mode for productivity. 53.1%, affirmed that they use Dark mode if they conduct productivity related task such as work, study or hobbies. This finding suggests that over half of the respondents might associate Dark mode with a work or productivity context. Additionally, a significant 36.7% of participants reported using both modes, depending on the task at hand. This suggests that the choice of Dark or Light mode may vary based on specific tasks, the nature of the work, or even the time of day. We will inspect these aspects later. A smaller segment of 10.2% indicated they do not prefer Dark mode for productivity. This group may find Light mode or traditional settings more suitable for their work-related tasks. For people who responded with ‘Yes’ or the ‘Both, depending on the task’ options additional questions were presented. These additional questions query how Dark mode 52 might affect focus or the amount of work that will be carried out. These questions are of course an individual’s own personal experience and not empirical test results, so we need to take these results with a grain of salt. Nevertheless, slight majority of the respondents expressed slight inclination towards better focus with the ‘Maybe’ answer (43,2%) and 39,8% felt like it does improve focus. 17% felt like it does not improve concentration and focus at all. The results are seen in Figure 37. Figure 37. 10A, productivity related additional question about focus and concentration. Following the previous productivity question, the next question aimed to capture a more direct link between Dark mode usage and perceived productivity gains. The results can be seen in Figure 38. The highest number of respondents, 44.3%, chose ‘Maybe’, indicating uncertainty or conditional factors influencing whether Dark mode actually enhances their work productivity. This response suggests that while some users might see potential benefits in Dark mode for work-related tasks, its effectiveness could be dependent on various other factors that are not scoped out in this questionnaire. 33% of participants responded with ‘No’, suggesting that they do not perceive Dark Mode as contributing to increased productivity. This response might reflect a belief that the choice of interface theme is less influential on their work output than other factors, or they might find dark theming less suitable for the type of work they perform. On the other hand, 22.7% of the respondents answered ‘Yes’, indicating a belief that Dark mode can indeed help them get more work done. This group might find that dark theming 53 minimizes distractions, or simply suits their work style better, thereby enhancing their productivity. Figure 38. 10B, productivity related additional question about work amount. However, these productivity responses are quite varied and highly subjective. The fact that a significant number of respondents were unsure or did not see an increase in productivity with Dark mode suggests that its impact is not universally recognized or felt. It seems that productivity is a good motivator for Dark mode usage, but its perceived usefulness requires more in-depth analysis. Advancing further, next we will inspect how location & time might drive users to opt for Dark mode. In this question set we ask two initial questions about location and time, and conditionally present an extra time related question. Location and time were chosen because we presume that users toggle between Dark and Light modes depending on their physical environment and the time of day i.e., their direct surroundings are driving motivator for Dark mode. In the first question focusing on the location (as seen in Figure 39.), we found that the majority of respondents, 69.4%, indicated that their choice to use Dark mode is not affected by their location, be it indoors or outdoors. This suggests that for most users, the decision to use Dark mode is not driven by location or direct environment. Only 17.3% of participants responded with 'Yes', indicating that their choice to use Dark mode is influenced by their location. This could be due to ambient lighting, privacy concerns, or specific activities tied to certain locations. The more nuanced option, 13.3% of 54 respondents chose 'It depends on the specific location'. For this group, the context of their surroundings can be a significant factor in determining their interface preferences, but in this study, this is left open. These findings indicate that while location is a critical factor for a segment of the user base, the majority do not consider it a primary driver in their choice of theme. Figure 39. Questions 11 and 12, location and time of day related questions. As for the time related question, we asked if a respondent would switch light or Dark modes depending on the time of day. Here again we see majority of respondents not switching between different modes (81.6%) and small subset of respondents switching (18,4%). This implies that neither time nor location are major drivers for interface theming. However, for this small subset, we presented an additional time related question to better understand their interface switching routine. This question and the distribution 55 can be seen in Figure 40. Many of these theme switchers tend to use Dark mode only during evenings and nights and opt for light mode during the day. This behaviour can be seen from the high amounts of responses to evening/night (83,3%) and light mode during the day (77,8%). A large portion also opt for automatic switching (61,1%), which often follows the same pattern of using dark during the night and light during the day. Figure 40. 12A, additional time of day question for theme switchers. While time of day and location might not drive majority of users to opt for Dark mode, battery consumption might hold a different perspective. One of the initial hypotheses was that using Dark mode on OLED screens leads users to switch to Dark mode as this will save battery life. The battery conservation question results can be seen in Figure 41. Figure 41. Question 13, battery conservation and Dark mode with mobile devices. 56 Contrary to the hypothesis, a significant majority of respondents, 59.2%, indicated that they do not switch to Dark mode on their mobile devices for the purpose of conserving battery life. This finding is particularly interesting as we assumed that battery savings are a large motivator for opting for Dark mode, at least among the users who participated in our survey. This could be explained by the knowledge of OLED screens or that conservation is not of high importance because of the abundance of outlets or power banks. However, 31.6% of respondents did acknowledge using Dark mode to extend their device's battery life. This proportion suggests that while not a common practice, the battery-saving potential of Dark mode is a motivator for a subset of users. Also, 9.2% of participants were not aware of the potential battery-saving benefits of Dark mode, pointing to a gap in user knowledge. Device manufacturers could be more transparent about the power saving options of OLED screens which could boost this amount. This awareness aspect is also evident in the subsequent question 15. where we asked, ‘Were you aware before this survey that using Dark mode could potentially save battery life on your mobile device?’. In this question majority responded with ‘Yes’ (61,2%), however a large portion was unaware of the battery conservation implications (38,8%). Results are presented in Figure 42. Figure 42. Question 15, battery conservation knowledge prior to the survey. We also presented an additional question for people who were unaware of the battery conservation aspect (so 38,8% of respondents saw this question), results are in Figure 43. 57 Figure 43. 15A, Battery Saving Preferences if not informed of battery saving properties. This additional question asked whether respondents would now switch to Dark mode as it could be more sustainable and energy efficient. Majority opted for ‘Yes’ (84,2%) and small minority replied with a ‘No’ (15,8%). This implies that users value practical benefits and are willing to modify their preferences accordingly. The aspect of battery conservation in relation to Dark mode contained one other question, which sought to understand the weight of aesthetic appeal versus functional considerations like battery savings. The question was: ‘Would you switch to light mode despite the battery consumption if Dark mode was not appealing to you?’ The results can be seen in Figure 44. Figure 44. Question 14, switching despite of battery conservation. 58 Majority of 61.2% of respondents answered ‘Yes’, indicating their willingness to switch back to Light mode despite its higher battery consumption if they found Dark mode aesthetically unappealing. This response ties back to the of visual appeal and aesthetics in influencing user choices. Next up, we explored how specific applications might affect the toggling of an interface theme. We first presented a baseline question which would filter out the respondents who use light or dark theme everywhere. Most users were within this group (59,2%), however 40,8% of respondents did tend to use different theming depending on the specific application. The results of this baseline query can be seen in Figure 45. Figure 45. Question 16, theme switching dependent on specific application. The remaining respondents were presented with additional application specific questions. Respondents would choose out of predetermined application categories, which types of applications they tend to use dark or light mode in. They could also fill in their own application type if they did not find a category. The distribution between light and dark theme application preferences can be seen in the large Figure 46., where first we asked about Dark mode and after light mode with the same application categories. To add to this, respondents could also voice their own opinions about what features these applications have that influences the mode choice. This garnered a large number of qualitative responses we will analyse after seeing the application category distribution. 59 Figure 46. 17A-B, theming preferences across different application categories. ‘Other’ responses are visible. Regarding Dark mode preferences, a significant inclination towards its use was observed in certain application categories: social media (68.4%), streaming services (65.8%), and gaming platforms (60.5%). Additionally, more than half (55.3%) preferred Dark mode for communication applications, this includes email and messaging. Productivity applications (such as Office, note taking etc.) and news websites saw a more balanced distribution, with 36.8% and 31.6% respectively opting for dark theming. E-commerce (13.2%) and Educational Platforms (23.7%) had fewer Dark mode users. Respondents 60 also pointed out photography apps and text editors in the other section, but these could be categorized in the productivity category respectively. Conversely, when it came to Light mode preferences, news websites (54.8%) and E- commerce (51.6%) were predominantly favoured. Productivity applications, particularly those like Office, were preferred in Light mode by 35.5% of respondents, and a significant 46.4% chose Light mode for educational platforms. Social media (22.6%) and communication applications (38.7%) also had notable preferences for Light mode, while streaming services and gaming applications were less preferred in Light mode, each at 6.5%. It seems that specific applications influence user preferences for interface themes if a person is inclined on changing the theming in different applications. This suggests that factors like content type, usage context, and visual requirements of different applications play a critical role in determining whether users opt for Dark or Light mode. Especially the preference for Dark mode in social media, streaming services, and gaming suggests that users find Dark mode more visually comfortable for engaging with media-rich content, especially in environments with reduced lighting or during prolonged use. This might also suggest a strong preference for aesthetics especially in social media, which often revolves around picture and video content. Also, the higher preference for Light mode in productivity apps and educational platforms indicates that users might find Light mode more practical and less distracting in work or learning contexts. It suggests that for tasks requiring focus and detail, such as reading text or working with data, Light mode may be perceived as clearer and better for concentration even if previous responses in the productivity section did not reflect this. In addition, it is interesting to see news websites and e-commerce garnering such a large number of selections for light mode. This could be because users might associate Light mode with the seriousness and credibility often expected from news platforms and the trustworthiness and clarity needed for e-commerce transactions. This trust aspect was touched upon by Nazeriha & Jonsson [44]. The preference for Light mode in news websites could also be influenced by the skeuomorphic design principle, where digital interfaces mimic their real-world counterparts [52]. Traditional newspapers are characterized by black text on white paper. Many users have grown accustomed to this 61 format over the decades. When news websites use Light mode, it creates a familiar experience for readers, reminiscent of reading a physical newspaper. Earlier we mentioned that respondents could voice their own opinions on these application specific features that might affect their choice. One major theme amongst these was poor implementation and effect on general readability. This includes issues like poor contrast, visibility of UI elements, and overall design. Some also pointed out that Dark mode is often preferred in applications where the media content is the main focal point like Netflix or editing content like in Photoshop. A recurrent theme is also the context in which different modes are preferred. Many respondents mentioned using Light mode for tasks requiring concentration on text, like reading or typing, due to better readability. Dark mode is favoured for coding or system use, where it is seen as less straining especially in low-light environments. We are seeing a theme of productivity vs. entertainment in the responses. As eyestrain has often come up in the discussion of dark or light themes, the final hypothesis-based question set was accessibility. This question set first asks the respondents if they find Dark mode more comfortable or beneficial, and could they specify why is this the case? Respondents could also leave this empty if they felt like this would not apply to them. The response distribution across the predetermined and custom ‘Other’ responses can be seen in Figure 47. Figure 47. Question 18, accessibility question regarding why Dark mode comfortable or beneficial to the user. 62 It is no surprise that ‘Reduces eye strain’ garnered 92,2% of the respondents’ selections. It appears to be a large driving factor for dark theme selection. Also, ‘Reduces glare’ garnered 56,7% of selections, ‘Makes it easier to focus on the screen‘ with 46,7%, and ‘Enhances text readability’ with 45,6%. The rest of the selections are custom inputs. These custom selections pointed out important context to these options, such as the respondents’ dark environment, migraine prevention and the time of day, which were included in the previous sections of this questionnaire. This highlights the fact that while majority opt for reduced eye strain, some users select an interface theme based on their own specific needs. Furthermore, we asked if respondents had any eye-related health issues that affect their screen time (e.g., dry eyes, myopia, photophobia, diabetic retinopathy etc.). Majority of our respondents were without any visual impairments (84,7%). Small minority answered ‘Yes’ (15,3%) as seen in Figure 48. Figure 48. Question 19, accessibility question regarding eye-related health issues The respondents with eye-related health issues were presented with one additional question which was optional: ‘19A: If you find Dark mode more accessible due to visual impairments, could you specify how it benefits you?’ This question did not gather many responses, but the ones that we did receive pointed out eye strain reduction just like the majority of respondents. One person also pointed out the use of night light mode in conjunction with Dark mode, where the colour contrast is warmer for the eyes. One respondent also claimed that Dark mode is not a solution for eye strain, it merely extends 63 the reading time. This is a valid point, as Dark mode does not offer a way to relax one’s eyes, it only reduces the amount light emitted from a screen. Eye specialists often recommend the 20-20-20 rule: Every 20 minutes, look at something 20 feet away (6 meters) for at least 20 seconds [53]. Professionals also recommend reducing screen time especially for children. We will later see how screen time selections compared to the selections in the questionnaire. The final section of the questionnaire asked the respondents themselves if they would recommend an incorporation of Dark mode for different platforms and applications where it is not found yet. Majority were in favour of a recommendation (85,7%) while a small subset was neutral (14,3%). Nobody opted for ‘No’, which is telling sign that users want to add more interface theming options and increase their availability. The results are seen in Figure 49. Figure 49. Question 20, in favour of recommendation of a Dark mode option. Those who were in favour of a recommendation of a Dark mode (85,7%), were presented with two additional questions. First, they would need to select their top 3 reasons for the inclusion of a Dark mode. You might notice that these reasons are again the same hypothesis-based motivators. The prioritization of these motivators yielded interesting results as can be seen in Figure 50. Aesthetics emerged as the most selected reason, with 61.9% of respondents highlighting it. Once again, the visual appeal of interface design is of high importance, but this might also be due to the high number of young respondents as previous research has shown that 64 younger people prefer aesthetics. Readability followed closely, chosen by 58.3%, reflecting the importance of comfortable reading experiences. Accessibility was another major factor, indicated by 52.4%, pointing to the need for eye-strain free browsing. Battery saving was chosen by 46.4% of respondents, which is an interesting result as in the battery conservation question set yielded differing views. Location and time preferences (22.6%) and productivity (15.5%) were less dominant but still notable, suggesting that context-specific use and work efficiency are important to some of respondents. Privacy was the least cited reason (13.1%) and this reflects the results gathered earlier in the question sets. Out of this recommendation chart we can see that it reflects the general driving preferences of users, but this does not take in consideration the application specificity or users’ existing screen times. Figure 50. 20A, distribution of the top 3 reasons of a Dark mode inclusion. The next conditional question which was presented was ‘Do you think Dark mode should be the default setting on platforms and applications?’. Here a large majority are in favour of user choice (79,8%) by selecting the option ‘Let users choose upon first use or visit’. ‘Yes’ garnered 16,7% of selections and the ‘No’ option had 3,6%. The results are seen in Figure 51. The results reflect the idea that users want to be in control and customize their interface to improve their own experience with digital platforms. 65 Figure 51. 20B, Dark mode as default option opinion. The concluding question to this questionnaire was an open-ended question if the respondents wanted to voice any additional comments related to user interface theming in general. Answer was voluntary and majority of respondents skipped this. However, there were some valuable comments in this section. Many of whom responded to this optional question expressed satisfaction with Dark mode but noted that its effectiveness varies across different websites and applications. Issues like transparency in images blending into the background indicate room for improvement in design, particularly in handling specific design elements. One response also emphasized the use of dark themes with well-structured, simple, and clean designs. This was also highlighted in application specific section. One user's experience with a ‘paper-like’ background on a Huawei phone late at night suggests a desire for more innovative features that enhance Dark Mode's usability and visual comfort. Several responses also emphasized the importance of customization with Dark mode, including options for different colours (black, grey, dark blue, etc.). These respondents appreciate flexibility, especially when some applications' Dark mode implementations are suboptimal. In addition, some pointed the importance of having a choice per application and the ability for applications to default to system preferences. Also, some respondents indicated a willingness to try Dark mode after learning about its sustainability benefits and battery saving aspects, which was nice to hear as respondents benefited or gained something themselves from this quick survey. 66 6.2 Comparison In this section we will conduct some comparisons with different demographic aspects in relation to some of the questions and see if there are some additional factors at play. Namely we want to explore the impact of screen times and age which were part of the background hypotheses presented in chapter 5. These background aspects might affect the selection of Dark mode, which is why these are further investigated here. Starting with screen times, we saw in the previous section that screens times are relatively high across the board. No respondent had less than 1 hour in our survey and the group of 1-3 hours was extremely small. In Figure 52. we can see the relative screen time distribution by age groups and see that, younger respondents in the 18-24 and 25-34 age groups hover heavily in the 7-9- and 10-12-hour categories – for example majority of 18- 24 aged respondents picked 7-9 hours (52,6%) and 25-34 aged respondents largest majority gravitated towards 10-12 hours (40,8%). The single 18 and below respondent picked 7-9 hours as their screen time approximation. The 35-44 and 45-54 age groups tend to use their devices for 7-9 hours and upwards, which could suggest that individuals in this age bracket are likely to be using screens for professional purposes. While the older groups 55-64 (60% were in the 4–6-hour category) and 65 and above (50% split between 4-6 hours and 10-12 hours categories) all have less screen time than their younger counterparts. Figure 52. Relative screen time distribution by different age groups. 67 Now that we are aware of the screen time and age distribution, we can start looking at Dark mode specific data. First, we will inspect the ratio of active Dark mode users and the total number of respondents by screen time. As previous research has hinted at, Dark mode has seen large adoption because of rising screen times. We initially assumed that respondents with high screen times are more likely to use Dark mode, however the proportion of active Dark Mode users appears relatively consistent across different screen time categories as seen in Figure 53. The active users are presented with a percentage of the screen time group. You can see that on average the active users amount in each category hovers around the 70% mark. Figure 53. Ratio of active Dark mode users and total respondents by screen time. Blue graph indicates the total number of respondents in a screen time group, and the yellow graph indicates the percentage of active users out of that group. This suggests that the likelihood of using Dark Mode does not increase proportionally with screen time. Users with varied screen time habits seem to adopt Dark mode at similar rates. This in turn means that our background hypothesis about screen times may not hold true for our respondent group. We think this highlights the importance of offering it as an option for all users. Also, the finding reinforces the notion that users value autonomy and the ability to choose their preferred mode, regardless of their screen time. This is 68 further reinforced by the final question set about default mode, in which most respondents would let users choose upon first visit or use. Screen times and Dark mode ratio gave us some good insight, but what about the background hypothesis about age and Dark mode usage? Previous research suggests that age is large factor when it comes to Dark mode preferences – younger users prefer darker themes and aesthetics, while older users prefer lighter themes for more light and clear viewing experience. When looking at the ratio of active Dark mode users and total respondents by age in Figure 54., we can see the graph indicates a decline in the ratio of active Dark mode users as age increases. The active Dark mode users are presented as a percentage of the age group in the graph. Figure 54. Ratio of active Dark mode users and total respondents by age. Blue graph indicates the total number of each age group’s respondents, and the yellow graph indicates the percentage of active users in a age group. The younger groups show very high numbers of active Dark mode adoption (89,5% and 84,4%). The 35-44 and 45-54 age groups show a significantly lower proportion of active Dark mode users with only 41,7% and 25% respectively. However, active usage rises a little in the 55-64 group, and 65 and above categories. These categories also had fewer 69 respondents, so comparing them in a normalized manner is difficult. The results still show a smaller ratio than in the younger groups as seen in Figure 54. These results suggest that older users may prefer Light mode, possibly due to its perceived brightness and readability, especially for those with age-related visual changes. This shows that the background hypothesis about age being a large factor does hold some support. Previous research has also shown that among older demographics the adoption of Light mode is higher while younger demographics tend to follow UI trends and popular designs. If older respondents have a lower Dark mode adoption rate, what is driving this change? Research tends to point to the better perceived readability for older demographics, which is why we had the readability question in the survey (Question 7). We need to inspect the answers to this question by age group to identify if readability is driving this behaviour. In Figure 55. we can see the distribution of the readability question and responses by each age group. Figure 55. Distribution of easier text readability in Dark mode and responses by age group. Both of the older groups (55-64 and 65 and above) show very few ‘Yes’ responses, and equal amount of ‘No’ responses in 55-64 group. This suggests that the majority in these age groups do not find text readability easier in Dark mode. This aligns with previous research that older demographics may prefer Light mode for its perceived readability and 70 clarity. However, it is important to note that the total number of responses from older participants was relatively low. The limited sample size means that generalizing these results would not be feasible. Further research with a larger and more representative sample of older users would be necessary. We will consider this later in the discussion section as well. As readability and clarity was a concern with age, previous research has also shown that younger users are influenced by aesthetics and design trends to favour Dark mode. With this information in mind, we would anticipate a reduced number of older participants citing aesthetics as their sole reason for choosing Dark mode in our survey results. In Figure 56. we can observe the distribution of aesthetics versus functional preference responses sorted by each age group. Figure 56. Ratio of aesthetics versus functional preference of Dark mode, responses by age group. In the figure we observe that the overall younger users are influenced by the aesthetic appeal of Dark mode, the proportional size of only functional choice is small in this group. In contrast, as age increases, the preference shifts slightly towards functionality, although ‘Both equally’ remains a significant choice, showing that many users across age groups value a balance between aesthetics and functionality. 71 6.3 Discussion In this section we will discuss the overall findings and implications of the results. This part consists mainly of reflecting the results with previous research and our results in relation to the background hypotheses presented in chapter 5. Also, the shortcomings of this survey are considered in this part. Beginning with age. While age appears to influence the preference for Dark mode, the limited number of responses from older adults within this study suggests that the findings should be interpreted with caution. The underrepresentation of older age groups could be attributed to several factors, including lower overall technology adoption among this demographic and the specific channels through which the survey was circulated. In addition, this survey was primarily circulated in university courses with high numbers of students in the STEM field. As the data has shown, most participants were young, with a significant proportion marking themselves as students in the occupational question. Such a distribution implies a potential bias towards tech-savvy individuals who may already have a predisposition toward digital trends like Dark mode. Furthermore, the demographic skew toward male respondents is also something to take into consideration when evaluating these results. Therefore, while the results offer insight into Dark mode preferences among young, tech-oriented individuals, they may not be fully representative of the broader population's usage patterns. When it comes to screen times, contrary to expectations, the analysis revealed that increased screen time does not correspond to a higher adoption of Dark mode. This outcome is interesting, as we assumed that users opt for Dark mode to mitigate fatigue and eye strain associated with prolonged use. Prior research has also suggested that the rise of Dark mode's popularity is, in part, a response to the uptick in screen time. Yet, our findings indicate that other factors than screen time may play a more significant role in the preference for Dark mode. Considering other more prominent factors, it seems that accessibility and aesthetics were consistently the largest drivers amongst our result set. This includes responses from active Dark mode users, the results of the specific aesthetic question set, the accessibility question set and in the inclusion recommendation question, which was primarily given 72 out to people who would recommend Dark mode implementation for applications and sites which do not have it yet. In addition, the same drivers were identified in the qualitative open-ended question sets, especially prominently appearing in the application switchers responses. In fewer numbers, productiveness, location, and time saw their fair share of users, but use cases were more specific and not the leading drivers when it comes to theme switching. Users also commented about these specific use cases in the open-ended responses and often shared their own routines which shed more light on these behaviours. This highlights the need for customizability of user interfaces and options for end users when it comes to UI design. However, battery conservation findings were unexpected. Contrary to our initial hypothesis that many users would employ Dark mode as a strategy to extend battery life, the results indicate otherwise. A significant portion of respondents reported that they do not utilize Dark Mode for the purpose of conserving battery power. This finding is particularly interesting given the amount of information available about OLED battery- saving potential and its sustainability. It appears most end users are not concerned about battery life, or the behaviour could be explained by the knowledge of OLED screens’ functionality. We did include a link to the survey about OLED screen info, but the impact of this link is not apparent in the results. Also, the results could be due the abundance of outlets or power banks or simply because some users have LCD screens on their mobile phones and battery saving does not apply to them. Proceeding with the application specificity; How an applications genre might guide Dark mode adaption, seemed to gain some support. While many opted for only single mode across all platforms, the results from those who did switch, suggests that factors like content type, usage context, and visual requirements of different applications play a critical role in determining whether users opt for Dark or Light mode. Single mode is still favoured for the broad majority, but this could change if the demographics were not heavily young tech-oriented people. Especially interesting was the preference for Dark mode in social media, streaming services, and gaming platforms, as this suggests that users find Dark mode more visually comfortable for engaging with media-rich content, that includes features like video, 73 audio, or other playable experiences that encourage viewers to interact and engage with the content. This might also suggest a strong preference for aesthetics especially in social media, which often revolves around picture and video content. This section could also benefit from age analysis per application category as could be age related differences for each content category. Ultimately, one would assume there is a one single driving factor for Dark mode toggling. However, this analysis has shown that while functional attributes, such as readability, productivity, and battery conservation, are important considerations, they do not exist in a vacuum and are often weighed against aesthetic factors by users. For Dark mode theming, this means users might be weighing its visual appeal against functional benefits like reduced eye strain, focus, power savings, and select a theme based on these assumptions. 74 7. Conclusion This thesis has explored Dark mode as a user interface trend through different means. This began with an in-depth review of the historical context and the technological advancements that have shaped user interfaces over time, setting the stage for the significance of theming and styling in user interfaces. From there, Dark mode as a term was introduced and its technical implementations were briefly explained through web development. This study into Dark mode theming not only examined its technical implementation, but also a survey study was conducted, which aimed to uncover the motivations behind users' preferences for Dark mode theming. The motivators that drive this toggling or changing were often unclear in the slight amount of research Dark mode already has. The results were interesting from this survey. Some of the findings aligned with existing literature, such as the preference for Dark mode among younger users, and that older individuals prefer lighter UIs. Furthermore, the survey showed intriguing patterns regarding battery saving perceptions and the decision-making processes users employ when opting for a particular theme. While earlier research might suggest that it is one or the other, functional vs. aesthetics, most users tend to weigh a themes visual appeal against functional benefits and select a theme based on these assumptions. Most prominently people tend to weigh accessibility aspects such as reduced eye strain against the overall aesthetic appeal of a digital platform and make the switch – some users even opting to toggle it everywhere they go. Of course, a subset of users takes this further and customize their UI depending on the application category, their time of day, location or specific battery saving needs. The results of this study show us that decision making, even in UI theming, is complex chain of events and that multiple factors might affect it. Users are not merely passive recipients of design; they are active participants, often seeking out ways to enhance their interaction with technology to better align with their personal and situational needs. This should be considered when designing these platforms or applications. 75 7.1 Future Work Regarding future work about Dark mode interface theming, future surveys should aim for a larger amount of user responses to ensure a more prominent and representative sample size. A larger sample size could help with generalizing the results and help improve the results found here, especially when the sample is skewed to some demographic group. Also, a more qualitative approach could prove useful. Understanding the reasons behind each user’s preference can provide context that pure quantitative data may not reveal. The open-ended responses found in this study gave interesting insights to how some users opt for Dark mode and what they would like to see improved in modern user interfaces. Even specific further interviews with these users could give more details about Dark mode motivators. In addition, objective usability tests and actual user generated data could give another angle to the motivators behind Dark mode toggling. Imagine a site that gathers theming data from users and see numbers of users who opt for dark theming, that would prove to be interesting on itself. 76 References [1] Jansen, B. J. (1998). The Graphical User Interface. ACM SIGCHI Bulletin, 30(2), 22-26. https://dl.acm.org/doi/pdf/10.1145/279044.279051 [2] Norman, D. (2013). The design of everyday things: Revised and expanded edition. Basic books. [3] Chai, W., & Bigelow, S. J. (2022). cloud computing. Cloud Computing. Retrieved September 20, 2023, from https://www.techtarget.com/searchcloudcomputing/definition/cloud-computing [4] Pearson, C. (2018, June 14). Designing a consistent experience across desktop and mobile. Medium. Retrieved September 20, 2023, from https://medium.com/@pancakefeed/designing-a-consistent-experience-across-desktop- and-mobile-cb9319941630 [5] GUI Definition. (2004). The Linux Information Project. Retrieved September 20, 2023, from https://www.linfo.org/gui.html [6] Bush, V. (1945). As We May Think. The Atlantic Monthly, 176(1), 101-108. [7] MacKenzie, I. S. (2012). Human-computer interaction: An Empirical Research Perspective. 6-23. http://dspace.utalca.cl/bitstream/1950/10513/1/l.scott_mackenzie.pdf [8] AppDirect Glossary. (2021, October 13). App Ecosystem. AppDirect. . Retrieved September 20, 2023, from https://www.appdirect.com/resources/glossary/app-ecosystem [9] Herath, D. (2023, January 19). Evolution of UI. DEV Community. Retrieved September 21, 2023, from https://dev.to/dasunherath/evolution-of-ui-3g6n [10] Foley, M. J. (2012, October 29). Microsoft Design Language: The newest official way to refer to “Metro.” ZDNET. https://www.zdnet.com/article/microsoft-design-language-the- newest-official-way-to-refer-to-metro/ [11] Google. (2009, July 7). Introducing the Google Chrome OS. Official Google Blog. Retrieved September 24, 2023, from https://googleblog.blogspot.com/2009/07/introducing-google-chrome-os.html [12] Karampelas, P., Basdekis, I., & Stephanidis, C. (2009). Web user interface design strategy: Designing for device independence. In Universal Access in Human-Computer Interaction. Addressing Diversity: 5th International Conference, UAHCI 2009, Held as Part of HCI International 2009, San Diego, CA, USA, July 19-24, 2009. Proceedings, Part I 5 (pp. 515- 524). Springer Berlin Heidelberg. [13] Fesseden T. Design Systems 101. (2021, April 11). Nielsen Norman Group. Retrieved September 24, 2023, from https://www.nngroup.com/articles/design-systems-101/ 77 [14] Fay, G. (2022, March 28). APIs Are A Building Block—Don’t Make Them A Stumbling Block. Forbes. Retrieved September 24, 2023, from https://www.forbes.com/sites/forbestechcouncil/2022/03/28/apis-are-a-building-block- dont-make-them-a-stumbling-block/ [15] Tandel, S., & Jamadar, A. (2018). Impact of progressive web apps on web app development. International Journal of Innovative Research in Science, Engineering and Technology, 7(9), 9439-9444. [16] Ritchie, R. (2018, July 10). App Store Year Zero: Unsweet web apps and unsigned code drove iPhone to an SDK. iMore. . Retrieved September 24, 2023, from https://www.imore.com/history-app-store-year-zero [17] Djuric, D. (2023, August 18). The renaissance of PWAs. This Dot Labs. Retrieved September 24, 2023, from https://www.thisdot.co/blog/the-renaissance-of-pwas/ [18] Codeart. (2023, July 27). UI/UX Design Trends 2023 - CodeArt - Medium. Medium. https://medium.com/codeart-mk/ui-ux-design-trends-2023-c7285391e610 [19] Hui, S. L. T., & See, S. L. (2015). Enhancing user experience through customisation of UI design. Procedia Manufacturing, 3, 1932-1937. https://www.sciencedirect.com/science/article/pii/S2351978915002383 [20] Norton, M. I., Mochon, D., & Ariely, D. (2012). The IKEA effect: When labor leads to love. Journal of consumer psychology, 22(3), 453-460. [21] Nikolov, A. (2020, May 5). Design principle: IKEA effect - UX Collective. Medium. Retrieved September 24, 2023, from https://uxdesign.cc/design-principle-ikea-effect- 2d908b2de81 [22] Lanciaux, R., & Lanciaux, R. (2021). Styling. Modern Front-end Architecture: Optimize Your Front-end Development with Components, Storybook, and Mise en Place Philosophy, 59-72. [23] Attardi, J. (2020). Modern CSS - Master the Key Concepts of CSS for Modern Web Development. https://link.springer.com/book/10.1007/978-1-4842-6294-8 [24] Jackson, B. (2023, January 13). CSS Preprocessors - Sass vs Less - KeyCDN. KeyCDN. Retrieved September 24, 2023, from https://www.keycdn.com/blog/sass-vs-less [25] Ekwuno, O. (2022, October 7). Comparing Tailwind CSS to Bootstrap: Is it time to ditch UI kits? - LogRocket Blog. LogRocket Blog. Retrieved September 24, 2023, from https://blog.logrocket.com/comparing-tailwind-css-bootstrap-time-ditch-ui-kits/ [26] Eisfeld, H., & Kristallovich, F. (2020). The rise of dark mode: A qualitative study of an emerging user interface design trend. https://www.diva- portal.org/smash/get/diva2:1464394/FULLTEXT01.pdf [27] Westenberg, J. (2022). We asked, you told us: Just about everyone uses dark mode. Android Authority. https://www.androidauthority.com/dark-mode-poll-results-1090716/ 78 [28] Brage, E. (2019). The rise of brutalism and antidesign and their implications on web design history, Jönköping University [29] Azimov, A. (2020). Dark Mode List. Retrieved archived version 2023-09-12 from https://darkmodelist.com/ [30] Carroll N, Sadowski A, Laila A, et al.: The Impact of COVID-19 on Health Behavior, Stress, Financial and Food Security among Middle to High Income Canadian Families with Young Children. Nutrients. 2020; 12(8): 2352. [31] Hu Z, Lin X, Kaminga AC, et al.: Impact of the COVID-19 Epidemic on Lifestyle Behaviors and Their Association With Subjective Well-Being Among the General Population in Mainland China: Cross-Sectional Study. J Med Internet Res. 2020; 22(8) [32] Budiu, Raluca “Dark Mode vs. Light Mode: Which Is Better?” Nielsen Norman Group, February 2, 2020 Retrieved September 9, 2023, from https://www.nngroup.com/articles/dark-mode/ [33] Mozilla Foundation. (2023, August 4). Document Object Model (DOM) - Web APIs | MDN. MDN Web Docs. Retrieved September 24, 2023, from https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model [34] Adhuham, M. (2020). A complete guide to dark mode on the web. Retrieved from https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ [35] Window localStorage property. (n.d.). W3 Schools. Retrieved October 3, 2023, from https://www.w3schools.com/jsref/prop_win_localstorage.asp [36] What are Cookies? (2023, September 26). www.kaspersky.com. Retrieved October 3, 2023, from https://www.kaspersky.com/resource-center/definitions/cookies [37] Darkreader. (n.d.-b). GitHub - darkreader/darkreader: Dark Reader Chrome and Firefox extension. GitHub. https://github.com/darkreader/darkreader [38] Dash, P., & Hu, Y. C. (2021, June). How much battery does dark mode save? An accurate OLED display power profiler for modern smartphones. In Proceedings of the 19th Annual International Conference on Mobile Systems, Applications, and Services (pp. 323-335). [39] Pedersen, L. A., Einarsson, S. S., Rikheim, F. A., & Sandnes, F. E. (2020, July). User interfaces in dark mode during daytime–improved productivity or just cool-looking?. In International Conference on Human-Computer Interaction (pp. 178-187). Cham: Springer International Publishing. https://oda.oslomet.no/oda- xmlui/bitstream/handle/10642/9803/LightDark%20RV16.pdf?sequence=1 [40] Corcoran, Kyle A. and Corcoran, Ellorie M.. (2022). “My Rhodopsin!”: Why Adding Dark Mode to Journals Could Make Us All Better Astronomers. arXiv preprint arXiv:2203.16546. https://arxiv.org/pdf/2203.16546.pdf [41] Sethi, T., & Ziat, M. (2022). Dark mode vogue: Do light-on-dark displays have measurable benefits to users?. Ergonomics, 1-15. [42] Plass, Jan L., Roxana Moreno, and Roland Brünken, eds. "Cognitive load theory." (2010). 79 [43] Kim, K., Erickson, A., Lambert, A., Bruder, G., & Welch, G. (2019, October). Effects of dark mode on visual fatigue and acuity in optical see-through head-mounted displays. In Symposium on spatial user interaction (pp. 1-9). https://dl.acm.org/doi/pdf/10.1145/3357251.3357584 [44] Nazeriha, S., & Jonsson, A. (2020). Does “Dark Mode” affect users’ trust towards E- commerce websites? https://www.diva- portal.org/smash/get/diva2:1451272/FULLTEXT01.pdf [45] Buchner, A., Mayr, S., Brandt, M.: The advantage of positive text-background polarity is due to high display luminance. Ergonomics 52(7), 882–886 (2009). https://doi.org/10.1080/00140130802641635 [46] Dobres, J., Chahine, N., & Reimer, B. (2017). Effects of ambient illumination, contrast polarity, and letter size on text legibility under glance-like reading. Applied Ergonomics, 60, 68-73. jdobr.es/pdf/Dobres-etal-2017-Ambient.pdf [47] Frost, N. & LG. (2023). What is the best monitor for eye strain? LG UK. https://www.lg.com/uk/lg-experience/lg-lab/best-monitor-for-eye-strain/ [48] Dark Mode | Apple Developer Documentation. (n.d.). Apple Developer Documentation. https://developer.apple.com/design/human-interface-guidelines/dark-mode [49] Howe, K., & Eisenhart, M. (1990). Standards for qualitative (and quantitative) research: A prolegomenon. Educational researcher, 19(4), 2-9. https://nepc.colorado.edu/sites/default/files/Howe_Eisenhart_Stds_for_Qualitative_Resea rch.pdf [50] Patton, M. Q. (2005). Qualitative research. Encyclopedia of statistics in behavioral science. [51] Cai, Z., Fan, X., & Du, J. (2017). Gender and attitudes toward technology use: A meta- analysis. Computers & Education, 105, 1-13. [52] What is Skeuomorphism? — updated 2023. (2023, September 4). The Interaction Design Foundation. https://www.interaction-design.org/literature/topics/skeuomorphism [53] Eyestrain - Diagnosis and treatment - Mayo Clinic. (2022, September 15). https://www.mayoclinic.org/diseases-conditions/eyestrain/diagnosis-treatment/drc- 20372403 80 Appendices Appendix A – Dark Mode Preferences Survey Google Forms PDF: https://seafile.utu.fi/f/b823e1f287c44716b9a3/?dl=1 Appendix B – Survey Results Excel spreadsheet of the results: https://seafile.utu.fi/f/0f518163962b4dbbb277/?dl=1