rugk / website-dark-mode-switcher

This is a (Firefox) add-on (WebExtension) that lets you invert the website's color scheme by inverting/changing the prefers-color-scheme media feature of CSS.

Dark Mode Website Switcher

This is a (Firefox) add-on (WebExtension) that lets you invert the website's color scheme by inverting/changing the prefers-color-scheme media feature of CSS without requiring you to change the whole system style setting.

Test websites:

• https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode
• https://webkit.org/
• https://pinafore.social/
• https://s.codepen.io/aardrian/debug/NmoQdN
• http://adrianroselli.com/
• https://emojipedia.org/
• https://bugzilla.mozilla.org/

This extension only works with modern Firefox v95 or higher. Versions before v1.0 do support older browser versions, but use a more error-prone way of darkening websites.

Download

Contribute

You can easily get involved in this FLOSS project and any help is certainly appreciated. Here are some ideas:

• 📃 Translate this add-on into multiple languages!
• 🐛 Fix some easy issues and get started in add-on development (or just try out the development version)
• 💡 Or check out some other add-on issues (or translate them).

Or, in any case, support us by spreading the word! ❤️

If you want to find out how this add-on currently works on a technical level, have a look at this Stackoverflow answer. I've explained it there in detail.

website-dark-mode-switcher's Issues

Adjust permissions doc

In the hurry to a v2.0 release I missed updating this doc about what permissions we request:

https://github.com/rugk/website-dark-mode-switcher/blob/master/assets/texts/en/permissions.md

Thankfully, actually, we request even less settings than before! 😊

The AMO UI only shows:

Read and modify browser settings

white extension icon for dark firefox themes?

Background

https://i.imgur.com/QBJAxsI.png

Proposed solution

Alternatives

Additional context

force dark theme through resistFingerprinting

I really like using the firefox pref privacy.resistFingerprinting, which enhances privacy a lot, but also blocks ui.systemUsesDarkTheme and browserSettings.overrideContentColorScheme.

I'd like to make an exception in this case though, as browsing with a dark theme is more important to me than one bit of information for possible trackers.

This used to be possible with this extension in its v1 architecture (which did some js tricks I guess), but obviously doesn't work anymore as of the use of overrideContentColorScheme.

So it would be awesome if there was a way to enable the old method of setting the color-scheme, so you could force prefers-color-scheme: dark and still have privacy.resistFingerprinting with its bunch of other features.

implement optional syncing!

website-dark-mode-switcher/src/common/modules/DarkModeLogic.js

Lines 61 to 66 in f73db32

	// TODO: implement optional syncing!
	// const shouldBeSynced = await AddonSettings.get("shouldBeSynced");
	// if (shouldBeSynced) {
	// const currentBrowserSetting = (await browser.browserSettings.overrideContentColorScheme.get({})).value;
	// const syncedSetting = await AddonSettings.get("prefersColorSchemeOverride");

---

This issue was generated by todo based on a TODO comment in f73db32 when #41 was merged. cc @rugk.

Support setting light/dark mode on a per site/URL basis.

Background

My system preference is set to use dark mode.
I browse some websites where their dark mode theme makes the content barely legible.
I use the extension to switch those website to use light mode (the websites in question use media queries, so forcing light mode works).

However this addon currently switches this preference across all sites in my browser.

Proposed solution

Allow associating this preference on a per-site basis.

Alternatives

Continue to toggle this on a per site basis.

Additional context

I'm unsure if the overrideContentColorScheme API allows changes like this to be isolated to a website. A quick scan of the code made me aware that this was the API that was being used to change the result of the media query prefers-color-scheme.

I was originally hoping to do this via Stylus, since it has the ability to set styles on a per site/per url basis, but couldn't find a way to change the result of the media query. This addon lets me change the result of the media-query, but applies that globally.

Corss-origin stylesheets without crossorigin="anonymous" attribute not supported (e.g. Hardware.info)

Affected website:
https://nl.hardware.info/

Bug description

Will not go into dark mode site provides on firefox. When Win10 OS is set to dark and you open this site in edge f.e. it will show their developed dark mode (bleuish in this case). Can it be also made to work with this extension on Firefox?

Missing renaming

We should name it back to "Dark Mode Website Switcher" or "Website Dark Mode Switcher" as the initial name, as the limitation of forcing the light mode (#33) has been resolved in v2 due to the new API.

Hot key for toggeling dark mode

Background

As a user I may want a quick way to trigger the mode without even clicking.

Proposed solution

-> hot key/shortcut

Alternatives

N/A

Additional context

If possible, do not set a default. Users can do so in the Firefox settings.

If you like this idea, please upvote this issue!
Also feel free to send PR's, this is a "good first issue"! 😃

Injected media query always overrides other media queries that should take precedence

Bug description

When using prefer-color-mode: dark in css and after the rules I add another media query for min-width like: min-width: 768px. The Width-Query will executed before the Dark-Mode-Query.

Steps to reproduce

The the link for an live example:

https://jsfiddle.net/u3ojw2vc/2/

Actual behavior

Media-Query will be executed before Dark-Mode Query.

Expected behavior

Like native (in Chrome Browser tested). The styles on bottom should be executed later then the styles on top

System

Windows 10 / Android 8
Firefox 72 (Developer Edition) / Chrome (newest)

Possible solution

Parse the CSS file and replace it complete with a modified one. At the moment it looks like only the dark-mode Styles will be append to the normal Styles.

Package Chrome Extension As Well

Because you use the WebExtensions API, which is more or less standardized across browsers, it makes sense to also package this as a chrome extension. This might require some work, as chrome provides a chrome object, rather than a browser object, but the chrome object supports almost all of the same WebExtension API's.

matchMediaOverwrite should check parameter types

Bug description

If an invalid type is passed, we can directly ignore it and forward it to the real query.

Steps to reproduce

1. Modernizr v2.8.3 passes in the following object as a media query:

> Foundation.media_queries.small
Object { selector: ".foundation-mq-small", query: "" }

Actual behavior

The add-on throws an exception: TypeError: mediaQueryString.includes is not a function
in getColorTypeFromMediaQuery, because it expects a string there.

Expected behavior

ignore invalid parameters and pass it to the original function

System

Operating system and version: Fedora 30
Browser and version: Firefox 68
Add-on version: latest

Possible solution

check parameter type

Doesn't work with stylesheets imported with @import

I was testing this extension on my own site(justinbesterportfolio.xp3.biz), but it didn't use my styles that I defined with a prefers-color-scheme: dark query. I <link> a dummy stylesheet that @imports the real stylesheet, but presumably, this would apply to all @imported stylesheets.

Automatic theme change not working in Open Fixture Library

Affected website: Open Fixture Library (https://open-fixture-library.org/). Disclosure: I'm the author of that page 😉

Bug description

The theme is not automatically toggled when clicking the extension's button. The correct theme is applied after a page reload.

Steps to reproduce

1. Go to https://open-fixture-library.org/
2. Click the extension's button to toggle the theme

Actual behavior

The page theme does not change immediately.

Expected behavior

The page theme should change.

System

Operating system and version: Ubuntu 20.04
Browser and version: Firefox 84.0
Add-on version: 1.2

Possible solution

The page's theme switcher code is located here: https://github.com/OpenLightingProject/open-fixture-library/blob/master/ui/components/ThemeSwitcher.vue

We use mediaQuery.addListener to listen for changes (and toggle an attribute on the <html> element), but that listener is never called.

Test this add-on for bugs… 🐛

There are many websites, where this add-on may fail to work properly. They are reported with the label "site-issue".
If you know some arcane ones or just want to play around a little, feel free to please test this on as many sites as possible.

If you find a bug…

…please open a new issue -> "Problem with a specific website". Fill out the template as stated.
(I think I don't need to mention, you'd better look for duplicates in the issue list, though. 😉)

Of course, it would be awesome if you could already investigate how and possibly why this happens. Extra points for a complete solution (or PR), of course! 😉

That all said, a bug report is more than enough. It's the first step to a solution, and it reports and documents the problem.

For the general contributing guidelines, also see the contributing doc.

Fails on https://pinafore.social/

https://pinafore.social/ implements the dark mode switching via JS. (created by @nolanlawson)

The add-on also detects this, but seems to be too slow getting it's own setting across and cannot properly fake it (thus the website is light, while it should be dark):

Notice how it catches the matchMedia query, but actually has not loaded the setting and thus does not know how to fake it…

Doesn't work with stylesheets imported with @import

Affected website:
justinbesterportfolio.xp3.biz

Bug description

Extension fails to recognize the dark mode css.

Steps to reproduce

1. Install dark mode forcer
2. Enable dark mode forcer
3. Goto justinbesterportfolio.xp3.biz

Actual behavior

The website displays in light mode despite having dark mode CSS.

Expected behavior

The website will style using the dark mode CSS.

System

Operating system and version:
Browser and version: Firefox
Add-on version:

Possible solution

New icon?

Possibly adjust the icon to a sun 🌞 and moon 🌙, so that we have two versions that can show the current status.

For showing the status, however, the theme WebExtension API is not so well-made, as we cannot set a theme_icons object at runtime.

Solution for Dark Mode Website Switcher not working with arkenfox's user.js

pref that break this extension: user_pref("privacy.resistFingerprinting", true);
breakage: websites prefer light mode than dark mode
solution: change user_pref("privacy.resistFingerprinting", true); to user_pref("privacy.resistFingerprinting", false);

Submiting it here if anyone will have this issue as well.

Simplify dramatically now that mediaText is read-write

Background

This extension could be dramatically simplified using cssRules - media.mediaText.

We can de- or re-activate the matching condition. Each CSSMediaRule has a mediaText that, for dark-mode-only elements, contains. (prefers-color-scheme: dark). It is, to my great surprise, read-writable.

Proposed solution

See dark-mode-toggle as a proof-of-concept.
You can see it in action here: Toggling dark mode manually via javascript

I know the iteration over all styles etc is a tragic sight. Javascript isn't my strong suit and I avoid it wherever possible.
Also, I guess, styles that are explicitly for light mode only would get inadvertently inverted. We'd have to mark them specifically.

Design Opengraph/Social/Twitter card image

To be used for GitHub and AMO. (shown when you share a link to them on Twitter or so)

Similar to the ones from my other add-ons:

• https://github.com/rugk/awesome-emoji-picker/blob/master/assets/repo-card-opengraph.png
• https://github.com/rugk/offline-qr-code/blob/master/assets/repo-card-opengraph.png

Requirements

• to be saved and design via SVG (e.g. Inkscape). Use this template (template based on official GitHub template.) https://github.com/rugk/opengraph-template/
• show logo and/or screenshots (if it fits), some kind of indication that it is an Firefox add-on (i.e. Firefox logo) and some kind of indicator that it is on GitHub/FLOSS (GitHub logo)
• few text, big text, great background, don't overwhelm the user
• looks good! 😊

Allow for local files

One of the first examples, see below, does not work as a local file.
That is, if I save the following as a local file, the add-on does nothing.
It works fine however, on this page online.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <style type="text/css">
            .day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

.day, .night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}

        </style>
        
        <title>prefers-color-scheme - Examples - code sample</title>
    </head>
    <body>
        
            <div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div> <br>

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>

        
        
    </body>
</html>

Switch to manifest v3

See TinyWebEx/common#14

Darkening only specific domains

I want web page to darker only specific domain, not for all as default. So it needs a list to dark color for the linked page- which is listed. And others all are non-darken. For example(the system will be-)
Huge number of domains can visit by users. Yes, users who wants it always switching on/off for any site with their white list. And but some request is nearly same-that is, which users never need to use this darker software. But only for (suppose-) facebook, instagram, twitter, gmail, example.com1 ,2, and 3 (this 7 domains). He/she needs the list up.

So two mode/group for list:

1)white list-not to darken &
2) Off mode- to perform darkening(for listed up) when switched off. And here, can disable option also be set.

Then users can disable extension or delete list as needs. I am all right? Thank you

Support forcing light mode

Background

My system is dark mode by default, but occasionally I want to force light mode. I'd love if I could use this to change the color preference the other way around.

Proposed solution

Exact same behavior, but it inverts the current setting instead of forcing dark mode.

Alternatives

Couldn't find any others.

Additional context

Maybe this is possible, but if so I couldn't figure out how to make it work and the description of the extension seems to at least in the add-on site describe it as only being able to force dark mode.

Updated translations for 'da': Danish (dansk)

Your translation have been copied to your clipboard. Paste it here:

Updated translations for 'da': Danish (dansk):

{
  // manifest.json
  "extensionName": {
    "message": "Mørk Tilstand Hjemmeside skifter",
    "description": "Name of the extension.",
    "hash": "1c347b2756cb4cd138c4e8c84731ca51"
  },
  "extensionNameShort": {
    "message": "Mørk Tilstand Hjemmeside skifter",
    "description": "Name of the extension.",
    "hash": "1c347b2756cb4cd138c4e8c84731ca51"
  },
  "extensionDescription": {
    "message": "Skifter hjemmesider til deres mørke tilstand, hvis de understøtter det.",
    "description": "Description of the extension.",
    "hash": "ac715a72fd13ff2b45081c96d554483e"
  },
  "browserActionButtonTitle": {
    "message": "Tving Mørk Tilstand",
    "description": "The title for the button, which opens the popup.",
    "hash": "0c27fa654612c56f14537e6a6c9ef141"
  },
  "commandToggleDarkMode": {
    "message": "Skift tvingning af mørk tilstand",
    "description": "Description of the hot key command to toggle the dark mode just like clicking on the browser action (by default with Ctrl+Shift+B).",
    "hash": "ec5231cdc07a35b5a30865fb18ef368c"
  },

  // errors or other messages (mostly for settings)

  // browser setting - list of levels of control

  // badges

  // options

  // ARIA labels/descriptions

  "__WET_LOCALE__": { "message": "da" }
}

Race condition leads to dark mode not being applied

Bug description

@lionirdeadman reported a bug with a specific website that triggered

Steps to reproduce

Dark mode only used in pure CSS. Same CSS on each site.

But on sites with much HTML content,

I currently guess this is a timing issue, because the add-on tries to get the CSS from the website too fast, so it has not already loaded (because it's still parsing HTML).

Actual behavior

Sometimes fails to apply dark mode.

Expected behavior

Always work.

System

Browser and version: Firefox 68

Possible solution

trigger later?

https://ar.al/ Vimeo Embed Inverted

Affected website: https://ar.al/

Bug description

On the homepage of the website there is a Vimeo embed. With Dark Website Forcer enabled and toggled on, the embed is inverted. When Dark Website Forcer is disabled or toggled off, the website correctly reflects the system settings (on Firefox 92.0 on macOS 11.5.2).

Steps to reproduce

1. Go to https://ar.al/
2. Toggle Dark Website Forcer on and off
3. The website appears correctly (dark or light) with Dark Website Forcer off and the Vimeo embed is inverted with Dark Website Forcer on, regardless.

Screencast/Screenshots

With macOS "Light Appearance" and Dark Website Forcer toggled off:

With macOS "Dark Appearance" and Dark Website Forcer toggled off:

With any macOS Appearance and Dark Website Forcer toggled on:

Actual behavior

See above.

Expected behavior

Nothing should happen.

System

Operating system and version: macOS 11.5.2
Browser and version: Firefox Firefox 92.0
Add-on version: 1.2

Possible solution

idk. This doesn't seem like something that should happen in the first place.

Inconsistent Application on New Tabs

Bug description

The extension often fails to apply the dark mode when visiting websites from a new tab.

Steps to reproduce

1. Start with a fresh firefox profile
2. Set ui.systemUsesDarkTheme to 0
3. Install this addon from AMO
4. Open a new tab
5. Visit a test website (ex: https://webkit.org/) via the URL bar

Actual behavior

Dark mode often is not applied (but refreshing fixes it and applies the dark mode). Not 100% consistent, but happens to me roughly 40%-50% of the time when testing.

Expected behavior

Dark mode is forced.

System

Operating system and version: Linux arch 5.11.2-arch1-1
Browser and version: Firefox Nightly 88.0a1 (2021-03-02) (64-bit) [note: happens on previous versions too]
Add-on version: 1.2 [latest on AMO as of time of issue]

Project is not needed anymore - What are the next steps?

Background

Since Firefox 87 the Devtools provides already the support for dark-mode testing. So this addon is no longer needed.

Proposed solution

Stop the Support + add incompatibility for >= Firefox 87

Alternatives

Stil support this addon

Additional context

Thanks you so much for your addon. It helped me alot for my private projects :)

Interference with other addons/settings? (privacy.resistFingerprinting)

Bug description

On my system, it works on some websites (https://bugzilla.mozilla.org/, https://stuffandnonsense.co.uk), but not on most (https://kde.org, https://emojipedia.org/, https://webkit.org/, https://pinafore.social/…).

Steps to reproduce

1. I have several add-ons like uBlock Origin, uMatrix, Dencentraleyes.
2. I have numerous settings from https://github.com/ghacksuserjs/ghacks-user.js/ including privacy.resistFingerprinting (which overrides ui.systemUsesDarkTheme and makes this add-on necessary for dark theme to work at all).

Actual behaviour

Most websites that are supposed don’t get dark theme.

Expected behaviour

Those websites get dark theme.

System

Operating system and version: Arch Linux
Browser and version: Firefox Nightly
Add-on version: 1.1

Support forcing light style

As explained in the Readme and in the descriptions etc. of AMO, we can only try to force websites to have a dark style.

We cannot force a light style, mostly, as most websites won't use prefers-color-scheme: light.

Show a warning in case privacy.resistFingerprinting is enabled

Background

The issue is #22 and this already lead to problematic reviews who attributed the problem to the add-on instead of Firefox, respectively a Firefox setting.

Proposed solution

While the above linked problem cannot be solved, we can use a WebExtension API to read that setting and show a warning or potentially even disable it with one click.

So a tip/warning should be shown for that IMHO.

In detail:

• when the toggle is used or when the settings page is opened, there should be a warning
• the toggle may just open the settings page in such a case or a separate one

Alternatives

Leave it as it is?
Document the problem in other places e.g. the Readme, AMO description etc.? However, the proposed solution is IMHO UX-wise best, because only affected users see it (no others are disturbed) and those (the majority) who do not have any problems here, just leave it as it is… 🙃

Additional context

We also already have the permission to adjust browser settings, so implementation-wise this is not a big deal.

Plugin not Work on Prefetch Stylesheet

Bug description

When I'm using my Stylesheet like this:

<link ref="prefetch" href="style.css" onload="this.setAttribute('ref', 'stylesheet')" as="style">

The Plugin will not activate on the new page reload. I need to deactivate (when it is already activate) and active it again to see the changes.

Steps to reproduce

1. Add a Stylesheet File like on the Description
2. Activate the Plugin before loading the Page
3. Deactive and Activate the Plugin to see the changes

Actual behavior

The Page is loading like a normal prefered White Page. The Dark-Scheme will be ignored.

Expected behavior

After the "prefetch" loading of the Stylesheet, the Plugin should check the Stylesheet (like a normal one) and activate the changes

System

Operating system and version: Win10 Pro (V. Number unknown)
Browser and version: Firefox 72
Add-on version:

Possible solution

Not check for stylesheets in document See here.

Else it should track the HTML Tags for rel="stylesheet" or "rel="prefetch / preload" as="style"

Ignore spaces in media query

Ref https://notabug.org/halcyon-suite/halcyon/issues/101#issuecomment-14504

It currently does not fake the JS window.matchMedia("(prefers-color-scheme:dark)").matches. Note the missing space between the : and dark.

Simple, non-POC version

• UI change: no popup, no options: only one toggle light/dark
• name change: "Force Website Dark Mode"/"Dark Website Forcer"
• release stuff: maybe better AMO notes etc.
• Readme etc. less technical!

Keep all logic. Maybe even keep the old UI and link it as an "advanced option".

Please turn off console logging on production version

Thanks!

Implement "clever"/context-based/"simple" button mode

Background

The typical use case for me may be:

• I am on a light page in the night, now I want it to be dark. Now, when my style currently forces e.g. system-based or a browser-based theme, I just want a dark one with one single click.
• or vice versa: I am on a dark page in the direct sunlight, now I want it to be light (because of better contrast I guess??). Now, when my style currently forces e.g. system-based or a browser-based theme, I just want a light one with one single click.

Currently, based on what settings I have, the one toggle is already set to being. Even with #44 I would need two clicks to change this, which is embarrassing.

Proposed solution

The problem is most of the other settings cannot be used together with that, so we need to hide/disable most of them if that is enabled.
Also, this only makes sense when the add-on itself does not force a light or dark mode (because then clicking on

The UI may switch to this:

[x] Simple mode

Let browser follow…
( ) …system-design
( ) …browser-design

The button then always indicates the current design and reacts on system/browser design changes and

Alternatives

The current way/not offer this?

Additional context

Only possible since v2.0

Cannot download from Firefox Addon Store

Bug description

Hi, I don't know why, but when I try do download this addon from Firefox's Add-on Store it shows "You need an updated version of Firefox for this extension" information. Other addons I can download just fine.

Steps to reproduce

1. Go to https://addons.mozilla.org/en-US/firefox/addon/dark-mode-website-switcher/
   

Actual behavior

"You need an updated version of Firefox for this extension" information

Expected behavior

Option to download this addon.

System

Arch Linux x86_64, Linux 5.16.10-zen1-1-zen, Firefox version 97.0.1 (64 bit), all packages up to date

Bootstrap 5 Dark Mode has incorrect gradient/fades applied

Affected website: Anyone using the https://github.com/vinorodrigues/bootstrap-dark-5 CSS library

Bug description

Something to do with the removal of the light mode CSS causes an ugly white fade out to be left behind, when it should be the opposite.

Steps to reproduce

1. Go to https://vinorodrigues.github.io/bootstrap-dark-5/examples/cheatsheet-dark.html

Screencast/Screenshots

Rendering correctly in an empty Firefox profile and dark mode set in the preferences

Rendered incorrectly in Firefox with privacy.resistFingerprinting and this extension installed

Expected behavior

I'd hope it's possible to fix this, and not leave the broken fades.

System

Operating system and version: Windows 10
Browser and version: Firefox 94.0.1
Add-on version: 1.2

Implement context menu for quickly switching to other styles

Background

I need to quickly switch styles to another one than the two between I can toggle.
However, I also want to keep the fast access to these two toggles, so I want no popup to open on click.

Proposed solution

Implement context menu for quickly switching to other styles when you right-click on the button.

Alternatives

• Popup, for the reasons stated above I would not like that. Also it is harder to implement.

Additional context

With v2.0 users can now switch between to browser-style/system-style, too.

Does not work on initial page load with NoScript

Bug description

Does not work on initial page load with NoScript enabled.

Steps to reproduce

1. Install NoScript.
2. Go to a website with the dark theme media query that's not white-listed.

Actual behavior

• The page loads with the default scheme.
• Clicking on the 'Dark Website Forcer' button twice switches to the dark theme.
• Disabling NoScript and reloading the page switches to the dark theme.

Expected behavior

Should load in dark mode on the first try with NoScript enabled.

System

Browser and version: Firefox 73.0
Add-on version: 1.1

Possible solution

It should be possible to change the page CSS without running any Javascript in the context of the page. E.g. Stylish works with no issues on all pages.

Fails on periodic table codepen

Fails on https://s.codepen.io/aardrian/debug/NmoQdN

doc: http://adrianroselli.com/2019/05/periodic-table-of-the-elements.html#Dark

Support for picture/source/@media queries

Background

The prefers-color-scheme: dark media query can appear not only in CSS, but also in the picture/source/@media attribute.

Proposed solution

Parse all picture/source elements, substitute true for prefers-color-scheme: dark, false for prefers-color-scheme: light. Since true and false aren't allowed syntactically, using something like min-width: 0px and max-width: 0px can be used in their place.

Note that we don't want the switcher to resolve a single source so that the selection stays responsive.