Homepage

Test Dark Mode

Test and calibrate your dark mode add-on/extension
Logo

Advertisement

This page has several challenges for your dark mode add-on. You can, test, calibrate or design your dark mode style using the rules and elements in this page. Simply turn on your dark/night mode addon and reload this page. Then, see if various elements int he the below table are still visible and intact due to the injected dark styles. A true dark mode addon should pass most of the below tests without any drawbacks.

HTML5>>img
HTML5>>a >> img
HTML5>>figure >> img
HTML5>>iframe >> img
HTML5>>iframe >> iframe >> img
HTML5>>iframe >> iframe >> iframe >> img
HTML5>>img >> css >> opacity: 0.5
HTML5>>img >> css >> transition: 5 sec
HTML5>>img >> css >> unset *
HTML5>>img >> css >> filter: none
HTML5>>iframe >> css >> filter: none >> img
HTML5>>background-image >> src
HTML5>>background-image >> base64
HTML5>>picture >> source
HTML5>>canvas >> context >> img
HTML5>>embed >> src
HTML5>>object >> data
HTML5>>input >> type >> text
HTML5>>input >> type >> button
HTML5>>input >> type >> time
HTML5>>input >> type >> date
HTML5>>input >> type >> email
HTML5>>input >> type >> file
HTML5>>input >> type >> file
HTML5>>input >> type >> number
HTML5>>input >> type >> search
HTML5>>input >> type >> submit
HTML5>>input >> type >> url
HTML5>>textarea
HTML5>>form
sample form
HTML5>>iframe >> src >> about:blank
HTML5>>button
HTML5>>aWebBrowserTools
HTML5>>white text + dark backgroundwhite text + dark background
HTML5>>dark text + white backgrounddark text + white background
HTML5>>color >> palette >> background-color
CSS>>font-smoothing

with font-smoothing

without font-smoothing

To work with this web app, simply install a dark mode add-on, plugin or extension. Then, reload this page and turn on the add-on. In dark mode, this page should be rendered flawlessly and all the elements in the table above should be visible and intact from dark style changes. Elements are ordered based on the level of difficulty in converting to dark mode. Meaning that, as you move down the list, elements have more resistance to the injected dark styles in the page. As mentioned above, a true dark mode style should darken most of the above elements without affecting their appearance or color specs.

As you can see in the table above, the left side is the description of the element and right side is the actual rendered element. For example, HTML5>>a>>img means an HTML5 image element which is placed inside and anchor element in the page. The right side is the actual element which is rendered in a table cell. Once you turn on the dark mode, this element should be visible and all the colors should remain intact from the dark mode CSS styles.

As mentioned above, when you move down the list rules are becoming harder for the injected dark style. For exampe, HTML5>>iframe>>img is an image element that is placed inside an iframe window. If a dark mode style wants to apply changes to this specific element, it needs to be injected inside this iframe window. Another tough rule is HTML5>>background-image>>src which means an HTML5 image element which is rendered with a CSS rule as the background image of a table cell. Most dark mode styles will fail to affect this element and will fail to render it correctly in dark mode.

All the elements in the above table have self-explanatory descriptions. If your dark mode add-on has settings, please adjust them so that you can see the elements in this page flawlessly in dark mode. Some dark mode add-ons enable users to add custom styles. This page could help you a lot in designing a "custom dark style" or "dark mode add-on" for your browser. Moreover, you can install various dark mode plugins and see which one is behaving correctly when facing the above challenges.

If you found a bug in this page, or have a feature/function which you would like to see in this web app, please let us know by sending an email or through the discussion form below. Moreover, don't forget to check other web apps in webbrowsertools.com, we have many useful apps related to browser's privacy and security.

Related Blog Posts

  1. Dark Mode for Chrome Browser: You probably know that the latest version of Chrome (v73+) has a dark mode. The new feature is available for both Mac OS and Windows 10. However, although it works perfectly for Mac OS, it does half the job for Windows 10...
  2. Clear Browser Cache: Just about everyone wants to know how to clear browser cache for their browser (Chrome, Firefox and Opera). It is an important diagnostic after all when one is having issues with the website loading or privacy...