1.7 KiB
themed-icons
This example demonstrates how to use the prefers-color-scheme media query to adapt an SVG icon to dark and light themes.
What it does
This extension includes:
- a background script,
background.js. - page (address bar) and browser (toolbar) action icons.
The extension displays the page action on any webpage, and the extension test page, which the extension opens when it starts, and the browser action is pinned to the toolbar when the extension is installed.
Clicking either icon opens the test extension page and switches to the next available theme.
When the active theme is enabled, the page and browser action change color based on the dark or light background color used in the UI.
For example:
- When the built-in Firefox Alpenglow or dark themes are active, the icons are black with a white outline.
- When the built-in Firefox light theme is active, the icons are red with a black outline.
NOTE: Implicit CSS filter applied to pageAction SVG icons in dark themes in Firefox Desktop 151 and earlier
In builds where the about:config preference extensions.webextensions.pageActionIconDarkModeFilter.enabled is set to true or not defined, a greyscale and brightness CSS filter is applied to page action icons for dark themes. This filter can reduce the contrast of icons that use multiple colors, see Bug 2001318.
This implicit CSS filter is turned off in Firefox Desktop Nightly in release 149 and later, and on the release channel as part of Bug 2016509