 | Test Dark ModeTest and calibrate your dark mode add-on/extension |  |
| Test Dark ModeTest and calibrate your dark mode add-on/extension | |
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 | |
HTML5>>iframe >> src >> about:blank | |
HTML5>>button | |
HTML5>>a | WebBrowserTools |
HTML5>>white text + dark background | white text + dark background |
HTML5>>dark text + white background | dark 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.