Dark Mode Global
a smart dark mode extension to globally turn light-themed websites into a dark theme
Make a Donation
PayPalBitcoin
Bitcoin Address: 1sM2BrTH8BRgt3quiASK8TmYSafutNvDo
Ether
Ether Address: 0xCf9eaAc56992e12EB61fD46342172d4EEff5C8e4
Download Links
Advertisement
"Dark Mode Global" extension uses CSS filters to invert page color from light to dark. The extension only applies the CSS filters to those pages that are in light theme (no filter is added to the dark-themed pages when the smart mode is active). So if a page has a built-in dark theme, the extension is not applying any rule at all. A user can change the brightness level of pages optionally to reduce the eyestrain while reading. The default brightness level is 90% when the extension is enabled. This extension can be easily toggled on and off from the left-click toolbar action. If a web page is visited frequently and this extension is not working properly on this particular page, you can add it to the blacklist.
image

Features

  1. What is "Dark Mode Global" extension and how does it work?

    This extension aims to reduce user's eyestrain by reducing the brightness level of all visited web pages automatically. There are two CSS filters this extension uses to improve the page visibility and to reduce the brightness. The first one is filter: invert" which inverts the entire page's color theme about 100 percent. Note that this will cause all images in the page to invert color as well, however, the extension applies a few methods to prevent this. The second filter is filter: brightness which is used to reduce the total brightness of the document. This filter is only applied to the top frame (the main document). A user can use the options page to adjust the level of the brightness that is desired.

  2. When I am using this extension some images are inverted which does not look good. Any idea how to fix this?

    As stated in the first FAQ, the extension uses filter: invert to accomplish the dark theme. This filter inverts everything including images. The extension has several internal methods to prevent images from being inverted but some images may skip the internal rules. You can define a custom CSS rule to prevent the inversion. Basically, add a CSS rule into the JSON object where the key is equal to the hostname. This ensures that this CSS rule will only apply to the current hostname and is not messing up other web pages. If you can an issue applying the rule, add a comment in the review section.

    Note: to only apply your custom rules in the dark mode, prefix them with html.darkme query.

    Example: Let’s add a background color to the Google’s search voice icon. Since the URL is “https://www.google.com/“, so the key would be “www.google.com” and the entire JSON object would be something like:

    {
      "www.google.cz": "html.darkme .gsri_a {background: red !important;}"
    }

  3. What's new in this version?

    Please check the Logs section.

  4. Is it possible to temporarily disable the extension?

    Yes, simply use the left-click action on the toolbar button to toggle the extension enabled or disabled (you can place your mouse over the toolbar button to see the current state). This is the recommended way to use when the extension is not performing well. If you are visiting this particular hostname a lot, then it is recommended to use the blacklist filtering instead or you can define a few CSS rules to fix the page! Note that after toggling the state you might need to refresh the page for the changes to apply.

  5. What is the blacklist? How can I use it to prevent some websites from getting the dark theme?

    The blacklist is a comma-separated list of hostnames that the extension is not going to apply the CSS filters on. Basically the extension does not intract with these hostnames. To add a hostname to the blacklist there are two options. Either use the right-click option over the toolbar button when you are visiting the page, or add the hostnames directly on the options page. You can remove a hostname from the blacklist as well from the right-click item.

Matched Content

Reviews

Please keep reviews clean, avoid the use of improper language and do not post any personal information.HTML tags
  • <a> Defines an anchor.

    Example: <a href="http://add0n.com">a sample link</a>

  • <pre><code> Syntax Highlighting (Supported languages: Bash, JSON, HTML, JavaScript, and CSS).

    Example: <pre><code class="javascript">var foo = 'bar';</code></pre>

  • <strong> Defines bold text
  • <blockquote> Defines a long quotation
  • <caption> Defines a table caption
  • <cite> Defines a citation
  • <em> Defines italic text
  • <p> Defines a paragraph
  • <span> Defines a section in a document
  • <s> Defines strikethrough text
  • <strike> Defines strikethrough text
  • <u> Defines underlined text
  • <br> Defines a single line break; can be used alone and don't need an ending tag

What's new in this version

Version--
Published--/--/--
Change Logs:
    Last 10 commits on GitHub

    Need help?

    If you have questions about the extension, or ideas on how to improve it, please post them on the support site. Don't forget to search through the bug reports first as most likely your question/bug report has already been reported or there is a workaround posted for it.

    issuesstarsforks

    Recent Blog Posts on add0n.com