Fix monochrome icon in Chrome when colorTheme == system.

This commit is contained in:
Stefan Sundin 2024-03-18 20:02:25 -07:00
parent 63d929092d
commit f2498088a1
7 changed files with 51 additions and 1 deletions

View file

@ -159,6 +159,7 @@
"Pixels": true,
"PREDEFINED_SITELIST": true,
"RED_BUTTON": true,
"retrieveColorScheme": true,
"sendMessage": true,
"showNotification": true,
"siteMatch": true,

View file

@ -143,6 +143,7 @@
"cookies",
"nativeMessaging",
"notifications",
"offscreen",
"storage",
"tabs",
"webNavigation",

View file

@ -10,6 +10,7 @@ try {
'client.js',
'keepass.js',
'httpauth.js',
'offscreen.js',
'browserAction.js',
'page.js',
'event.js',

View file

@ -83,7 +83,7 @@ browserAction.generateIconName = async function(iconType) {
let style = 'colored';
if (page.settings.useMonochromeToolbarIcon) {
if (page.settings.colorTheme === 'system') {
style = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
style = await retrieveColorScheme();
} else {
style = page.settings.colorTheme;
}

View file

@ -0,0 +1,31 @@
'use strict';
async function retrieveColorScheme() {
if (typeof window !== 'undefined') {
// Firefox does not support the offscreen API but its background script still has a window (so far)
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
const offscreenUrl = browser.runtime.getURL('offscreen/offscreen.html');
const existingContexts = await browser.runtime.getContexts({
contextTypes: [ 'OFFSCREEN_DOCUMENT' ],
documentUrls: [ offscreenUrl ],
});
if (existingContexts.length === 0) {
await browser.offscreen.createDocument({
url: offscreenUrl,
reasons: [ 'MATCH_MEDIA' ],
justification: 'Retrieve color scheme',
});
}
const style = await browser.runtime.sendMessage({
target: 'offscreen',
action: 'retrieve_color_scheme',
});
if (!style) {
// if messaging fails then use "light" icon
return 'light';
}
return style;
}

View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<script src="offscreen.js"></script>
</head>
<body></body>
</html>

View file

@ -0,0 +1,9 @@
chrome.runtime.onMessage.addListener(({ target, action }, sender, sendResponse) => {
if (target !== 'offscreen') {
return;
}
if (action === 'retrieve_color_scheme') {
const style = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
sendResponse(style);
}
});