desktop: style tray icons based on actual system theme

apps/web/desktop/asset-manager.ts

@@ -17,11 +17,12 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { NativeImage, nativeImage, nativeTheme } from "electron";
+import { NativeImage, nativeImage } from "electron";
 import path from "path";
 import { isDevelopment } from "./utils";
 import { parse, ParsedImage } from "icojs";
 import { readFileSync } from "fs";
+import { getSystemTheme } from "./config/theme";
 
 type Formats = "ico" | "png" | "icns";
 type IconOptions<TFormat extends Formats> = {
@@ -86,7 +87,7 @@ export class AssetManager {
   ): FlexibleIcon<TFormat> | undefined {
     const { size = 16, format = "png" } = options;
 
-    const prefix: Prefixes = nativeTheme.shouldUseDarkColors ? ".dark" : "";
+    const prefix: Prefixes = getSystemTheme() === "dark" ? ".dark" : "";
 
     const icoPath = path.join(
       RESOURCES_DIR,

apps/web/desktop/config/theme.js

@@ -35,6 +35,23 @@ function getBackgroundColor() {
   return nativeTheme.shouldUseDarkColors ? "#0f0f0f" : "#ffffff";
 }
 
+function getSystemTheme() {
+  const listeners = nativeTheme.rawListeners("updated");
+  nativeTheme.removeAllListeners("updated");
+
+  const oldThemeSource = nativeTheme.themeSource;
+  nativeTheme.themeSource = "system";
+  const currentTheme = nativeTheme.shouldUseDarkColors ? "dark" : "light";
+  nativeTheme.themeSource = oldThemeSource;
+
+  setTimeout(
+    () => listeners.forEach((a) => nativeTheme.addListener("updated", a)),
+    1000
+  );
+  return currentTheme;
+}
+
+export { getTheme, setTheme, getBackgroundColor, getSystemTheme };
 
 function changeTheme(theme) {
   const listeners = nativeTheme.rawListeners("updated");