Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Changing the icon within a Chromium extension, depending upon the OS' dark mode status
// Functions to change the app icon depending upon light or dark mode
function updateIconLightMode() {
chrome.browserAction.setIcon({
path : {
"32": "assets/appicons/32.png",
"24": "assets/appicons/24.png",
"16": "assets/appicons/16.png"
}
});
}
function updateIconDarkMode() {
chrome.browserAction.setIcon({
path : {
"32": "assets/appicons/32-white.png",
"24": "assets/appicons/24-white.png",
"16": "assets/appicons/16-white.png"
}
});
}
// Icon changing
if (window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
// SET DARK MODE ICON
updateIconDarkMode();
} else {
// SET LIGHT MODE ICON
updateIconLightMode();
}
@seanosullivanuk

This comment has been minimized.

Copy link
Owner Author

@seanosullivanuk seanosullivanuk commented Oct 11, 2020

  1. Add the above to your extension folder
  2. Within your extension (e.g. index.html) add <script src="assets/js/changeIcon.js"></script>

Of course, be sure the icon paths are valid. To see this in action, change your OS dark mode off and on and click upon the extension icon. (Within macOS, go to System Preferences > General and change the Appearance).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.