Black Text on White Background Is Not the Only Option

Black Text on White Background Is Not the Only Option

Many websites display their printed text on white backgrounds because the contrast between black text and a white backdrop is as sharp as a color contrast possibly can be. While this contrast ensures that a reader can visually tell what every letter of any given word is, some viewers find it to be visually straining to have to essentially focus their vision on a bright and white screen while reading a lengthy block of text. Some websites opt to use color schemes that result in a less oppressive contrast out of respect for this. However, it is debatable whether presenting white text on a pitch-black background is better in practice because prolonged staring at this text imprints an after-effect on one's vision as a result of a different kind of visual strain.

As a novelty, a website can employ a JavaScript process that allows the viewer to swap the color of the text and the color of the background. Titled "darkmode.js," it implements a floating button at the bottom right corner of the browser window that instantly toggles the color scheme of a web page that uses particularly dark text and bright backgrounds. To avoid making the swapping process jarringly instantaneous, a brief piece of JavaScript-driven animation makes the transition appear as though the color scheme of the "dark mode" very quickly overtakes the page from the button's floating position. Clicking the button again makes the dark color scheme "recede" into the button just as quickly.

The home website for the library file explains how to adjust several options to customize the overall functionality for the website's needs, and the button produced by the file is present on the site itself to provide a hands-on demonstration for viewers. The site shows that different text colors can be made into other colors when the current mode is changed; for example, lines of syntax that use a bold red color to represent functions can become a dark green color when the page is changed into the dark mode. The site provides external links to several other websites that use this JavaScript library. For more information click here https://darkmodejs.learn.uno/.

Web Design Display