Dark Mode Switcher Added to Improve User Experience on Website

https://icaro.icaromediagroup.com/system/images/photos/16224586/original/open-uri20240522-56-1jjplqr?1716409908
ICARO Media Group
News
22/05/2024 20h22

The implementation aims to provide users with the option to enable or disable the dark mode feature based on their preference.

The website's code reveals that if the value of the darkMode variable is set to 'true', the switcher will be activated. Upon loading the web page, the document's body element will be targeted using the JavaScript querySelector method. Additionally, an event listener is registered to react when the content of the webpage has finished loading.

Once the DOMContentLoaded event is triggered, the darkModeSwitcher element on the website will be selected, and the input checkbox within it will be assigned to the variable 'checkbox'. This allows for the user to toggle the dark mode by checking or unchecking the box.

On the other hand, if the value of darkMode is not equal to 'false', the code utilizes the matchMedia function with the parameter "(prefers-color-scheme: dark)" to detect the user's preferred color scheme. This enables the website to adapt to the user's device settings and automatically switch to dark mode if it is supported.

In case of any errors during the execution of the code, a catch block has been implemented. It includes a window.onload function that sets the configuration parameters for dataLayer and _sf_async_config. The dataLayer.sections and _sf_async_config.authors variables are defined with specific values, such as 'home, news, hardware, Microsoft, Microsoft Surface, Qualcomm Snapdragon', and 'Rob Thubron', respectively.

To optimize the website's performance, a script element is created and appended to the document. This ensures that the script is loaded after other elements on the page. Overall, these additions to the website's code demonstrate a commitment to enhancing user experience and accommodating preferences for dark mode.

As technology continues to evolve, users have become more accustomed to customization options, such as dark mode. By incorporating a dark mode switcher, this website strives to provide a personalized browsing experience to its users, whether they prefer the traditional light mode or the more visually appealing dark mode.

As of now, no specific release dates or numbers for the website's dark mode switcher implementation have been provided. However, this update showcases the website's dedication to staying up-to-date with user demands and ensuring a seamless browsing experience for its visitors.

The views expressed in this article do not reflect the opinion of ICARO, or any of its affiliates.

Related